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.
- Położenie i kolejność występowania: kolejność, w jakiej pojawiają się reguły CSS.
- Szczegółowość: algorytm określający, który selektor arkusza CSS ma najsilniejsze dopasowanie.
- 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
- 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.
<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.
<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?
<style> znajduje się niżej strony niż
<link>, więc chociaż specyfikacja button jest taka sama,
pozycja reguły stylu zapewnia wygraną.
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:
- 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ą 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.
- Utworzony plik CSS. Usługa porównywania cen, którą tworzysz.
- Autor:
!important. Wszystkie!important, które dodasz do deklaracji autora. - Lokalne style użytkownika
!important. wszystkie!importantz poziomu systemu operacyjnego, lub CSS na poziomie rozszerzenia przeglądarki. - Klient użytkownika
!important. Wszystkie!importantzdefiniowane w domyślnym kodzie CSS, które udostępnia przeglądarka.
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?
!important ma najbardziej konkretne pochodzenie.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:
- normalny typ reguły, np.
font-size,backgroundlubcolor animationtyp reguły- Typ reguły
!important(w tej samej kolejności co w przypadku punktu początkowego) transitiontyp 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.
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ą...