Devo usare la notazione dei due punti singoli o doppi per gli pseudo-elementi?

108

Poiché IE7 e IE8 non supportano la notazione dei due punti per gli pseudo-elementi (ad esempio ::aftero ::first-letter), e poiché i browser moderni supportano la notazione a due punti (ad esempio :after) per la compatibilità all'indietro, dovrei usare esclusivamente la notazione a due punti e quando La quota di mercato di IE8 scende a un livello trascurabile tornare indietro e trovare / sostituire nella mia base di codice? O dovrei includere entrambi:

.foo:after,
.foo::after { /*styles*/ }

Usare il doppio da solo sembra sciocco se mi importa degli utenti di IE8 (i poveri cari).

— jinglesthula
fonte

71

Do Non utilizzare sia combinato con una virgola. Un programma utente conforme a CSS 2.1 (non compatibile con CSS3) ignorerà l'intera regola:

Quando un programma utente non può analizzare il selettore (cioè non è CSS valido 2.1), deve ignorare il selettore e anche il seguente blocco di dichiarazione (se esiste).

CSS 2.1 dà un significato speciale alla virgola (,) nei selettori. Tuttavia, poiché non è noto se la virgola possa acquisire altri significati nei futuri aggiornamenti dei CSS, l'intera istruzione dovrebbe essere ignorata se c'è un errore in qualsiasi punto del selettore, anche se il resto del selettore può sembrare ragionevole in CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

Potresti comunque usare

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

D'altra parte questo è più prolisso del necessario; per ora, puoi restare fedele alla notazione con i due punti.

— user123444555621
fonte

7

