Игнорирование специфичного для Webkit CSS-селектора в Firefox - PullRequest
Новая
       43

Игнорирование специфичного для Webkit CSS-селектора в Firefox

13 голосов
/ 30 ноября 2011

Я работаю над темой jQuery, которая включает стилизацию для максимально возможного количества элементов формы. Изначально он был разработан для Webkit (Chrome). Теперь я хочу, чтобы он работал и с Firefox.

Проблема есть; Firefox имеет проблемы с некоторым синтаксисом, специфичным для Webkit.

Например: 

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}

Проблема в input[type="range"]::-webkit-slider-thumb, бите. Удалите его, и Firefox работает нормально. Он также делает это для другого синтаксиса, такого как ::-webkit-file-upload-button, ::selection и всех других, использующих метки ::-webkit-.... Он распознает свои собственные ::-moz-... метки, например, ::-moz-selection, просто отлично.

Webkit, похоже, просто игнорирует метки ::-moz-.

Есть ли какой-нибудь удобный способ заставить Firefox игнорировать метки ::-webkit-... или иным образом решить эту проблему, не поддерживая несколько копий каждого блока CSS?

Использование недавно обновленных версий Chrome и Firefox.

Ответы [ 3 ]

9 голосов
/ 30 ноября 2011

К сожалению, это невозможно без дублирования блоков объявления, поскольку в спецификации CSS указано , что браузеры должны вести себя таким образом при обнаружении нераспознанных селекторов в правилах CSS:

Селектор состоит из всего, вплоть до (но не включая) первой левой фигурной скобки ({). Селектор всегда идет вместе с {} -блоком. Когда пользовательский агент не может проанализировать селектор (т. Е. Он не является допустимым CSS3), он также должен игнорировать блок {}.

В этом случае браузер одного поставщика не может распознать префиксы другого поставщика, поэтому он должен игнорировать правило.

6 голосов
/ 30 ноября 2011

Мне пришлось немного прочитать, чтобы ответить на этот вопрос, вот несколько хороших ресурсов, Gecko Style Engine Дальнейшее чтение по реализации движка , Тем не менее, я не видел никаких указателейкак, почему он отбросил бы это, но я могу дать вам мое лучшее предположение, я думаю, что движок отбрасывает весь селектор, предположим, что mozilla реализует псевдоселектор -moz-slider-thumb и попытается использовать его с -webkit-также будет отброшено.

Я видел такое поведение раньше во всех браузерах, и я думаю, что оно иногда используется как хак для нацеливания на некоторые браузеры.

Это будет работать 

input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

Это не 

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

или это 

input[type="range"]::-moz-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

Я думаю, вам придется переписать значения свойств на двух или более различных селекторах, это повлияет только на размертаблицы стилей, так как движки будут продолжать сбрасывать селекторы, которыми они не владеют.

Я действительно надеюсь, что это помогло хотя бы немного.

РЕДАКТИРОВАТЬ:

Как заметил пользователь@BoltClock в комментариях, мое предположение было правильным, вот ссылка на спецификацию w3.org / TR / css3-синтаксис / # набор правил

2 голосов
/ 06 декабря 2011

К вашему сведению, я остановился на другом решении.

Поскольку моим конечным продуктом является таблица стилей, я решил использовать компилятор CSS для генерации файла .CSS на основе исходного файла. Пока все работает нормально.

Я использовал LessPHP , потому что формат .less достаточно популярен, и я знаком с PHP, но подойдет любой другой.

Обратите внимание, что я использую LessPHP только для компиляции статического файла .CSS, поэтому конечным пользователям этого проекта не потребуется, если они сами не захотят изменить исходные файлы .less.

...