Dziedziczenie

The CSS Podcast - 005: Inheritance

Załóżmy, że właśnie napisałeś 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 dodaj element linku do artykułu, z wartością class .my-button. Wystąpił jednak problem: tekst nie ma oczekiwanego koloru. Jak to się mogło stać?

Niektóre właściwości CSS dziedziczą wartości, jeśli nie podasz ich wartości. W przypadku tego przycisku color zostało odziedziczone z tego pliku CSS:

article a {
  color: maroon;
}

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

Proces dziedziczenia

Przyjrzyjmy się, jak działa dziedziczenie, za pomocą tego fragmentu kodu HTML:

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

Element główny (<html>) nie odziedziczy niczego, ponieważ jest pierwszym elementem w dokumencie. Dodaj trochę CSS do elementu HTML, a będzie on stosować się kaskadowo w dokumentie.

html {
  color: lightslategray;
}

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

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

Tekst w kodynie <p> będzie pochylony, ponieważ jest to element najgłębiej zagnieżdżony. 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 wiele z nich tak. Poniżej znajdziesz całą listę właściwości dziedziczonych domyślnie, pochodzącą z dokumentacji W3 o wszystkich właściwościach CSS:

Jak działa dziedziczenie

Każdy element HTML ma zdefiniowane wszystkie właściwości CSS z domyślną wartością początkową. Wartość początkowa to właściwość, która nie jest dziedziczona i wyświetla 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 kaskadowo w dół, oraz elementy podrzędne otrzymają obliczoną wartość, która będzie reprezentować wartość ich elementu nadrzędnego. Oznacza to, że jeśli element nadrzędny ma wartość font-weight bold, wszystkie elementy podrzędne będą wyświetlane pogrubioną czcionką, chyba że ich wartość font-weight będzie inna lub styl CSS klienta będzie zawierać 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 mogą w tym pomóc.

Słowo kluczowe inherit

Za pomocą słowa kluczowego inherit możesz spowodować, że każda usługa będzie dziedziczyć obliczoną wartość od usługi nadrzędnej. Przydatnym sposobem korzystania z tego słowa kluczowego jest tworzenie wyjątków.

strong {
  font-weight: 900;
}

Ten fragment kodu CSS powoduje, że wszystkie elementy <strong> mają wartość font-weight 900, zamiast domyślnej wartości bold, która jest równoważna wartości font-weight: 700.

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

Klasa .my-component zamiast tego ustawia wartość font-weight na 500. Aby elementy <strong> w sekcji .my-component były też elementami font-weight: 500, dodaj:

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

Teraz elementy <strong> w elementach .my-component będą miały atrybuty font-weight i 500.

Możesz ustawić tę wartość wprost, ale jeśli używasz inherit, a w przyszłości nastąpi zmiana w CSS .my-component, możesz mieć pewność, że <strong> będzie automatycznie aktualizowana.

Słowo kluczowe initial

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

Jak już wiesz, każda usługa porównywania cen ma wartość domyślną w CSS. Słowo kluczowe initial przywraca właściwości początkową wartość domyślną.

aside strong {
  font-weight: initial;
}

Ten fragment kodu spowoduje usunięcie pogrubionego formatu ze wszystkich elementów <strong> w elemencie <aside> i zamiast tego nada im normalny format, który jest wartością początkową.

Słowo kluczowe unset

Właściwość unset zachowuje się inaczej, jeśli jest dziedziczona domyślnie lub nie. Jeśli dana właściwość jest domyślnie dziedziczona, słowo kluczowe unset będzie takie samo jak inherit. Jeśli właściwości nie dziedziczy się domyślnie, 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 pomocne może być unset. Na przykład parametr color jest domyślnie dziedziczony, 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 element margin został usunięty, a element color wrócił do wartości obliczonej z poziomu odziedziczonego.

Wartości unset możesz też używać z właściwością all. Wracając do przykładu powyżej, co się stanie, jeśli globalne style p otrzymają kilka dodatkowych właściwości? Zastosowanie znajdzie 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ą zastosowane do elementu p w przyszłości, ponieważ zawsze będą one nieskonfigurowane.

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 domyślnie?

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

Która wartość zachowuje się jak inherit, o ile nie ma nic do dziedziczenia, a potem jak initial?

reset
nieprawidłowa wartość. Spróbuj ponownie.
unset
🎉
superset
nieprawidłowa wartość. Spróbuj ponownie.

Zasoby