Kaskada

Podcast CSS – 004: The Cascade .

CSS to kaskadowe arkusze stylów (kaskadowe arkusze stylów). Kaskada to algorytm rozwiązywania konfliktów, w przypadku których do elementu HTML ma zastosowanie wiele reguł CSS. To dlatego, że tekst przycisku z poniższym CSS jest niebieski.

button {
  color: red;
}

button {
  color: blue;
}

Znajomość algorytmu kaskadowego pozwala zrozumieć, jak przeglądarka rozwiązuje tego typu konflikty. Algorytm kaskadowy dzieli się na 4 osobne etapy.

  1. Położenie i kolejność występowania: kolejność, w jakiej pojawiają się reguły CSS.
  2. Szczegółowość: algorytm określający, który selektor arkusza CSS ma najsilniejsze dopasowanie.
  3. Pochodzenie: kolejność pojawienia się kodu CSS i jego źródła (np. styl przeglądarki); Kod CSS z rozszerzenia przeglądarki lub własny arkusz CSS
  4. Ważność: niektóre reguły CSS mają większe znaczenie niż inne, zwłaszcza w przypadku typu reguły !important

Pozycja i kolejność występowania

Kolejność i sposób wyświetlania reguł CSS jest uwzględniana przez kaskadę podczas obliczania rozwiązywania konfliktów.

Prezentacja na początku tej lekcji jest najprostszym przykładem przedstawiania pozycji. Istnieją 2 reguły, które mają selektory o identycznej dokładności: więc ten ostatni ogłoszony.

Style mogą pochodzić z różnych źródeł na stronie HTML, np. tagu <link>, umieszczony tag <style>, i wbudowanego kodu CSS zgodnie z definicją w atrybucie style elementu.

Jeśli masz u góry strony HTML tag <link> zawierający kod CSS, a następnie kolejny <link> z CSS na dole strony – najbardziej precyzyjna będzie sekcja <link> na dole. To samo dzieje się w przypadku osadzonych elementów <style>. Im bardziej są na dole strony, ale stają się bardziej szczegółowe.

Przycisk ma niebieskie tło, zdefiniowane przez CSS zawarty w elemencie <link />. Reguła CSS, która powoduje ustawienie koloru, znajduje się w drugim połączonym arkuszu stylów i jest stosowane ze względu na jego późniejsze położenie.

Taka kolejność dotyczy również umieszczonych elementów <style>. Jeśli są zadeklarowane przed <link>, najbardziej szczegółowy będzie kod CSS połączonego arkusza stylów.

Element <style> jest zadeklarowany w tabeli <head>, podczas gdy element <link /> jest zadeklarowany w <body>. Oznacza to, że element jest bardziej szczegółowy niż element <style>.

Wbudowany atrybut style z zadeklarowanym w nim CSS zastąpi wszystkie inne elementy CSS, niezależnie od swojej pozycji, chyba że deklaracja ma zdefiniowaną właściwość !important.

Pozycja ma też zastosowanie w kolejności określonej przez regułę CSS. W tym przykładzie element będzie miał fioletowe tło, ponieważ background: purple zadeklarowano jako ostatni. Ponieważ zielone tło zostało zadeklarowane przed fioletowym tłem, jest teraz ignorowane przez przeglądarkę.

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

Możliwość określenia dwóch wartości dla tej samej usługi może być prostym sposobem tworzenia wartości zastępczych dla przeglądarek, które nie obsługują określonej wartości. W kolejnym przykładzie funkcja font-size jest zadeklarowana dwukrotnie. Jeśli przeglądarka obsługuje clamp(), poprzednia deklaracja font-size zostanie odrzucona. Jeśli clamp() nie jest obsługiwany przez przeglądarkę, początkowa deklaracja zostanie zaakceptowana, a rozmiar czcionki to 1,5rem

.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 poniższy 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 elemencie styles.css znajduje się ta reguła CSS:

button {
  background: yellow;
}

Jaki kolor ma tło przycisku?

różowy
Umieszczony punkt początkowy <style> znajduje się niżej strony niż <link>, więc chociaż specyfikacja button jest taka sama, pozycja reguły stylu zapewnia wygraną.
żółty
Tło żółtego przycisku zostało już odczytane w dokumencie HTML. ale później odkryto nowszą regułę o tym samym stopniu szczegółowości, powodują, że reguła nie jest stosowana do przycisku.

Zgodność ze specyfikacją

Swoistość to algorytm określający, który selektor arkusza CSS jest najbardziej dokładny, za pomocą systemu ważenia lub punktacji. Doprecyzując regułę, możesz spowodować, że zostanie on zastosowany, nawet jeśli jakaś inna treść pasująca do selektora pojawi się później w kodzie CSS.

W następnej lekcji dowiesz się, jak obliczamy szczegółowość. Pamiętaj jednak, że pomoże Ci to uniknąć zbyt wielu problemów ze szczegółami.

kierowanie CSS na klasę na elemencie sprawi, że reguła będzie bardziej szczegółowa, i dlatego są uważane za ważniejsze, niż CSS kierujący reklamy na sam element. Oznacza to, że w przypadku tego kodu CSS element h1 będzie miał kolor czerwony, mimo że obie reguły są 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;
}

id jeszcze bardziej zwiększa precyzję usługi porównywania cen, więc style zastosowane do identyfikatora zastąpią te zastosowane na wiele innych sposobów. To jeden z powodów, dla których nie zalecamy dołączania stylów do elementu id. Może to utrudnić zastąpienie tego stylu innym.

