Kaskada

Podcast o CSS – 004: Kaskada

CSS to skrót od Cascading StyleSheet. Kaskada to algorytm rozwiązywania konfliktów, w którym do elementu HTML ma zastosowanie wiele reguł CSS. Z tego powodu tekst przycisku w poniższym kodzie CSS jest niebieski.

button {
  color: red;
}

button {
  color: blue;
}

Zrozumienie algorytmu kaskadowego pomaga zrozumieć, jak przeglądarka rozwiązuje takie konflikty. Algorytm kaskadowy jest podzielony na 4 etapy.

  1. Pozycja i kolejność wyglądu: kolejność, w jakiej pojawiają się reguły CSS.
  2. Szczegółowość: algorytm określający, który selektor arkusza CSS ma najsilniejsze dopasowanie.
  3. Źródło: kolejność pojawiania się kodu CSS i skąd on pochodzi. Może to być styl przeglądarki, kod CSS z rozszerzenia przeglądarki lub utworzony przez Ciebie kod CSS.
  4. Ważność: niektóre reguły CSS mają większą wagę niż inne, zwłaszcza w przypadku typu reguły !important.

Pozycja i kolejność wyświetlania

Podczas obliczania rozwiązania konfliktu jest uwzględniana kolejność, w jakiej występują reguły CSS oraz sposób ich wyświetlania.

Prezentacja na początku tej lekcji jest najprostszym przykładem pozycji. Istnieją 2 reguły, które mają selektory o identycznej specyficzności, więc jako ostatnia zostanie uznana za wygrana.

Style mogą pochodzić z różnych źródeł na stronie HTML, takich jak tag <link>, osadzony tag <style> i wbudowany kod CSS, zgodnie z definicją w atrybucie style elementu.

Jeśli masz kod <link>, który zawiera kod CSS u góry strony HTML, to inny <link>, który zawiera kod CSS u dołu strony: najbardziej precyzyjny będzie element <link> u dołu. To samo dzieje się z umieszczonymi elementami <style>. Im bardziej są one szczegółowe, tym niżej znajdują się informacje.

Przycisk ma niebieskie tło, zgodnie z definicją w kodzie CSS, który jest zawarty w elemencie <link />. Reguła CSS, która ustawia ciemny kolor, znajduje się w drugim połączonym arkuszu stylów i jest stosowana z powodu jego późniejszej pozycji.

Ta kolejność dotyczy też umieszczonych elementów <style>. Jeśli są one zadeklarowane przed elementem <link>, najbardziej szczegółowe będzie kod CSS połączonego arkusza stylów.

Element <style> jest zadeklarowany w elemencie <head>, a element <link /> – w <body>. Oznacza to, że jest on bardziej precyzyjny niż element <style>.

Wbudowany atrybut style z zadeklarowanym w nim CSS zastąpi wszystkie pozostałe właściwości CSS niezależnie od ich pozycji, chyba że w deklaracji określono atrybut !important.

Pozycja jest też stosowana w kolejności reguły CSS. W tym przykładzie element będzie miał fioletowe tło, ponieważ element background: purple został zadeklarowany jako ostatni. Ponieważ zielone tło zostało zadeklarowane przed fioletowym, przeglądarka ignoruje je.

.my-element {
  background: green;
  background: purple;
}

Określenie 2 wartości dla tej samej właściwości może być prostym sposobem na tworzenie wartości zastępczych w przypadku przeglądarek, które nie obsługują określonej wartości. W następnym przykładzie obiekt font-size jest zadeklarowany dwukrotnie. Jeśli przeglądarka obsługuje pole clamp(), poprzednia deklaracja font-size zostanie odrzucona. Jeśli przeglądarka nie obsługuje elementu clamp(), zostanie uwzględniona początkowa deklaracja, a rozmiar czcionki będzie wynosił 1,5 rem

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kaskadzie

Jeśli masz na stronie następujący kod HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

W pliku styles.css znajduje się ta reguła CSS:

button {
  background: yellow;
}

Jakiego koloru jest tło przycisku?

różowy
Umieszczone źródło <style> znajduje się niżej na stronie niż tag <link>, więc specyfika obiektu button jest taka sama, ale pozycja reguły stylu zapewnia wygraną.
żółty
W dokumencie HTML możliwe, że jako pierwsze zostało odczytane tło żółtego przycisku, ale później odkryto nowszą regułę o tej samej specyfice, przez co ta reguła nie miała zastosowania do przycisku.

Zgodność ze specyfikacją

Szczegółowość to algorytm określający, który selektor arkusza CSS jest najbardziej konkretny. Do wykonywania tych obliczeń używa systemu ważenia lub oceny. Jeśli sprecyzujesz regułę, możesz spowodować jej zastosowanie nawet wtedy, gdy inny kod CSS pasujący do selektora pojawi się później w elemencie CSS.

Z następnej lekcji dowiesz się, jak obliczamy dokładność, ale pamiętaj o kilku kwestiach, dzięki którym unikniesz zbyt wielu problemów ze zgodnością.

Kierowanie CSS na klasę elementu sprawi, że ta reguła będzie bardziej szczegółowa i dlatego ważniejsza jest jej zastosowanie niż kierowanie CSS na sam element. Oznacza to, że w poniższym kodzie CSS element h1 będzie miał kolor czerwony, mimo że obie reguły będą zgodne, a reguła dla selektora h1 pojawi się później w arkuszu stylów.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

Element id sprawia, że kod CSS jest jeszcze bardziej szczegółowy, więc style zastosowane do identyfikatora zastępują te z wielu innych sposobów. Jest to jeden z powodów, dla których dołączanie stylów do elementu id nie jest dobrym pomysłem. Może to utrudniać zastąpienie takiego stylu innym.

