Warum ist es nicht möglich, herstellerspezifische Pseudoelemente / Klassen in einem Regelsatz zu kombinieren?

In CSS ist es möglich, placeholderText innerhalb einer Eingabe mithilfe einer Kombination aus herstellerspezifischen Pseudoklassen und Pseudoelementen zu formatieren (um die beste browserübergreifende Abdeckung zu erzielen).

Diese haben alle die gleichen grundlegenden Eigenschaften (z. B. Textstil und Farbdeklarationen).

Obwohl ich unweigerlich dieselben Stile anwenden möchte, unabhängig vom Hersteller des Browsers, scheint es nicht möglich zu sein, diese zu einem durch Kommas getrennten Selektor zu kombinieren (wie bei jedem anderen CSS-Teil, bei dem zwei Selektoren gemeinsam genutzt werden sollen die gleichen Stile).

Als Beispiel tendiere ich dazu, das Platzhalter-Styling mit den vier folgenden Selektoren zu zielen:

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

(obwohl :-moz-placeholder ist veraltet ist für ::-moz-placeholderdies geschah erst mit der Veröffentlichung von 19 FireFox so derzeit beide sind für eine bessere Browser-Unterstützung erforderlich).

Was frustrierend ist, ist, dass das Deklarieren und Geben jedes (des gleichen) Stils zu vielen Wiederholungen innerhalb des CSS führt.

Um sicherzustellen, dass der Platzhaltertext rechtsbündig und kursiv ist, würde ich am Ende Folgendes haben:

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;
}

Was ich wirklich tun möchte, ist, sie als einen einzigen durch Kommas getrennten Regelsatz wie folgt zu kombinieren:

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

Obwohl dies einige Male versucht wurde, scheint dies nie zu funktionieren. Es macht mir Sorgen, dass es einen grundlegenden Teil von CSS gibt, den ich nicht verstehe.

Kann jemand Licht ins Dunkel bringen, warum dies passiert?

CSS2.1 besagt :

Der Selektor (siehe auch Abschnitt über Selektoren ) besteht aus allem bis zur ersten linken geschweiften Klammer ({). Ein Selektor gehört immer zu einem Deklarationsblock. Wenn ein Benutzeragent den Selektor nicht analysieren kann (dh CSS 2.1 ist nicht gültig), muss er den Selektor und den folgenden Deklarationsblock (falls vorhanden) ebenfalls ignorieren .

Da CSS2.1 vor CSS3 datiert, wird "es ist nicht gültig, CSS 2.1" unter der Annahme geschrieben, dass ein Benutzeragent vollständig CSS2.1-kompatibel ist und dass CSS3 theoretisch nicht vorhanden ist. In der Praxis sollte überall dort, wo in der Spezifikation "es ist kein gültiges CSS" oder etwas in diesem Sinne steht, "es wird vom Benutzeragenten nicht verstanden" verstanden werden. In meiner Antwort auf diese verwandte Frage finden Sie eine ausführlichere Erklärung.

Da der Browser eines Anbieters die Präfixe anderer Anbieter nicht versteht, muss er nämlich alle Regeln löschen, die diese nicht erkannten Präfixe in Pseudoklassen- und Pseudoelement-Selektoren enthalten. ¹

In dieser Antwort finden Sie Informationen darüber, warum eine solche Regel eingeführt wurde .

¹ _{Beachten Sie, dass WebKit dafür berüchtigt ist, diese Regel teilweise zu missachten: Es hat keine Probleme, Regeln zu analysieren, deren Selektoren nicht erkannte vorangestellte Pseudoelemente haben (was in diesem Fall der Fall ist ::-moz-placeholder). Die :-moz-placeholderPseudoklasse in Ihrer kombinierten Regel führt jedoch dazu, dass sie trotzdem unterbrochen wird.}

Die Spezifikationen besagen, dass ein Benutzeragent, der einen Teil eines Selektors nicht erkennt, den gesamten Selektor und seinen Block ignorieren muss.

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

Der Selektor (siehe Selektormodul [SELECT]) besteht aus allem bis zur ersten linken geschweiften Klammer ({). Ein Selektor gehört immer zu einem {} -Block. Wenn ein Benutzeragent den Selektor nicht analysieren kann (dh er ist kein gültiges CSS3), muss er auch den {} -Block ignorieren.