Zgodność ze specyfikacją jest skumulowana

W następnej lekcji dowiesz się, Każdy typ selektora otrzymują punkty, które wskazują, na ile jest on szczegółowy, punkty wszystkich selektorów użytych do kierowania na element są sumowane. Oznacza to, że jeśli kierujesz reklamy na element za pomocą listy selektora, np. a.my-class.another-class[href]:hover pojawia się coś dość trudnego do zastąpienia innymi elementami CSS. Dlatego, aby zwiększyć możliwość wielokrotnego wykorzystania usługi porównywania cen, staraj się, by selektory były jak najprostsze. Używaj precyzji jako narzędzia, aby dotrzeć do elementów wtedy, gdy to konieczne, ale jeśli to możliwe, warto rozważyć refaktoryzację długich, konkretnych list wyboru.

Punkt początkowy

Napisany przez Ciebie kod CSS nie jest jedynym kodem CSS zastosowanym na stronie. Kaskada uwzględnia pochodzenie usługi porównywania cen. To źródło obejmuje wewnętrzny arkusz stylów przeglądarki, style dodane przez rozszerzenia przeglądarki lub system operacyjny, i opracowanej przez Ciebie usługi porównywania cen. Kolejność specyficzności tych źródeł (od najmniej dokładności) do najbardziej szczegółowych:

  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ą pochodzić z poziomu systemu operacyjnego. Mogą to być na przykład podstawowy rozmiar czcionki, czy wolniejszego ruchu. Mogą też pochodzić z rozszerzeń przeglądarki, np. rozszerzenie do przeglądarki, które pozwala użytkownikowi napisać własny niestandardowy kod CSS na potrzeby strony internetowej.
  3. Utworzony plik CSS. Usługa porównywania cen, którą tworzysz.
  4. Autor: !important. Wszystkie !important, które dodasz do deklaracji autora.
  5. Lokalne style użytkownika !important. wszystkie !important z poziomu systemu operacyjnego, lub CSS na poziomie rozszerzenia przeglądarki.
  6. Klient użytkownika !important. Wszystkie !important zdefiniowane w domyślnym kodzie CSS, które udostępnia przeglądarka.
Wizualna demonstracja kolejności źródeł zgodnie z opisem na liście.

Jeśli w utworzonej przez siebie usłudze porównywania cen masz typ reguły !important a użytkownik ma w niestandardowym kodzie CSS typ reguły !important. Czyj kod CSS wygra?

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o źródłach kaskadowych

Sprawdź swoją wiedzę o źródłach kaskadowych – rozważ ten styl reguł pochodzących 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; }
}

Styl niestandardowy użytkownika

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

Następnie, analizując następujący kod HTML:

<h1>Lorem ipsum</h1>

Jaki jest ostatni margin-block-start z h1?

20 piks.
Ładowanie rozruchowe jest częścią autora, który nie ma dostępu do ważnego lokalnego stylu użytkownika.
0,83 em
Pochodzenie stylu klienta użytkownika jest usuwane z ważnego lokalnego stylu użytkownika.
2rem
Ten styl niestandardowy użytkownika !important ma najbardziej konkretne pochodzenie.
2 kanały
Ten styl autora wchodzi w skład jego źródła, ale nie znika z ważnego lokalnego stylu użytkownika.
1k
Ten styl autora wchodzi w skład jego źródła, ale nie znika z ważnego lokalnego stylu użytkownika.

Znaczenie

Nie wszystkie reguły CSS są obliczane tak samo, lub o takiej samej specyfice.

Kolejność ważności (od najmniej ważnych) jest takie ważne:

  1. normalny typ reguły, np. font-size, background lub color
  2. animation typ reguły
  3. Typ reguły !important (w tej samej kolejności co w przypadku punktu początkowego)
  4. transition typ reguły

Aktywne typy animacji i reguł przejścia mają większe znaczenie niż zwykłe reguły. W przypadku przejścia ma ono większe znaczenie niż typy reguł !important. Dzieje się tak, ponieważ gdy animacja lub przejście stają się aktywne, jego oczekiwanym działaniem jest zmiana stanu wizualnego.

Wykorzystanie narzędzi deweloperskich w celu sprawdzenia, dlaczego niektóre CSS nie są stosowane

Narzędzia deweloperskie w przeglądarce zwykle wyświetlają cały kod CSS pasujący do elementu, a te, które nie są używane, są przekreślone.

Obraz przedstawiający Narzędzia deweloperskie w przeglądarce z przekreślonym arkuszem CSS

Jeśli usługa porównywania cen, która miała zostać zastosowana, w ogóle się nie pojawi, to nie pasowało do elementu. W takim przypadku musisz poszukać informacji w innym miejscu, np. z powodu literówki w nazwie klasy lub elementu albo nieprawidłowego kodu CSS.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kaskadzie

Wodospady mogą...

Rozwiązywanie konfliktów, gdy do elementu ma zastosowanie wiele stylów.
To jeden z głównych celów firmy, czyli rozwiązywanie konfliktów.
Upewnij się, że na etapie tworzenia każdej właściwości każda właściwość ma tylko jedną wartość stylu.
Tekst może być tylko w jednym kolorze, a kaskada pozwala określić, jaki powinien być.
Reguły stylu punktacji i ważenia.
Proces oceniania i ważenia jest częścią fazy sortowania The Cascade.
Atrybuty stylu sortowania i filtrowania.
Sortowanie i filtrowanie to etapy procesu „Cascade”, które pomagają zrozumieć aspekty rozwiązywania konfliktów.

Zasoby