css - usa il selettore '*' universale vs. html o il selettore body?

L'applicazione di stili al tag body verrà applicata all'intera pagina, quindi

body { font-family: Verdana }

verrà applicato a tutta la pagina. Questo potrebbe anche essere fatto con

* {font-family: Verdana} 

che si applicherebbe a tutti gli elementi e quindi sembrerebbe avere lo stesso effetto.

Comprendo il principio che in primo luogo lo stile viene applicato a un tag, body per l'intera pagina, mentre nel secondo esempio il font viene applicato a ogni singolo elemento html. Quello che sto chiedendo è qual è la differenza pratica nel farlo, quali sono le implicazioni e qual è una ragione, una situazione o una migliore pratica che porta all'utilizzo l'uno sull'altro.

Un effetto collaterale è sicuramente la velocità (+1 Rob). Sono molto interessato al motivo reale per scegliere l'uno rispetto all'altro in termini di funzionalità.

Differenze funzionali tra queste due scelte del selettore CSS ... (la mia opinione)

corpo

• Applica le proprietà di stile all'elemento body.
• Gli elementi all'interno del corpo possono ereditare i valori delle proprietà. Alcune proprietà sono predefinite su "eredita".
• Le dichiarazioni di stile che corrispondono a un elemento all'interno del corpo possono sovrascrivere lo stile ereditato.

Il selettore universale * (tutti gli elementi)

• Applica le proprietà di stile a tutti i singoli elementi.
• Sostituisce le proprietà di stile ereditate e i "valori iniziali" predefiniti. Blocca l'ereditarietà.
• Altri selettori CSS più specifici che corrispondono a un elemento sostituiranno le proprietà di stile applicate da *.

suggerimenti

1. Usa body per le proprietà di stile che ereditano per impostazione predefinita, come font, color, al fine di fornire un valore predefinito ragionevole per gli elementi, riducendo la necessità di codificare esplicitamente per ogni caso e preservando la possibilità per gli elementi contenuti ai livelli inferiori sotto il corpo di ereditare dai loro genitori.
2. Probabilmente è meglio non usare Universal Selector * in questo caso. Interrompe l'eredità tra altri elementi all'interno del corpo e può costringerti a scrivere più regole CSS per compensare. Può essere un fattore che rallenta il rendering delle pagine. Ciò dipende dalle dimensioni e dal contenuto della pagina e dal numero di regole CSS disponibili.

Prova qualcosa del genere

body { font-family: Verdana }
table { font-family: Arial }

contro

* { font-family: Verdana }
table { font-family: Arial }

E guarda quali stili vengono applicati alle celle della tabella.

C'è una differenza tra "applicato a tutto il documento" e "applicato a ogni elemento del documento" quando si ha a che fare con fogli di stile a cascata .

L'applicazione di uno stile a cascata al corpo lo applica a tutti i tag all'interno del corpo fino a quando un tag lo sovrascrive. Quindi lo stile sovrascritto viene applicato a tutti i tag all'interno di quello.

Tuttavia, ci sono alcuni stili che non si sovrappongono, come il margine e il padding (di solito dove non ha senso). Questi possono essere applicati solo a tag specifici ed è qui che un jolly può tornare utile (anche se raramente).

La maggior parte degli stili non a cascata ha anche un valore di ereditarietà (ad es. margin: inherit), Che significa "accetta i valori del tag principale".

Ho dimenticato i dettagli completi ma, con il selettore *, le prestazioni sono rallentate poiché ogni elemento viene valutato mentre il browser analizza il CSS e applica lo stile. iirc, impostando il carattere, in questo caso, su solo il genitore fa un riferimento per ogni elemento e non è necessario un lavoro aggiuntivo.

Ci sono anche altri problemi, ma, ancora una volta, non li ricordo tutti e non li uso da anni.

La linea guida generale per un buon design CSS è quella di essere il più specifici possibile, ma non di più.

Quindi, nel tuo esempio, applicare lo stile all'elemento body sarebbe il più specifico possibile e sicuramente più specifico del selettore '*'.

Come altri hanno già detto, body { font-family: Verdana }selezionerà il carattere Verdena solo su quegli elementi che ereditano la font-styleproprietà dai suoi genitori in modo tale che anche tutti i suoi genitori ereditino la proprietà alla fine formano l' bodyelemento, e, * {font-family: Verdana}selezioneranno il carattere Verdena su tutti gli elementi. Vorrei illustrare la differenza con un esempio:

Utilizzando il selettore del corpo:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Utilizzando selelctor universale *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Usa i codici css e html degli esempi che riconoscerai che l' <input>elemento non eredita affatto lo stile del carattere e quindi qualunque cosa digiti nel modulo ottiene lo stile del carattere predefinito del foglio di stile dell'agente utente. Nel secondo esempio il selettore universale *imposta esplicitamente lo stile del carattere per ogni elemento incluso l' inputelemento.