Sintassi avanzata di CSS

Raggruppamento dei selettori

Puoi raggruppare i selettori, in modo che i selettori raggruppati possano condividere dichiarazioni comuni. Usa la virgola per separare i selettori da raggruppare. Nel seguente esempio, abbiamo raggruppato tutti gli elementi di titolo. Tutti gli elementi di titolo sono verdi.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Ereditarietà e problemi

Secondo CSS, i figli ereditano le proprietà dal padre. Ma non sempre funziona così. Guarda questa regola:

body {
     font-family: Verdana, sans-serif;
     }

Secondo questa regola, l'elemento body del sito utilizzerà il carattere Verdana (se il sistema dell'utente contiene questa tipografia).

Attraverso l'ereditarietà CSS, i figli dell'elemento superiore (in questo esempio, l'elemento body) erediteranno le proprietà possedute (tali elementi come p, td, ul, ol, ul, li, dl, dt e dd). Non è necessario un'altra regola, tutti i figli dell'elemento body dovrebbero visualizzare il carattere Verdana, così come i figli dei figli. E in gran parte dei browser moderni, è così.

Ma in quei giorni di battaglia feroci tra i browser, questo non è necessariamente il caso. All'epoca, il supporto agli standard non era una scelta prioritaria per le aziende. Ad esempio, Netscape 4 non supporta l'ereditarietà, ignora non solo l'ereditarietà, ma anche le regole applicate all'elemento body. Fino a IE6 su Windows, esistevano problemi correlati, lo stile del carattere all'interno delle tabelle veniva ignorato. Come possiamo fare di meglio?

Sii gentile con Netscape 4

Fortunatamente, puoi gestire il problema che i browser obsoleti non possono comprendere l'ereditarietà utilizzando il principio di ridondanza che chiamiamo "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

I browser 4.0 non comprendono l'ereditarietà, ma possono comprendere i selettori di gruppo. Questo approccio, sebbene possa consumare alcune larghezze di banda degli utenti, è necessario per supportare gli utenti Netscape 4.

Ereditare è una maledizione?

Se non desideri che il font "Verdana, sans-serif" venga ereditato da tutti i sottoelementi, cosa puoi fare? Ad esempio, desideri che il font del paragrafo sia Times. Nessun problema. Crea una regola speciale per p, in modo che si liberi dalle regole del genitore:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }