Чому не можна поєднати специфічні для постачальника псевдоелементи / класи в один набір правил?

Question 1

У 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, яку я не розумію.

Хтось може пролити світло на те, чому це трапляється?

Question 2

CSS2.1 стверджує :

Селектор (див. Також розділ про селектори ) складається з усього до (але не враховуючи) першої лівої фігурної дужки ({). Селектор завжди йде разом із блоком оголошення. Коли агент користувача не може проаналізувати селектор (тобто це неприпустимий CSS 2.1), він також повинен ігнорувати селектор та наступний блок декларації (якщо такий є).

Зверніть увагу, що оскільки CSS2.1 передує дату CSS3, "це неприпустимий CSS 2.1" пишеться з припущеннями, що агент користувача повністю відповідає CSS2.1 і що CSS3 не існує в теорії. На практиці, скрізь, де в специфікації сказано "це неприпустимий CSS" або щось подібне, це слід розуміти як "це не зрозуміло агентом користувача". Дивіться мою відповідь на відповідне запитання для більш поглибленого пояснення.

А саме, оскільки браузер одного постачальника не розуміє префіксів інших постачальників, він повинен скинути будь-які правила, що містять ці нерозпізнані префікси у селекторах псевдокласу та псевдоелементів. ¹

Деякі відомості щодо того, чому було введено таке правило, див. У цій відповіді .

¹ _{Зауважте, що WebKit сумно відомий тим, що це правило частково відхиляє: він не має проблем з синтаксичним аналізом правил, селектори яких мають невпізнані префіксовані псевдоелементи (що в даному випадку є ::-moz-placeholder). Тим не менш, :-moz-placeholderпсевдо-клас у вашому комбінованому правилі все одно призведе до його поломки.}

Question 3

Специфікації говорять, що якщо користувальницький агент не розпізнає частину селектора, він повинен ігнорувати весь селектор та його блок.

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

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