In CSS is het mogelijk om placeholdertekst op te maken binnen een invoer met behulp van een combinatie van leverancierspecifieke pseudo-klassen en pseudo-elementen (om de beste dekking voor meerdere browsers te krijgen).
Deze delen allemaal dezelfde basiseigenschappen (dwz: tekstopmaak en kleurdeclaraties).
Hoewel ik onvermijdelijk dezelfde stijlen wil toepassen, ongeacht de browserleverancier, lijkt het niet mogelijk om deze te combineren in een door komma’s gescheiden selector (zoals je zou doen met elk ander stuk CSS waar je twee wilt selectors om dezelfde stijlen te delen).
Als voorbeeld heb ik de neiging om de stijl van tijdelijke aanduidingen te targeten met behulp van de volgende vier selectors:
input:-moz-placeholderinput::-moz-placeholderinput:-ms-input-placeholderinput::-webkit-input-placeholder
(hoewel :-moz-placeholderwordt afgeschaftten gunste van ::-moz-placeholderdit gebeurde alleen met de release van FireFox 19, dus momenteel zijn beide nodig voor betere browserondersteuning).
Wat frustrerend is, is dat het declareren en geven van elke (dezelfde) stijl leidt tot veel herhalingen binnen de CSS.
Dus om ervoor te zorgen dat de tekst van de tijdelijke aanduiding rechts uitgelijnd en cursief is, zou ik eindigen met:
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;
}
Wat ik echt wil doen, is ze combineren als één enkele door komma’s gescheiden regelset als volgt:
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
Ondanks dat dit een paar keer geprobeerd is, lijkt dit nooit te werken. Ik maak me zorgen dat er een fundamenteel onderdeel van CSS is dat ik niet begrijp.
Kan iemand enig licht werpen op waarom dit gebeurt?
Antwoord 1, autoriteit 100%
CSS2.1 staten:
De selector (zie ook de sectie over selectors) bestaat uit alles naar (maar niet inclusief) de eerste accolade links ({). Een selector gaat altijd samen met een aangifteblok. Wanneer een user-agent de selector niet kan ontleden (dwz het is geen geldige CSS 2.1), moet deze negeerook de selector en het volgende declaratieblok (indien aanwezig).
Merk op dat aangezien CSS2.1 ouder is dan CSS3, “het is geen geldige CSS 2.1” is geschreven in de veronderstelling dat een user-agent volledig CSS2.1-compatibel is en dat CSS3 in theorie niet bestaat. In de praktijk, waar de specificatie zegt “het is geen geldige CSS” of iets in die zin, moet het worden opgevat als “het wordt niet begrepen door de user-agent”. Zie mijn antwoord op dit gerelateerde vraagvoor een meer diepgaande uitleg.
Omdat de browser van een leverancier de voorvoegsels van andere leveranciers niet begrijpt, moet deze alle regels die deze niet-herkende voorvoegsels bevatten, verwijderen in pseudo-klassen en pseudo-elementkiezers.1
Voor enig inzicht in waaromeen dergelijke regel is ingevoerd, zie dit antwoord.
1Merk op dat WebKit berucht is omdat het deze regel gedeeltelijk negeert: het heeft geen problemen met het ontleden van regels waarvan de selectors niet-herkende pseudo-elementen met voorvoegsel hebben (in dit geval ::-moz-placeholder). Dat gezegd hebbende, zal de pseudo-klasse :-moz-placeholderin uw gecombineerde regel ervoor zorgen dat deze hoe dan ook breekt.
Antwoord 2, autoriteit 19%
De specificaties zeggen dat als een user-agent een deel van een selector niet herkent, hij de hele selector en zijn blok moet negeren.
http://www.w3.org/TR/css3-syntax/#rule-sets
De selector (zie de Selectors module [SELECT]) bestaat uit alles tot (maar niet inclusief) de eerste accolade links ({). Een selector gaat altijd samen met een {}-blok. Wanneer een user-agent de selector niet kan ontleden (d.w.z. het is geen geldige CSS3), moet hij ook het {}-blok negeren.