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

Я работаю над темой 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.

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Мне пришлось немного почитать, чтобы ответить на этот вопрос, вот некоторые хорошие ресурсы, Механизм стиля Gecko Дальнейшее чтение по внедрению Engine, Still я не видел каких-либо указателей, почему он его потерял, но я могу дать вам все возможное, я думаю, что двигатель отбрасывает весь селектор, предположим, что 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;
}

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

Я действительно надеюсь, что это помогло немного по крайней мере.

EDIT:

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

Ответ 3

FYI, я закончил тем, что решил другое решение.

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

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

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