grazie per aver incluso le informazioni sulla virgola e l'ignora. Questo probabilmente mi avrebbe fatto (e forse altri) grattarsi la testa per un po '. Sembra che la cosa migliore quando il 99% dei browser in uso supporta la notazione dei doppi due punti è passare a usarla e (poiché nessuno lascerà il supporto per i due punti singoli e interromperà il web, quindi non c'è davvero nemmeno un punto nel trovare / sostituire il vecchio codice a quel punto).

— jinglesthula

2

Questa non è la via da seguire. Il progresso del browser sarà accelerato con la forza se le persone smettono di assecondare browser antidiluviani, danneggiati e obsoleti.

— Gershom

2

@Gershom Maes: non sta a te dirlo, sfortunatamente. Penso che gran parte degli sviluppatori sperino in lo stesso, ma non succederà.

— BoltClock

@Gershom Maes possiamo sognare

— James Cushing

1

Penso che sia importante notare che mantenere stili duplicati può essere problematico. Come osserva cHao di seguito, il codice duplicato ama divergere. Probabilmente la maggior parte degli sviluppatori deve essere morsa da esso un paio di volte per

— giurarlo

62

Dai selettori CSS3 REC :

Questa notazione :: è introdotta dal documento corrente per stabilire una discriminazione tra pseudo-classi e pseudo-elementi.
Per compatibilità con i fogli di stile esistenti, i programmi utente devono anche accettare la precedente notazione di un punto e virgola per gli pseudo-elementi introdotti nei livelli CSS 1 e 2 (vale a dire,: first-line,: first-letter,: before e: after).
Questa compatibilità non è consentita per i nuovi pseudo-elementi introdotti in questa specifica.

Sembra che tu stia usando (solo) la notazione di un punto e virgola per gli pseudo-elementi che già esistevano in CSS2.1 poiché gli UA devono essere compatibili con le versioni precedenti.

— FelipeAls
fonte

1

Per la cronaca, questa risposta potrebbe anche essere contrassegnata come corretta. Fornisce una prospettiva preziosa, anche se l'impulso per la domanda originale era specificamente gli pseudo-elementi prima e dopo. Grazie per averlo aggiunto.

— jinglesthula

Come sei arrivato a quella conclusione? Sono giunto alla conclusione opposta ... se i due punti singoli non saranno consentiti per nuovi pseudo-elementi, non dovresti iniziare a usare i doppi due punti per prendere l'abitudine?

— andrewtweber

@andrewtweber nel contesto della domanda originale (IE8) usando double romperebbe il CSS. Detto questo, al momento della stesura di questo articolo la maggior parte dei siti probabilmente vede l'utilizzo di IE8 a un livello così basso da consentire il doppio senza alcuna significativa ricaduta. Si può fare affidamento sui fornitori di browser per supportare la notazione singola per sempre, ma a questo punto non c'è niente di sbagliato nel cambiare abitudini di codifica.

— jinglesthula

@andrewtweber +1 per OP Sì, IE8 doveva essere preso in considerazione nel 2012 e - YMMV - è ancora nel 2015 in enormi progetti B2B e simili, ma non in altri progetti web. Entrambe le notazioni sono perfettamente valide per questi pseudo esistenti. La minificazione CSS guadagnerà 1 byte utilizzando la notazione di un punto e virgola. Se vuoi usare sempre una notazione e proibire l'altra, beh è una convenzione che sei completamente libero di farlo con il tuo team ma non è una RACCOMANDAZIONE.

— FelipeAls

@jinglesthula e Felipe, hai ragione, non avevo notato la data. Forse la risposta dovrebbe essere aggiornata, poiché questa domanda è in cima ai risultati di ricerca

— andrewtweber

22

Non sono assolutamente d'accordo con @mddw e @FelipeAls, per quanto riguarda il considerare l'uso di un colon "sicuro".

Questa mentalità "la userò anche se è deprecata" è esattamente il motivo per cui le tecnologie basate su browser sono così lente nell'avanzare e nel progredire.

SÌ, vogliamo mantenere la compatibilità con i vecchi standard. Ammettiamolo, è la mano che ci è stata data. MA, questo non significa che hai una scusa per essere pigro nel tuo sviluppo, ignorando gli standard attuali a favore di quelli deprecati.

Il nostro obiettivo dovrebbe essere quello di mantenere la conformità con gli standard attuali, supportando il più possibile lo standard legacy.

Se gli pseudo-elementi vengono usati :nei CSS2 e ::nei CSS3, non dovremmo usare l'uno o l'altro; dovremmo usare entrambi .

Per rispondere completamente alla domanda originale posta, il seguente è il metodo più appropriato per supportare l'implementazione più recente di CSS (versione 3), pur mantenendo il supporto legacy per la versione 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}

— Joshua Burns
fonte

3

Penso che sia abbastanza sicuro presumere che i fornitori di browser continueranno a supportare la vecchia notazione a tempo indeterminato a causa della quantità di codice che realisticamente non verrà mai aggiornata e che desiderano che il loro browser venga visualizzato "correttamente". D'altra parte, mantenere copie separate degli stili solleva la bandiera rossa ASCIUTTA, penso. Penso che sia più pragmatico che pigro usare la notazione a due punti fino a quando la quota di mercato di IE7 non diminuisce. Detto questo, voglio che il Web vada avanti come chiunque altro!

— jinglesthula

9

Se " non sei assolutamente d'accordo " con la mia risposta, allora sei assolutamente in disaccordo con la parola " must" in una RACCOMANDAZIONE W3C. "Il nostro obiettivo dovrebbe essere quello di mantenere la conformità con gli standard attuali, supportando il più possibile lo standard legacy. " È ciò che viene affrontato da questa parte del REC e afferma esplicitamente che gli UA non devono obbligare gli autori a utilizzare entrambe le notazioni e spiega come questo deve essere fatto da questi UA. Sentiti libero di contattare la mailing list CSS WG se non sei d'accordo (o su Twitter @glazou co-presidente di questo gruppo di lavoro)

— FelipeAls

4

Non sono in disaccordo con l'intera risposta, solo per quanto riguarda l'uso di un singolo colon come "sicuro". la compatibilità non è consentita per i nuovi pseudo-elementi significa che eventuali futuri pseudo-elementi saranno implementati solo in ::. Secondo il tuo approccio, gli individui inizieranno quindi a mescolare e abbinare l'uso di :e ::per gli pseudo-elementi. L'adesione esplicita al vecchio standard (che per il momento può essere supportato) è una pratica intrinsecamente cattiva e dovrebbe essere evitata ogniqualvolta ragionevolmente possibile. Se non sei d'accordo con questa affermazione, abbiamo semplicemente opinioni diverse.

— Joshua Burns

4

Aderire a uno standard esplicitamente compatibile non è intrinsecamente una cattiva pratica, se la compatibilità è un obiettivo. D'altra parte, l'uso di entrambi porta a duplicare gli stili e, come sa chiunque abbia codificato per un po ', il codice duplicato ama semplicemente divergere.

— cHao

8

@JoshuaBurns Se il mio predecessore avesse duplicato un carico di codice per proteggermi da una futura minaccia immaginaria, mi sentirei molto più "fregato".

— Mark Amery

2

Tuttavia, è diventato sempre più popolare utilizzare i polyfill sia per i nuovi javascript che per i CSS, quindi potresti semplicemente voler continuare a utilizzare la nuova ::sintassi double-colon ( ) e mantenere un polyfill per i browser meno recenti, fintanto che è necessario.

— ZPR
fonte

Questa è essenzialmente solo una meta risposta; non fornisce alcuna informazione utile. Se una risposta è obsoleta, votala in modo negativo e / o commentala indicandola.

— TylerH

2

perché non collegare anche un tale polyfill, in modo da poterlo utilizzare senza ulteriori ricerche su Google?

— MightyPork

4

eh, la prima parte può essere meta, ma penso che la seconda sia una buona risposta. Dove lavoro non usiamo un preprocessore e / o polyfill, quindi la risposta accettata funziona per me. Ma per qualsiasi negozio o sviluppatore che utilizza tali strumenti, questa risposta è probabilmente più utile.

— jinglesthula

1

Per quel che vale, secondo le statistiche del browser, IE 8.0 è sceso a meno dell'1% negli Stati Uniti nell'ultimo anno.

http://gs.statcounter.com/browser-version-partially-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

A dicembre 2015 IE 8.0 aveva il 2,92% del mercato. A dicembre 2016 IE 8.0 aveva lo 0,77% del mercato.

A quel ritmo di declino non sarebbe la peggiore idea smettere di supportare le vecchie versioni di IE e iniziare a usare :: per Pseudo Elements.

— DR01D
fonte

Che è qualcosa da festeggiare :) Vale anche la pena sottolineare che dipende ancora dalla situazione. Se sei Amazon, lo 0,5% dei tuoi utenti equivale a oltre un milione di clienti che pensano che il tuo sito non funzioni. Se stai facendo un blog per una startup di 10 persone, la posta in gioco potrebbe essere diversa.

