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.
- Pozycja i kolejność wyglądu: kolejność, w jakiej pojawiają się reguły CSS.
- Szczegółowość: algorytm określający, który selektor arkusza CSS ma najsilniejsze dopasowanie.
- Ź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.
- 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.
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.
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?
<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ą.
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:
- Style podstawowe klienta użytkownika. Są to style, które Twoja przeglądarka domyślnie stosuje do elementów HTML.
- 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.
- Opracowany przez siebie arkusz CSS. Usługa porównywania cen, którą tworzysz.
- Data utworzenia:
!important
. Wszystkie!important
, które dodasz do utworzonych deklaracji. - Lokalne style użytkownika
!important
. Dowolne!important
, które pochodzą z poziomu systemu operacyjnego lub CSS na poziomie rozszerzenia przeglądarki. - Klient użytkownika
!important
. Każdy!important
podany przez przeglądarkę w domyślnym kodzie CSS.
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
?
!important
.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):
- normalny typ reguły, np.
font-size
,background
lubcolor
animation
typ reguły!important
typ reguły (według tej samej kolejności co źródło)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.
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...