Dziedziczenie

Podcast o CSS – 005: dziedziczenie

Załóżmy, że masz napisany kod CSS, który sprawi, że elementy będą wyglądać jak przyciski.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

Następnie dodajesz do artykułu z treścią element link z wartością class równą .my-button. Pojawił się jednak problem. Tekst ma inny kolor niż oczekiwany. Jak to się stało?

Niektóre właściwości CSS dziedziczą, jeśli nie określisz wartości. W przypadku tego przycisku odziedziczył on parametr color z tego arkusza CSS:

article a {
  color: maroon;
}

Z tej lekcji dowiesz się, dlaczego tak się dzieje i jak dziedziczenie jest potężną funkcją, która pomaga Ci pisać mniej kodu CSS.

Przepływ dziedziczenia

Przyjrzyjmy się, jak działa dziedziczenie, korzystając z tego fragmentu kodu HTML:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

Element główny (<html>) nie będzie dziedziczyć niczego, ponieważ jest pierwszym elementem w dokumencie. Dodając trochę kodu CSS do elementu HTML, zaczyna pływać kaskadą w dół dokumentu.

html {
  color: lightslategray;
}

Właściwość color jest domyślnie dziedziczona przez inne elementy. Element html zawiera wartość color: lightslategray, dlatego wszystkie elementy, które mogą dziedziczyć kolor, będą miały teraz kolor lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Tylko <p> będzie zawierać kursywę, ponieważ jest to najgłębszy zagnieżdżony element. Dziedziczenie przechodzi tylko w dół, a nie z powrotem na elementy nadrzędne.

Które właściwości są domyślnie dziedziczone?

Nie wszystkie właściwości CSS są domyślnie dziedziczone, ale wiele z nich jest dziedziczonych. Oto cała lista właściwości dziedziczonych domyślnie, pobrana z odwołania W3 do wszystkich właściwości CSS:

Jak działa dziedziczenie

Każdy element HTML ma domyślnie zdefiniowaną domyślnie właściwość CSS z wartością początkową. Wartość początkowa to właściwość, która nie jest dziedziczona i wyświetlana jako domyślna, jeśli kaskada nie obliczy wartości tego elementu.

Właściwości, które mogą być dziedziczone, przesuwają się w dół, a elementy podrzędne otrzymują obliczoną wartość reprezentującą wartość elementu nadrzędnego. Oznacza to, że jeśli element nadrzędny ma font-weight z wartością bold, wszystkie elementy podrzędne będą pogrubione, chyba że ich element font-weight ma inną wartość lub arkusz stylów klienta użytkownika zawiera dla tego elementu wartość font-weight.

Jak jawnie dziedziczeć i kontrolować dziedziczenie

Dziedziczenie może wpływać na elementy w nieoczekiwany sposób. CSS ma narzędzia, które mogą w tym pomóc.

Słowo kluczowe inherit

Za pomocą słowa kluczowego inherit możesz skonfigurować dowolną usługę, która będzie dziedziczyła obliczoną wartość jej elementu nadrzędnego. Przydatnym sposobem korzystania z tego słowa kluczowego jest utworzenie wyjątków.

strong {
  font-weight: 900;
}

Ten fragment kodu CSS ustawia we wszystkich elementach <strong> wartość font-weight o wartości 900 zamiast domyślnej wartości bold, która jest odpowiednikiem elementu font-weight: 700.

.my-component {
  font-weight: 500;
}

Klasa .my-component ustawia font-weight na 500. Aby elementy <strong> w elemencie .my-component zawierały też elementy font-weight: 500, dodaj:

.my-component strong {
  font-weight: inherit;
}

Teraz elementy <strong> w elemencie .my-component będą miały wartość font-weight równą 500.

Możesz ustawić tę wartość, ale jeśli w przyszłości użyjesz właściwości inherit i usługi porównywania cen .my-component, możesz zagwarantować, że <strong> automatycznie się z nią zaktualizuje.

Słowo kluczowe initial

Dziedziczenie może powodować problemy z elementami, a initial udostępnia zaawansowaną opcję resetowania.

Wiesz już, że każda właściwość ma w CSS wartość domyślną. Słowo kluczowe initial przywraca właściwości do tej początkowej wartości domyślnej.

aside strong {
  font-weight: initial;
}

Ten fragment kodu usunie pogrubienie ze wszystkich elementów <strong> w elemencie <aside> i przywróci do nich normalną wagę, czyli wartość początkową.

Słowo kluczowe unset

Właściwość unset zachowuje się inaczej, jeśli jest dziedziczona domyślnie. Jeśli właściwość jest domyślnie dziedziczona, słowo kluczowe unset będzie takie samo jak inherit. Jeśli właściwość nie jest domyślnie dziedziczona, słowo kluczowe unset ma wartość initial.

Zapamiętanie, które właściwości CSS są domyślnie dziedziczone, może być trudne, ale w tym kontekście może być pomocne ustawienie unset. Na przykład parametr color jest dziedziczony domyślnie, ale margin nie jest, więc możesz napisać to:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

Teraz margin zostanie usunięty, a color powraca do wartości odziedziczonej obliczonej.

Wartości unset możesz też używać z właściwością all. Wracając do powyższego przykładu. Co się stanie, jeśli globalny styl p będzie miał kilka dodatkowych właściwości? Zastosowana będzie tylko reguła ustawiona dla margin i color.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

Jeśli zmienisz regułę aside p na all: unset, nie będzie miało znaczenia, jakie style globalne będą stosowane do p w przyszłości, zawsze będą niezmienione.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat dziedziczenia

Które z tych właściwości są dziedziczone?

animation
Animacje nie są przekazywane dzieciom.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

Która wartość działa jak inherit, chyba że nie ma nic do dziedziczenia, a potem zachowuje się jak initial?

reset
Nieprawidłowa wartość, spróbuj ponownie.
unset
🎉
superset
Nieprawidłowa wartość, spróbuj ponownie.

Zasoby