Perché non è ansible combinare pseudo-elementi / classi specifici del fornitore in un unico set di regole?

Nei CSS è ansible placeholder testo placeholder all’interno di un input utilizzando una combinazione di pseudo-classi e pseudo-elementi specifici del fornitore (per ottenere la migliore copertura cross-browser).

Questi condividono tutte le stesse proprietà di base (es .: stili di testo e dichiarazioni di colore).

Tuttavia, anche se inevitabilmente desidero applicare gli stessi stili indipendentemente dal fornitore del browser, non sembra ansible combinarli insieme in un selettore separato da virgole (come faresti con qualsiasi altro foglio di CSS in cui desideri condividere due selettori gli stessi stili).

Ad esempio, tendo a indirizzare lo stile segnaposto utilizzando i seguenti selettori:

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

(sebbene :-moz-placeholder venga deprecato a favore di ::-moz-placeholder ciò si è verificato solo con il rilascio di FireFox 19, quindi al momento entrambi sono necessari per un migliore supporto del browser).

Ciò che è frustrante è che dichiarare e dare ogni (lo stesso) stile porta a molte ripetizioni all’interno del CSS.

Quindi, per assicurarmi che il testo del segnaposto sia allineato a destra e in corsivo, vorrei finire con:

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

Quello che voglio veramente fare è combinarli come una singola serie di regole separate da virgole come questa:

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

Tuttavia, nonostante provi questo in poche occasioni, questo sembra non funzionare mai. Mi preoccupa il fatto che ci sia una parte fondamentale dei CSS che non capisco.

Qualcuno può far luce sul perché questo accade?

CSS2.1 afferma :

Il selettore (vedi anche la sezione sui selettori ) consiste di tutto (ma non incluso) nella prima parentesi graffa sinistra ({). Un selettore va sempre insieme a un blocco di dichiarazione. Quando un interprete non può analizzare il selettore (cioè non è valido CSS 2.1), deve ignorare anche il selettore e il seguente blocco di dichiarazione (se presente).

Si noti che poiché CSS3.1 pre-data CSS3, “non è valido CSS 2.1” è scritto sotto le ipotesi che un interprete è pienamente conforms a CSS2.1 e che CSS3 non esiste in teoria. In pratica, ovunque la specifica dice “non è valido CSS” o qualcosa del genere, dovrebbe essere intesa come “non è compresa dall’agente utente”. Vedi la mia risposta a questa domanda correlata per una spiegazione più approfondita.

In particolare, poiché il browser di un fornitore non comprende i prefissi di altri fornitori, deve eliminare tutte le regole che contengono quei prefissi non riconosciuti in selettori di pseudo-class e pseudo-elementi. 1

Per capire come mai una tale regola è stata messa in atto, vedi questa risposta .


1 Si noti che WebKit è noto per aver violato parzialmente questa regola: non ha problemi nell’analisi delle regole i cui selettori hanno pseudo-elementi con prefisso non riconosciuto (che in questo caso è ::-moz-placeholder ). Detto questo, la pseudo-class :-moz-placeholder nella tua regola combinata causerà comunque la sua rottura.

Le specifiche dicono che se un agente utente non riconosce parte di un selettore, deve ignorare l’intero selettore e il suo blocco.

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

Il selettore (vedi il modulo Selettori [SELEZIONA]) consiste di tutto (ma non incluso) nella prima parentesi graffa sinistra ({). Un selettore va sempre insieme a un {} -blocco. Quando un interprete non può analizzare il selettore (cioè non è valido CSS3), deve ignorare anche il {} -blocco.