Почему невозможно объединить псевдоэлементы/классы, зависящие от поставщика, в один набор правил?

В CSS можно стилизовать placeholder текст во входных данных, используя комбинацию псевдоклассов и псевдоэлементов, зависящих от поставщика (чтобы получить наилучшее кросс-браузерное покрытие).

Все они имеют одни и те же основные свойства (например, стиль текста и объявления цвета).

Однако, несмотря на то, что я неизбежно хочу применять одни и те же стили независимо от поставщика браузера, представляется невозможным объединить их вместе в селектор, разделенный запятыми (как вы сделали бы с любым другим фрагментом CSS, где вы хотите, чтобы два селектора разделялись). одинаковые стили).

В качестве примера я склонен ориентироваться на стиль заполнителя, используя четыре следующих селектора:

  • input:-moz-placeholder
  • input::-moz-placeholder
  • input:-ms-input-placeholder
  • input::-webkit-input-placeholder

(хотя :-moz-placeholder рекомендуется в пользу ::-moz-placeholder это произошло только с выпуском FireFox 19, поэтому в настоящее время для лучшей поддержки браузера необходимы оба).

Что расстраивает, так это то, что объявление и предоставление каждого (одного и того же) стиля приводит к большому количеству повторений в CSS.

Итак, чтобы убедиться, что текст-заполнитель выровнен по правому краю и выделен курсивом, я бы получил:

input:-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input::-moz-placeholder{
    font-style: italic;
    text-align: right;
}
input:-ms-input-placeholder{
    font-style: italic;
    text-align: right;
}
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

Что я действительно хочу сделать, так это объединить их в один набор правил, разделенных запятыми, например:

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

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

Кто-нибудь может пролить свет на то, почему это происходит?


css css-selectors pseudo-element pseudo-class
person johnkavanagh    schedule 07.06.2013    source источник

Ответы (2)


arrow_upward
75
arrow_downward

CSS2.1 указывает:

Селектор (см. также раздел о селекторах) состоит из всего до (но не включая) первую левую фигурную скобку ({). Селектор всегда идет вместе с блоком объявлений. Если пользовательский агент не может проанализировать селектор (т. е. он не соответствует CSS 2.1), он должен игнорировать селектор и следующий за ним блок объявления (если есть).

Обратите внимание, что, поскольку CSS2.1 предшествует CSS3, «это недействительный CSS 2.1» написано в предположении, что пользовательский агент полностью совместим с CSS2.1 и что CSS3 не существует в теории. На практике, когда в спецификации говорится, что «это недопустимый CSS» или что-то в этом роде, это следует понимать как «это не понимается пользовательским агентом». См. мой ответ на это относится вопрос для более подробного объяснения.

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

Чтобы понять, почему было введено такое правило, см. этот ответ.

1 Обратите внимание, что WebKit печально известен тем, что частично нарушает это правило: он без проблем анализирует правила, селекторы которых имеют нераспознанные префиксные псевдоэлементы (в данном случае это ::-moz-placeholder). Тем не менее, псевдокласс :-moz-placeholder в вашем комбинированном правиле все равно приведет к его нарушению.

person BoltClock    schedule 07.06.2013
comment
Спасибо, очень подробно и со смыслом. Все еще очень неприятно! Просто для справки на будущее: :-moz-placeholder псевдокласс был только обесценился относительно недавно с введением FireFox 19, поэтому, к сожалению, и :-moz-placeholder, и его преемник с двойным запятым ::-moz-placeholder должны использоваться в настоящее время, чтобы обеспечить наилучшее покрытие браузера. - person johnkavanagh; 07.06.2013

arrow_upward
14
arrow_downward

Спецификации говорят, что если пользовательский агент не распознает часть селектора, он должен игнорировать весь селектор и его блок.

http://www.w3.org/TR/css3-syntax/#rule-sets

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

person Alessandro Vendruscolo    schedule 07.06.2013
comment
Ссылка здесь у меня не работала (не вела на цитируемый текст); Я нашел это: ‹w3.org/TR/selectors/#Conformance› . ИМО, не должно быть проблем с разбором списков селекторов, таких как input:-moz-placeholder,:-any-other-bogus-selector, поэтому правило должно работать, и браузеры, которые его удаляют, делают это в нарушение правил. - person Tobias; 15.03.2016