Ben's Hobbyhoekje -- Over initial, inherit, unset en revert

Over initial, inherit, unset en revert

HTML-elementen kunnen worden genest, dat wil zeggen: Binnen een element kun je elementen maken, die ok weer elementen bevatten, enzovoort. De eigenschappen van die elementen (Lees: de opmaak) kunnen worden overgenomen van het bovenliggende element (de parent), maar dat gebeurt niet altijd. Dit kan betekenen dat je van elk element apart moet controleren of het correcte is opgemaakt Dat is niet altijd handig.
Met CSS kun je het overnemen van eigenschappen ('overerving') vergaand beïnvloeden. Daarover gaat dit verhaal.

In CSS bestaat een aantal waarden die je aan (vrijwel) elke eigenschap kunt toekennen: initial, inherit, unset en revert. Er zijn er meer, zoals none en 0 (nul), maar die zijn voor dit verhaal niet van belang.

Hieronder een samenvatting van de functionaliteit:

Eigenschap		Beschrijving
initial		Hiermee stel de defaultwaarde van de browser in voor een bepaalde eigenschap. Bijvoorbeeld: Een paar van de browser-defaults van een <p>-element zijn: `display:inline` en `text-align:left`.
inherit		Hiermee geef je aan dat een eigenschap van een element moet worden overgenomen van het parent-element. Het volgende voorbeeld illustreert hoe het werkt. De CSS is: `span { color: blue; } .extra span { color: inherit; }` De HTML is: `<div> Dit is <span>een span element</span>. Dat is blauw, zoals is ingesteld. </div> <div class="extra" style="color:green"> Dit is <span>een span element</span>. Dat is groen, want dat is geërfd van de parent. Daar is groen ingesteld in de inline-style.</div> <div style="color:red"> Dit is <span>een span element</span>. Dat is blauw, zoals is ingesteld. De tekst is echter rood, door de inline- style. </div>` Dit geeft als resultaat Dit is een span element. Dat is blauw, zoals is ingesteld. Dit is een span element. Dat is groen, want dat is geërfd van de parent. Daar is groen ingesteld in de inline-style. Dit is een span element. Dat is blauw, zoals is ingesteld. De tekst is echter rood, door de inline-style. inherit wordt door alle grote browsers ondersteund.
unset		unset gedraagt zich als initial of als inherit. Als het parent element een overeenkomende eigenschap heeft, unset gelijk aan inherit, anders is unset gelijk aan initial. Een voorbeeld: De CSS is: `div { color: blue; } div p { color: inherit; } h2 { color: unset; }` De HTML is: <div> <h2>Dit is een kop</h2> <p>Dit is een tekst-paragraaf.</p> </div> Dit geeft als resultaat: Dit is een kop Dit is een tekst-paragraaf. De kleur van de kop is niet opgegeven voor <h2> binnen een <div>-tag. unset gedraagt zich als initial en zet de kleur op zwart, de default-kleur van de browser. De kleur van <p> binnen een <div>-tag is opgegeven als blauw. unset gedraagt zich als inherit en zet de kleur op blauw.
revert		Dit stelt een eigenschappen van een element in op de default van de browser, alsof er in het geheel geen style-sheet aanwezig is op de webpagina. Het doel van deze instelling is mij niet duidelijk. Voorbeeld: `display:revert` op een <div> resulteert in `display:block`. Dit in tegenstelling tot de waarde initial, welke zou opleveren: `display:inline`.

Tenslotte nog een wat uitgebreider voorbeeld.

De CSS is:

.wrapper { color: green; }

.wrapper p { color: purple; }

p.een { color: inherit; }

p.twee { color: initial; }

p.drie { color: unset; }

De HTML is:

<div class="wrapper">

  <p class="een">Huisje<p>

  <p class="twee">Boompje<p>

  <p class="drie">Beestje</p>

  <p>Autootje</p>

<div>

Dit leidt tot het volgende:
• Huisje is groen. De kleur is geërfd van de wrapper-<div>.
• Boompje is zwart. De kleur is de default-waarde van de browser.
• Beestje is groen. Er is een overeenkomende eigenschap bij het parent-element, nl. de kleur; de tekst wordt dus groen.
• Autootje is paars. De kleur wordt bepaald door .wrapper p.