Dziedziczenie

The CSS Podcast - 005: Inheritance

Załóżmy, że właśnie napisano kod CSS, aby elementy wyglądały jak przycisk.

<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 element linku z wartością class.my-button. Wystąpił jednak problem: tekst nie ma oczekiwanego koloru. Jak to się stało?

Niektóre właściwości CSS są dziedziczone, jeśli nie określisz dla nich wartości. W przypadku tego przycisku przejęto wartość color z tej usługi porównywania cen:

article a {
  color: maroon;
}

Z tej lekcji dowiesz się, dlaczego tak się dzieje, i jak dziedziczenie może Ci pomóc w pisaniu mniejszej ilości kodu CSS.

Przepływ dziedziczenia

Sprawdź, 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ć żadnych właściwości, ponieważ jest pierwszym elementem w dokumencie. Dodaj trochę CSS do elementu HTML, a zacznie on kaskadowo rozprzestrzeniać się w dokumencie.

html {
  color: lightslategray;
}

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

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Tylko element <p> będzie miał tekst pisany kursywą, ponieważ jest najbardziej zagnieżdżonym elementem. Dziedziczenie działa tylko w dół, a nie w górę do elementów nadrzędnych.

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

Nie wszystkie właściwości CSS są domyślnie dziedziczone, ale jest ich wiele. Oto pełna lista właściwości, które są domyślnie dziedziczone (pochodzi z dokumentacji W3 dotyczącej wszystkich właściwości CSS):

Jak działa dziedziczenie

Każdy element HTML ma domyślnie zdefiniowaną każdą właściwość CSS z wartością początkową. Wartość początkowa to właściwość, która nie jest dziedziczona i pojawia się jako domyślna, jeśli kaskada nie może obliczyć wartości dla danego elementu.

Właściwości, które mogą być dziedziczone, są kaskadowo przekazywane w dół, a elementy podrzędne otrzymują obliczoną wartość, która reprezentuje wartość elementu nadrzędnego. Oznacza to, że jeśli element nadrzędny ma ustawioną wartość font-weight na bold, wszystkie elementy podrzędne będą pogrubione, chyba że ich wartość font-weight jest inna lub arkusz stylów klienta użytkownika ma wartość font-weight dla tego elementu.

Jak jawnie dziedziczyć i kontrolować dziedziczenie

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

Słowo kluczowe inherit

Aby właściwość dziedziczyła obliczoną wartość elementu nadrzędnego, możesz użyć słowa kluczowego inherit. Przydatnym sposobem użycia tego słowa kluczowego jest tworzenie wyjątków.

strong {
  font-weight: 900;
}

Ten fragment kodu CSS ustawia dla wszystkich elementów <strong> wartość font-weight na 900 zamiast domyślnej wartości bold, która byłaby odpowiednikiem font-weight: 700.

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

Klasa .my-component ustawia wartość font-weight na 500. Aby elementy <strong> wewnątrz elementu .my-component również były font-weight: 500, dodaj:

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

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

Możesz ustawić tę wartość w sposób jawny, ale jeśli używasz inherit, a CSS .my-component zmieni się w przyszłości, możesz mieć pewność, że <strong> będzie automatycznie aktualizowany.

Słowo kluczowe initial

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

Wiesz już, że każda właściwość w CSS ma wartość domyślną. Słowo kluczowe initial przywraca właściwość do 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 zamiast tego ustawi normalną grubość, która jest wartością początkową.

Słowo kluczowe unset

Właściwość unset działa inaczej, jeśli usługa jest dziedziczona domyślnie lub nie. Jeśli właściwość jest dziedziczona domyślnie, słowo kluczowe unset będzie takie samo jak inherit. Jeśli właściwość nie jest domyślnie dziedziczona, słowo kluczowe unset jest równe initial.

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

/* 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 wróci do odziedziczonej wartości obliczonej.

Możesz też użyć wartości unset z właściwością all. Wróćmy do poprzedniego przykładu. Co się stanie, jeśli style globalne p zyskają kilka dodatkowych właściwości? Zastosowana zostanie 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 zostaną w przyszłości zastosowane do elementu p, ponieważ zawsze będą one wyłączone.

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

Słowo kluczowe revert

Jak wiesz z lekcji o kaskadowości, style pochodzą z różnych źródeł: podstawowych stylów klienta użytkownika, stylów preferowanych przez użytkownika i stylów utworzonych przez Ciebie. Słowo kluczowe revert cofa style ustawione w tym samym źródle, w którym jest używane słowo kluczowe revert.

Jest to przydatne, gdy masz ustawiony styl, ale nie chcesz, aby był stosowany w niektórych przypadkach. Atrybuty inherit, initial i unset określają sposób obliczania wartości stylu, a atrybut revert określa tylko, że inne napisane przez Ciebie style nie mają zastosowania.

p {
  padding: 2em;
}

aside p {
  padding: revert;
}

Ten fragment kodu nadaje elementom <p> dopełnienie, ale gdy element <p> znajduje się w elemencie <aside>, nie określa w ogóle wartości padding. Zamiast tego wraca do stylu preferencji użytkownika (jeśli jest ustawiony) lub podstawowych stylów klienta użytkownika.

Słowo kluczowe revert-layer

Warstwy kaskadowe to przydatny sposób na porządkowanie stylów i ustalanie ich priorytetów w ramach pochodzenia autora w kaskadzie. Słowo kluczowe revert-layer jest podobne do revert, ale zamiast określać, że do właściwości nie należy stosować żadnych stylów autora, cofa tylko style w bieżącej warstwie.

Jeśli używasz biblioteki interfejsu innej firmy, warto zaimportować ją do warstwy i dodać wszelkie zastąpienia do warstwy o wyższym priorytecie. Następnie możesz usunąć zastąpienie za pomocą ikony revert-layer. W takim przypadku zostaną użyte ustawienia domyślne biblioteki interfejsu.

Jeśli żadne inne warstwy nie określają wartości właściwości, będzie ona działać jak revert i używać wartości z wcześniejszego źródła.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o dziedziczeniu

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

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

Która wartość zachowuje się jak inherit, chyba że nie ma nic do odziedziczenia, a wtedy zachowuje się jak initial?

reset
nieprawidłowa wartość, spróbuj jeszcze raz.
unset
🎉
superset
nieprawidłowa wartość, spróbuj jeszcze raz.

Zasoby