— jinglesthula

Sicuramente vero per un'organizzazione come Amazon. Ma quello 0,77% non è distribuito uniformemente su tutta la popolazione. Sono persone sproporzionatamente anziane o con pochi soldi che non possono aggiornare. Da un punto di vista puramente commerciale, questi probabilmente non sono i mercati di destinazione ideali. Quindi per la maggior parte delle aziende il gruppo dello 0,77% è ancora meno significativo di quello che suggerisce quel piccolo numero. E quel numero diventerà solo più piccolo.

— DR01D

Punti buoni. Un altro gruppo in cui l'aggiornamento è una battaglia in salita è il governo e i gruppi aziendali fanno molto affidamento su app che funzioneranno solo con una determinata versione del browser (anche se per fortuna i gruppi in questo modo diminuiranno nel tempo). Che nessuno di voi debba mai programmare per un cliente del genere :)

— jinglesthula

0

Includere entrambe le notazioni è sicuramente più sicuro, ma non riesco a vedere nessun browser che lascia cadere la singola notazione per molto tempo, quindi solo una singola andrà bene (è CSS2 valido).

Personalmente uso solo la notazione dei due punti, principalmente per abitudine.

— mddw
fonte

1

Come le altre risposte chiariscono, è un po 'più complicato di così e ci sono alcune trappole non ovvie (ad esempio supportare la notazione con due punti singoli per gli pseudo-elementi CSS 3 è un'esplicita violazione delle specifiche, quindi sembra saggio per gli autori CSS di no per utilizzare la notazione a due punti per quei selettori).

— Mark Amery