Игнорирование селектора 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, поэтому это не будет требованием для конечных пользователей этого проекта, если они не хотят сами изменять исходные файлы без.
