Percorso di navigazione nel sito per arrivare a questa pagina:

home » tutorials » fogli di stile » Dichiarare color e background-color: un esempio con i titoli

Dichiarare color e background-color: un esempio con i titoli

In un recente articolo abbiamo segnalato che da qualche mese il programma di validazione dei fogli di stile del W3C ci propone un avviso (warning) ogni volta che definiamo la proprietà color senza attribuire esplicitamente un valore anche a background-color, e viceversa. Per capire meglio questo avviso, analizziamo insieme un esempio.

Immaginiamo di voler creare una pagina con le seguenti caratteristiche:

  • colore dello sfondo bianco e testo nero
  • titoli di primo e di secondo livello bordeaux
  • box con sfondo bordeaux scuro e testo bianco

Nel css impostiamo velocemente le tre regole:

body {
  background-color: #ffffff;
  color: #000000;
  }

h1, h2 {
  color: #cc0000;
  }

#box {
  padding: 1em;
  background-color: #990000;
  color: #ffffff;
  }

Utilizzando il validatore, ci verrebbe segnalato che non abbiamo definito il colore di sfondo per <h1> e <h2>. Ma siamo di fretta, e il validatore non è al momento nelle nostre priorità.

Questo invece è il corpo della nostra pagina:

<body>

<h1>Titolo di primo livello</h1>
<p> ... testo ... </p>

<h2>Titolo di secondo livello</h2>
<p> ... testo ... </p>

<div id="box">
  <p> ... testo ... </p>
  <p> ... testo ... </p>
  <p> ... testo ... </p>
</div>

</body>

Nella prima pagina che otteniamo sembra funzionare tutto bene, e così continuiamo con il nostro lavoro.

I problemi vengono fuori quando, dimenticandoci delle impostazioni del foglio di stile, mettiamo un titolo dentro al box:

<body>

<h1>Titolo di primo livello</h1>
<p> ... testo ... </p>

<h2>Titolo di secondo livello</h2>
<p> ... testo ... </p>

<div id="box">
  <h2>Titolo di secondo livello</h2>
  <p> ... testo ... </p>
  <p> ... testo ... </p>
  <p> ... testo ... </p>
</div>

</body>

Come mostrato in questa seconda pagina, il selettore <h2>, per il quale non abbiamo dichiarato nessun background-color, eredita lo sfondo dal suo progenitore: nel primo caso dal body (e fin qui tutto bene) ma nel secondo caso dal #box: il contrasto tra i due colori è improponibile, al limite dell'illeggibilità.

Soluzioni? Se avessimo dichiarato fin dall'inizio il colore di sfondo dei titoli, come consigliato dall'avviso del validatore, avremmo quasi sicuramente utilizzato lo sfondo standard della nostra pagina:

h1, h2 {
  background-color: #ffffff;
  color: #cc0000;
  }

Nel box avremmo ottenuto un risultato grafico discutibile, ma sicuramente leggibile, come in questa terza pagina. Perciò, anche se in questo caso la resa non è delle migliori, il validatore ci avrebbe aiutato a preservare la leggibilità del testo a fronte di eventuali sviste, come quella che ci è appena scappata.

Per ottenere un risultato grafico di nostro gradimento una possibile soluzione consiste nel creare una regola ad hoc per i titoli contenuti dentro il box:

#box h1, #box h2 {
  background-color: [il colore che sceglieremo];
  color: [il colore che sceglieremo];
  }

Per il colore dello sfondo scegliamo di usare lo stesso background-color del box; cercando il colore per il testo, scopriamo con nostro grande disappunto che molti colori non offrono un contrasto sufficiente rispetto al colore dello sfondo. Alla fine optiamo per il bianco, ingentilito da un sottile profilo colorato, del tutto ininfluente ai fini della leggibilità dei contenuti (v. quarta pagina). Il css definitivo sarà dunque il seguente:

body {
  background-color: #ffffff;
  color: #000000;
  }

h1, h2 {
  background-color: #ffffff;
  color: #cc0000;
  }

#box {
  padding: 1em;
  background-color: #990000;
  color: #ffffff;
  }

#box h1, #box h2 {
  background-color: #990000;
  color: #ffffff;
  border-bottom: solid 0.1em #cc0000;
  }

Un po' più articolato rispetto a quello iniziale, ma in grado di assicurarci pagine cromaticamente accessibili, gradevoli e senza sorprese sui colori.

7 gennaio 2006