Punto di controllo in questa sezione: 11.2 Evitare gli attributi disapprovati dal W3C . [Priorità 2].

Per essere sicuri che gli operatori possano controllare gli stili, i CSS2 hanno cambiato la semantica dell’operatore !important, definito nei CSS1.

Nei CSS2, se un operatore in uso contiene !important, questo ha la priorità assoluta sopra qualsiasi altra regola di stile dell’autore.

Questa è una caratteristica importante per quando è necessario che certe combinazioni di colore o di contrasto siano fisse, o certi tipi di font siano grandi, ecc.

Per esempio, il selettore seguente specifica una misura di font grande per il testo di paragrafo e annullerebbe ogni altro selettore simile:

Esempio:

p { font-size: 24pt ! important }

Il CSS2 “eredita” il valore !important per tutte le proprietà degli stili che governano parte o tutto il documento. Per esempio, lo stile seguente forza tutti gli sfondi in bianco e tutto il testo in nero:

Esempio:

/* Configura il colore del testo in nero
ed il colore di sfondo del documento in bianco */

body {
color: black ! important ;
background: white ! important
}

/* Fa in modo che i valori di “color” e “background”
debbano essere ereditati da tutti gli altri elementi,
rafforzandoli con “!important”.
Notare che questo può essere annullato da un altro
più specifico operatore di stile. */

* {
color: inherit ! important ;
background: inherit ! important
}

I CSS2 includono anche queste caratteristiche di controllo:

  • Colori (color, background-color, border-color, outline-color) e caratteri (font): l’utente può applicare le sue preferenze al colore e ai font del documento Web .
  • I contorni dinamici (la proprietà outline) permette gli utenti (ad esempio gli ipovedenti) di creare dei profili attorno al contento che non cambiano il layout ma che forniscono informazioni importanti.

Per esempio, per disegnare uno spessa linea nera attorno ad un elemento quando su di esso c’è il focus, ed una spessa linea rossa quando è attivo, si possonousare queste righe:

Esempio:

:focus { outline: thick solid black }
:active { outline: thick solid red }