il selettore di stelle in CSS influisce sulle prestazioni del rendering della pagina?(perché) il selettore di stelle CSS è considerato dannoso?
ci sono dei caveat che lo utilizzano?
* {
margin:0;
padding:0;
}
Quando si tratta di prestazioni, Steve Souders è l'uomo:
Shameless citazione da uno dei rapporti:
Il la chiave per ottimizzare i selettori CSS è per mettere a fuoco il selettore più a destra , chiamato anche il selettore di chiave (coincidenza?). Ecco un altro molto costoso selettore : A.class0007 * {}. Sebbene questo selettore possa sembrare più semplice, , è più costoso per il browser corrispondere. Perché il browser si sposta da destra a sinistra, inizia con controllando tutti gli elementi che corrispondono a il selettore di chiave, "*".Ciò significa che il browser deve cercare di abbinare questo selettore a tutti gli elementi nella pagina .
[grassetto corsivo mio]
Cito anche "È chiaro che i selettori CSS con un selettore di chiave che corrisponde a molti elementi possono rallentare notevolmente le pagine web." lettura interessante, grazie. – gpilotino
Mi piace questa citazione meglio "Sulla base di questi test ho la seguente ipotesi: per la maggior parte dei siti Web, i possibili guadagni in termini di prestazioni dall'ottimizzazione dei selettori CSS saranno piccoli e non valgono i costi". – arkanciscan
@arkanciscan questo è idd molto vero. L'ottimizzazione dei selettori CSS è probabilmente uno dei migliori casi di ottimizzazione prematura. – anddoutoi
Dal momento che sto usando la stessa identica regola in tutti i miei progetti e nessuno avere gravi problemi di perfomance, direi: No, non è per quanto ne so.
Un punto di vista è che non è tanto il * è un problema di prestazioni, è quel buon vecchio preferito - c'è un problema di IE con esso. Colpisce IE 5, 5.5 e 6 e varianti di Macintosh. In sostanza, c'è una cosa chiamata il selettore di bug stella HTML che si applica come segue:
* html
Questo deve essere interpretato come elemento non può competere a causa HTML è radice e non può essere un elemento figlio. IE lo interpreta come html.
* * body
Anche in questo caso, dovrebbe corrispondere a nessun elemento perché il corpo non può essere un elemento nipotino - anche se si tratta di un elemento secondario di HTML. IE lo interpreta come * corpo.
* html body
Questo deve corrispondere nessun elemento, ma IE interpreta questo come corpo HTML.
Il lato prestazioni viene in genere considerato che l'applicazione * indica solo che lo stile si applica a ogni elemento di una pagina. Raramente ho scoperto che si tratta di un problema a sé stante - il punto in cui sarebbe diventato un problema significa che probabilmente avete ottenuto troppo margine di profitto in ogni caso. Allo stesso modo, poiché si applica a tutto, significa che è necessario aumentare il codice per far fronte a elementi che non dovrebbero avere quello stile. Come per tutto il resto, sta a te decidere quali dovrebbero essere i compromessi e l'equilibrio.
Non lo chiamerei bug ma errore sviluppatore in questo caso – Jonathan
Per alcune proprietà che utilizzano * può produrre risultati imprevisti.
* { color: blue }
li { color: red }
Ora dato <li><i>text</i></li>, il testo sarà blu!
Sì, ma potresti non * pensare a *, quando imposti le proprietà per '*'. Questo è il più vero con '*' e gli elementi o gli elementi dell'interfaccia che usi raramente. – Boldewyn
@ ApoY2K: solo perché funziona come dovrebbe, non significa che sia previsto. Quando hai un selettore * è facile dimenticarlo. E quando ricordi, devi pensarci su ** ogni volta che aggiungi un nuovo elemento ** per verificare che non stai applicando stili che non vuoi. – DisgruntledGoat
@ ApoY2k: certo, se sei perfetto e non commetti errori, non scrivi mai codice che funzioni diversamente da come ti aspetti. Altrimenti, è ragionevole pensare che il colore sia ereditato dal genitore, e questo è il modo in cui questo testo è diverso dal rosso è inaspettato. –
In quale contesto hai sentito che è "dannoso"? Se utilizzato in determinati modi, può comportarsi in modo diverso a seconda del browser (ad esempio, si consideri '* html {} '). – Blixt
lo sto chiedendo anche perché vedo "standard de facto" che i metodi di reimpostazione del css evitano di usarlo. – gpilotino