Dziedziczenie CSS to praktyczna i przydatna cecha Kaskadowych arkuszy stylów, dzięki której można zaoszczędzić bardzo dużo pracy. Na przykład, jeśli chcemy, aby na całej stronie był używany krój pisma Arial, to nie musimy go definiować dla każdego elementu z osobna. Wystarczy, że zdefiniujemy go dla elementu body, a zostanie on przyjęty (odziedziczony) przez wszystkie pozostałe elementy na stronie.
Dziedziczenie jest jednym z dwóch mechanizmów przypisywania wartości domyślnych (ang. defaulting) własnościom CSS. Kiedy algorytm kaskady CSS nie wyłoni wartości dla którejś z własności CSS elementu, przeglądarka określa ją albo przez dziedziczenie (ang. inheritance) albo przez nadanie wartości początkowej (ang. initial value).
W takim przypadku przeglądarka najpierw sprawdza, czy dana własność jest w ogóle dziedziczona i jeśli tak, przypisuje jej wartość pobraną z najbliższego elementu nadrzędnego, dla którego jest ona zdefiniowana. Jeśli nie, przypisuje jej wartość początkową.
Wszystkie własności CSS można podzielić na dwie grupy: własności dziedziczone i własności niedziedziczone:
- Własności dziedziczone (ang. inherited property):
- Własności, które domyślnie są przekazywane z elementu nadrzędnego na potomny, jeśli nie zostaną zdefiniowane bezpośrednio dla tego elementu potomnego.
- Własności niedziedziczone (ang. non-inherited property):
- Własności, które domyślnie nie są przekazywane z elementu nadrzędnego na potomny, tylko przyjmują wartość początkową (ang. initial value), jeśli nie zostaną zdefiniowane bezpośrednio.
Własności dziedziczone
Dziedziczeniu podlegają tylko niektóre własności CSS. Ogólnie rzecz biorąc dziedziczone nie są przede wszystkim własności dotyczące pozycjonowania elementów, obramowania i tła. Najlepszym sposobem na dowiedzenie się, czy dana własność jest dziedziczona, jest sięgnięcie po jej dokumentację.
Jeśli własność jest dziedziczona, to cecha ta działa na „każdą odległość”, tzn. nie dotyczy tylko relacji rodzic-dziecko, czyli elementów znajdujących się bezpośrednio w innych elementach, ale także bliższych i dalszych przodków i potomków. Na przykład:
p {color: green}
...
<p>To jest akapit <span>zawierający</span> jakiś ważny tekst.</p>W tym przypadku cała zawartość akapitu będzie zielona, ponieważ element span odziedziczy ustawienie własności color po rodzicu:
To samo stanie się w poniższym przypadku:
article {color: green}
...
<article><div><p>To jest akapit <span>zawierający</span> jakiś ważny tekst.</p></div></article>Efekt tego kodu w tym przypadku będzie identyczny z powyższym, ponieważ wszystkie elementy znajdujące się w elemencie article odziedziczą po nim własność color.
Natomiast tutaj sytuacja się zmieni:
article {color: green}
span {color: red}
...
<article><div><p>To jest akapit <span>zawierający</span> jakiś ważny tekst.</p></div></article>Ten kod przeglądarka wyrenderuje w następujący sposób:
Dla elementu span bezpośrednio zdefiniowaliśmy własność color, więc dziedziczenie w jego przypadku zostało wyłączone i została zastosowana bezpośrednio zdefiniowana wartość. Pozostałe elementy, div i p, nadal dziedziczą ustawienie po przodku i dlatego ich tekst jest nadal zielony.
Kiedy dziedziczenie nie działa
Należy pamiętać, że dziedziczenie to jeden z mechanizmów przypisywania wartości domyślnych własnościom CSS, a więc stosowany tylko wtedy, gdy nie uda się znaleźć odpowiedniego ustawienia wartości w ramach kaskady.
W powyższych przykładach akapity przyjmowały zielony kolor tekstu, ponieważ przeglądarka nie znalazła bezpośredniej definicji własności color dla akapitów w żadnym arkuszu stylów (przeglądarki, użytkownika ani autora).
Teraz spójrz na poniższy przykład:
body {font-size: 10px}
…
<h1>Nagłówek</h2>
<p>Akapit</p>W tym przypadku rozmiar pisma akapitu będzie wynosił 10 pikseli, natomiast rozmiar pisma nagłówka będzie inny – we wszystkich najważniejszych przeglądarkach wyniesie on 20 pikseli, ponieważ własność font-size elementu h1 jest w nich ustawiony na 2em.
Natomiast kolor tekstu elementu h1 w tym przykładzie będzie czerwony, ponieważ nigdzie nie ma bezpośredniej definicji tej własności dla tego elementu (oczywiście w tym uproszczonym przykładzie, w którym zakładamy, że nie ma żadnych innych arkuszy stylów użytkownika ani autora). W związku z tym jej wartość zostanie odziedziczona po najbliższym elemencie nadrzędnym.
Własności niedziedziczone
Własności niedziedziczone to takie, których ustawienia nie są przekazywane przez elementy nadrzędne na potomne. Do tej grupy zaliczają się między innymi własności obramowania, np.:
p {border: 2px solid red}
...
<p>To jest akapit <span>zawierający</span> jakiś ważny tekst.</p>Efekt zastosowania tego kodu jest następujący:
Element p ma obramowanie, natomiast znajdujący się w nim element span go nie ma.
Jeśli jednak chcemy, aby dana własność niedziedziczona została odziedziczona przez wybrany element, możemy użyć globalnego słowa kluczowego inherit.
Słowo kluczowe inherit
Globalne słowo kluczowe inherit wymusza odziedziczenie ustawienia wybranej własności z elementu rodzica nawet, jeśli standardowo jest to własność niedziedziczona. Spójrz na poniższy przykładowy kod:
p {border: 2px solid red; padding: 10px}
span {border: inherit}Dopełnienie zostało dodane tylko po to, aby uwidocznić obramowanie elementu span z wszystkich stron. Teraz nasz akapit wygląda tak:
Zastosowanie słowa kluczowego inherit jako wartości własności border elementu span spowodowało, że odziedziczył on ustawienie tej własności po rodzicu – w odróżnieniu od „normalnego” dziedziczenia, słowo kluczowe inherit ma zasięg tylko do rodzica.
Oprócz tego, w CSS istnieje jeszcze kilka innych globalnych słów kluczowych umożliwiających sterowanie nadawaniem wartości domyślnych własnościom CSS: initial, unset oraz revert i revert-layer.
Słowo kluczowe initial
Globalne słowo kluczowe initial powoduje nadanie własności jej wartości początkowej, np.:
p {color: green}
span {color: initial}
...
<p>To jest akapit <span>zawierający</span> jakiś ważny tekst.</p>W tym przypadku zawartość elementu span będzie miała kolor czarny, bo takie jest domyślne początkowe ustawienie koloru tekstu dla tego elementu. Pozostały tekst będzie zielony, jak widać na poniższym zrzucie ekranu.
Słowo kluczowe unset
Globalne słowo kluczowe unset przywraca ustawienie własności do jej wartości dziedziczonej (jeśli jest to własność dziedziczona) lub do wartości początkowej w pozostałych przypadkach, np.:
p {color: green}
span {color: red}
span {color: unset}
...
<p>To jest akapit <span>zawierający</span> jakiś ważny tekst.</p>Kolor tekstu elementu span będzie zielony, ponieważ druga dotycząca go reguła przywraca ustawienie jego własności color do wartości dziedziczonej (tu po elemencie p).
Słowa kluczowe revert i rever-layer
Globalne słowo kluczowe revert przywraca ustawienie własności do takiej wartości, jaką by ona miała, gdyby nie zmieniono jej w żaden sposób w obecnym miejscu. W praktyce oznacza to, że revert cofa ustawienie własności do wartości odziedziczonej, jeśli taka istnieje, lub do domyślnej wartości z arkusza stylów przeglądarki w przeciwnym przypadku, np.:
strong {color: green; font-weight: normal}
strong {color: revert; font-weight: revert}
...
<p>To jest akapit zawierający <strong>jakiś ważny tekst</strong>.</p>Tekst elementu strong będzie pogrubiony i czarny, ponieważ takie są jego domyślne ustawienia w przeglądarce (przynajmniej w większości z nich).
Natomiast w poniższej sytuacji kolor tekstu elementu strong byłby czerwony, ponieważ takie ustawienie ten element odziedziczył po elemencie p.
p {color: red}
strong {color: green; font-weight: normal}
strong {color: revert; font-weight: revert}
...
<p>To jest akapit zawierający <strong>jakiś ważny tekst</strong>.</p>Wartość revert-layer ma podobne działanie, jak wartość revert, tylko dotyczy warstw CSS.