Ereditarietà: quali proprietà si propagano e quali no

L’ereditarietà è il terzo meccanismo fondamentale del CSS (insieme a cascata e specificità). Riguarda il modo in cui il browser decide cosa fare quando un elemento HTML non ha regole esplicite assegnate per una certa proprietà.

Cos’è l’ereditarietà?

L’ereditarietà è il processo per cui i tag “figli” all’interno del documento HTML ricevono automaticamente alcune proprietà di stile applicate ai loro “genitori”.

Guarda questo esempio HTML:

<div class="card">
  <h2>Titolo della card</h2>
  <p>Questo è un testo e questo è un <a href="#">link</a>.</p>
</div>

E il CSS:

.card {
  color: #333333;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  padding: 20px;
}

In questo codice, abbiamo assegnato il font e il colore al div.card. Ma cosa succede all’<h2> e al <p> all’interno? Il testo sarà formattato con Arial e grigio scuro. Hanno ereditato la tipografia dal padre.

Proprietà che EREDITANO

In linea di massima, tutte le proprietà relative alla tipografia e al testo vengono ereditate dai figli di default. Questo ha senso: se imposti un font generale sul tag <body>, vuoi che tutto il testo del sito usi quel font, senza doverlo dichiarare su ogni singolo paragrafo o titolo.

Proprietà ereditate comuni:

• color
• font-family, font-size, font-weight, font-style
• line-height, letter-spacing, text-align
• list-style

Attenzione: i link (<a>) hanno un colore e una sottolineatura predefiniti impostati dal browser. Poiché le regole del browser sono regole dirette (non ereditate), queste battono l’ereditarietà. Se vuoi che i link ereditino il colore del testo, dovrai dichiararlo esplicitamente con color: inherit;.

Proprietà che NON EREDITANO

Quasi tutte le proprietà relative al layout, ai bordi e alle dimensioni (il cosiddetto Box Model) non vengono ereditate.

Riguarda l’esempio della .card precedente. Al padre è stato assegnato un bordo (border: 1px solid #ccc) e un padding interno (padding: 20px). Il titolo <h2> e il <p> all’interno non avranno un proprio bordo, né avranno 20px di padding extra.

Se i bordi venissero ereditati, ogni singola parola o paragrafo dentro la card avrebbe il suo bordo quadrato intorno!

Proprietà non ereditate comuni:

• width, height
• margin, padding
• border
• background (sfondi)
• position, display

Forzare l’ereditarietà con inherit

Qualsiasi proprietà in CSS, anche quelle che di default non lo fanno, può essere forzata ad ereditare il valore dal genitore usando la parola chiave inherit.

.genitore {
  border: 2px solid red;
}

.figlio {
  /* Di default il figlio non avrebbe bordo, ma noi lo forziamo! */
  border: inherit; 
}

Comprendere la separazione tra proprietà tipografiche (ereditate) e proprietà di layout (non ereditate) ti permette di dichiarare gli stili nel posto giusto ed evitare ripetizioni.