Вопрос по css-selectors, css, css3 – Почему я не могу сгруппировать специфичные для браузера CSS-селекторы для разных браузеров?

6

Я просто попытался написать следующее правило для стилизации заполнителя ввода для браузеров, которые его поддерживают:

#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

Проблема состоит в том, что правило не применяется. Тем не менее, если я разобью его так, он будет работать нормально:

#main input::-webkit-input-placeholder
{
    color: #888;
    font-style: italic;
}
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

Почему я не могу сгруппировать специфичные для браузера селекторы или есть другой способ сделать это? Неправильно повторять одни и те же атрибуты дважды для одного и того же элемента.

Update:

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

Ваш Ответ

3   ответа
0

проверьте скрипт без префиксов. Это позволяет вам исключить специфичные для поставщика префиксы (например, -webkit- или -moz-) для таких свойств CSS, как эти.

А, ты можешь быть там. хорошо подмечено Grezzo
Вы не использовали его раньше, вы уверены, что он работает и для браузерных селекторов? В документации упоминаются только CSS-свойства из того, что я вижу. Christofer Eliasson
6

браузер должен рассматривать все правило как недействительное. Или, по крайней мере, так говорит W3C.

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

Спасибо за источник, который объясняет, почему он признан недействительным! Я думаю, что имеет смысл игнорировать все правило, когда вы так его сформулируете. Это немного сложный случай, так что я думаю, что все в порядке, но кажется немного грязным, что вы должны повторить свой код. Christofer Eliasson
@ boltclock Спасибо за дополнительное прочтение, хотя интересно то, что я отлаживал этот конкретный код в Chrome, и он не применял правило в моем первом примере. WebKit начал подчиняться этому правилу? Christofer Eliasson
@ Christofer Eliasson: Хммм, получается Поведение WebKit не может быть преднамеренным в конце концов. Я только что обнаружил, что это не работает в вашем случае, потому что WebKit только выборочно игнорирует префиксные псевдоэлементы (например,::-moz-selection), но не с префиксом псевдоклассов (например,:-moz-placeholder в вашем примере) и Один из разработчиков Chrome и членов CSSWG только что сказал мне, что это не кажется преднамеренным. BoltClock♦
0

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

Похожие вопросы