Szczegółowość jest skumulowana

Jak widać na następnej lekcji, za każdy typ selektora otrzymują punkty, które wskazują, jak bardzo jest on precyzyjny. Punkty wszystkich selektorów użytych do kierowania elementu są sumowane. Oznacza to, że jeśli kierujesz element za pomocą listy selektora, takiej jak a.my-class.another-class[href]:hover, możesz dość trudno zastąpić inny kod CSS. Dlatego, aby ułatwić wielokrotne korzystanie z CSS, warto zadbać o jak najprostsze selektory. Używaj specyfiki jako narzędzia do docierania do elementów w razie potrzeby, ale w miarę możliwości refaktoryzuj długie, szczegółowe listy selektorów.

Punkt początkowy

Kod CSS, który tworzysz, nie jest jedynym CSS stosowanym do strony. Kaskada uwzględnia pochodzenie CSS. To źródło obejmuje wewnętrzny arkusz stylów przeglądarki, style dodane przez rozszerzenia przeglądarki lub system operacyjny oraz utworzony przez Ciebie kod CSS. Kolejność specyfiki tych źródeł (od najmniejszej do najbardziej szczegółowej) jest taka:

  1. Style podstawowe klienta użytkownika. Są to style, które Twoja przeglądarka domyślnie stosuje do elementów HTML.
  2. Lokalne style użytkownika. Ustawienia te mogą być określane na poziomie systemu operacyjnego, np. podstawowy rozmiar czcionki lub preferencja zmniejszonego ruchu. Mogą też pochodzić z rozszerzeń przeglądarki, np. rozszerzeń przeglądarki, które umożliwiają użytkownikowi pisanie własnych niestandardowych arkuszy CSS dla strony internetowej.
  3. Opracowany przez siebie arkusz CSS. Usługa porównywania cen, którą tworzysz.
  4. Data utworzenia: !important. Wszystkie !important, które dodasz do utworzonych deklaracji.
  5. Lokalne style użytkownika !important. Dowolne !important, które pochodzą z poziomu systemu operacyjnego lub CSS na poziomie rozszerzenia przeglądarki.
  6. Klient użytkownika !important. Każdy !important podany przez przeglądarkę w domyślnym kodzie CSS.
Wizualna prezentacja kolejności źródeł, która została również przedstawiona na liście.

Jeśli w swoim utworzonym przez siebie kodzie CSS masz typ reguły !important, a użytkownik ma w niestandardowym kodzie CSS typ reguły !important. Czyje CSS wygrywa?

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat pochodzenia kaskadowego

Sprawdź swoją wiedzę o źródłach kaskadowych, korzystając z tych reguł stylów z różnych źródeł:

Styl klienta użytkownika

h1 { margin-block-start: 0.83em; }

Wczytywanie

h1 { margin-block-start: 20px; }

Style autora strony

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

Niestandardowy styl użytkownika

h1 { margin-block-start: 2rem !important; }

Następnie z użyciem tego kodu HTML:

<h1>Lorem ipsum</h1>

Jaka jest końcowa wartość margin-block-start kolumny h1?

20px
Wczytywanie jest częścią oryginalnego źródła, które traci ważność z ważnym lokalnym stylem użytkownika.
0,83 em
Źródło stylu klienta użytkownika traci ważność z ważnym lokalnym stylem użytkownika.
2 min
Najdokładniejsze źródło ma ten niestandardowy styl użytkownika !important.
2 kanały
Ten styl autora wchodzi w skład pochodzenia autora, który traci ważność z ważnym lokalnym stylem użytkownika.
1 kan
Ten styl autora wchodzi w skład pochodzenia autora, który traci ważność z ważnym lokalnym stylem użytkownika.

Znaczenie

Nie wszystkie reguły CSS są obliczane tak samo lub mają taką samą szczegółowość.

Oto kolejność według ważności (od najmniejszej do najważniejszej):

  1. normalny typ reguły, np. font-size, background lub color
  2. animation typ reguły
  3. !important typ reguły (według tej samej kolejności co źródło)
  4. transition typ reguły

Aktywne typy animacji i reguł przejścia mają większe znaczenie niż normalne reguły. W przypadku przejść o znaczeniu wyższym niż !important typów reguł. Dzieje się tak, ponieważ gdy animacja lub przejście stają się aktywne, oczekiwanym działaniem jest zmiana stanu wizualnego.

Korzystanie z Narzędzi deweloperskich do sprawdzania, dlaczego niektóre CSS nie są stosowane

W Narzędziach deweloperskich w przeglądarce zwykle wyświetlają się wszystkie fragmenty kodu CSS, które pasują do elementu, oraz te, które nie są używane.

Ilustracja przedstawiająca Narzędzia deweloperskie w przeglądarce z przekreślonym CSS

Jeśli oczekiwany element CSS w ogóle nie pojawia się, oznacza to, że nie pasuje do elementu. W takim przypadku poszukaj błędu w nazwie klasy lub elementu albo nieprawidłowego kodu CSS.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kaskadzie

Kaskadowego można używać do...

rozwiązywanie konfliktów, gdy do elementu ma zastosowanie wiele stylów.
To jeden z głównych celów firmy – rozwiązywanie konfliktów.
Upewnij się, że w momencie renderowania dla każdej właściwości występuje tylko jedna wartość stylu.
Tekst może być tylko w jednym kolorze, a wskazówka Kaskada pozwala wskazać, który kolor powinien mieć.
Reguły stylu oceniania i ważenia.
Ocenianie punktów i ważenie stanowi część fazy sortowania w The Cascade.
Atrybuty stylu sortowania i filtrowania.
Sortowanie i filtrowanie to etapy w The Cascade, które ułatwiają zrozumienie aspektów rozwiązywania konfliktów.

Zasoby