Kaskadowość w CSS: Jak przeglądarka stosuje style?

3.1. Kaskadowość: Jak przeglądarka stosuje style?

Strona główna > Kurs CSS > Rozdział 3: Kaskadowość, Specyficzność i Dziedziczenie > Kaskadowość: Jak przeglądarka stosuje style?

Wprowadzenie: Wodospad stylów

Nazwa "Kaskadowe Arkusze Stylów" (Cascading Style Sheets) nie jest przypadkowa. Słowo **"kaskadowość"** odnosi się do fundamentalnego mechanizmu, za pomocą którego przeglądarka decyduje, które reguły CSS zastosować do danego elementu HTML, gdy istnieje wiele potencjalnie sprzecznych deklaracji.

Wyobraź sobie wodospad (kaskadę), gdzie woda spływa w dół przez różne poziomy. Podobnie style CSS "spływają" z różnych źródeł i są łączone oraz rozwiązywane są konflikty, aby określić ostateczny wygląd elementu. Zrozumienie kaskadowości jest kluczowe do przewidywania i kontrolowania wyglądu strony.

Algorytm kaskadowości: Kroki przeglądarki

Aby określić ostateczną wartość dla każdej właściwości CSS danego elementu, przeglądarka przechodzi przez następujące kroki:

Znalezienie wszystkich pasujących deklaracji: Przeglądarka identyfikuje wszystkie reguły CSS, których selektory pasują do danego elementu, pochodzące z różnych źródeł (style przeglądarki, style użytkownika, style autora - zewnętrzne, wewnętrzne, inline).
Sortowanie według źródła i ważności: Deklaracje są sortowane według ich pochodzenia i ważności. Priorytet (od najważniejszego do najmniej ważnego) wygląda zazwyczaj następująco:
1. Deklaracje autora z !important.
2. Deklaracje użytkownika z !important (jeśli użytkownik zdefiniował własny arkusz stylów w przeglądarce).
3. Deklaracje autora (normalne).
4. Deklaracje użytkownika (normalne).
5. Domyślne style przeglądarki (user-agent styles).
Deklaracje oznaczone jako !important mają odwrócony priorytet źródła (użytkownik > autor), ale generalnie !important nadpisuje normalne deklaracje.
Sortowanie według specyficzności: Jeśli po kroku 2 nadal istnieje wiele deklaracji o tym samym priorytecie źródła i ważności, które dotyczą tej samej właściwości, przeglądarka porównuje **specyficzność** selektorów tych reguł. Reguła z bardziej specyficznym selektorem wygrywa. (O specyficzności szczegółowo w następnej lekcji).
Sortowanie według kolejności w kodzie: Jeśli deklaracje mają tę samą ważność źródła i tę samą specyficzność selektora, wygrywa ta deklaracja, która pojawia się **później** w kodzie źródłowym CSS. Style inline są traktowane tak, jakby pojawiły się na samym końcu.

Po przejściu tych kroków, przeglądarka ma jedną, "zwycięską" wartość dla każdej właściwości CSS elementu, którą następnie stosuje podczas renderowania.

Źródła stylów

Przeglądarka bierze pod uwagę style z trzech głównych źródeł:

Arkusze stylów przeglądarki (User-Agent Stylesheets): Każda przeglądarka ma wbudowany domyślny zestaw stylów, który nadaje podstawowy wygląd elementom HTML (np. domyślne marginesy dla body, niebieski kolor i podkreślenie dla linków).
Arkusze stylów użytkownika (User Stylesheets): Użytkownik może zdefiniować własny arkusz stylów w ustawieniach przeglądarki, aby dostosować wygląd stron do swoich preferencji (np. zwiększyć rozmiar czcionki). Jest to rzadziej używane.
Arkusze stylów autora (Author Stylesheets): To są style CSS tworzone przez twórcę strony internetowej. Mogą pochodzić z:
- Zewnętrznych plików .css (linkowanych przez <link>).
- Wewnętrznych bloków <style> w HTML.
- Stylów inline (w atrybucie style).

Kaskada określa, jak style z tych różnych źródeł oddziałują na siebie.

Przykład działania kaskady

Rozważmy prosty przykład:

<!DOCTYPE html>
<html>
<head>
    <title>Kaskada</title>
    <link rel="stylesheet" href="style.css">
    <style>
        p { color: green; } /* Wewnętrzny styl autora */
    </style>
</head>
<body>
    <p class="akapit" style="color: purple;">To jest paragraf.</p>
</body>
</html>

Plik style.css (zewnętrzny styl autora):

p { 
  color: blue; 
}

.akapit {
  color: red;
}

Jakiego koloru będzie tekst paragrafu?

Przeglądarka znajduje wszystkie deklaracje color dla elementu <p>:
- color: blue; (z pliku CSS, selektor typu p)
- color: red; (z pliku CSS, selektor klasy .akapit)
- color: green; (z bloku <style>, selektor typu p)
- color: purple; (ze stylu inline)
Wszystkie pochodzą od autora i nie mają !important.
Porównujemy specyficzność:
- Styl inline: najwyższa specyficzność (1,0,0,0)
- .akapit: specyficzność klasy (0,0,1,0)
- p (wewnętrzny): specyficzność typu (0,0,0,1)
- p (zewnętrzny): specyficzność typu (0,0,0,1)
Styl inline ma najwyższą specyficzność, więc wygrywa.
(Gdyby nie było stylu inline, porównalibyśmy .akapit z p. .akapit ma wyższą specyficzność, więc wygrałby color: red;).
(Gdyby były tylko style p, porównalibyśmy wewnętrzny i zewnętrzny. Mają tę samą specyficzność. Wygrałby styl wewnętrzny color: green;, ponieważ w kodzie HTML blok <style> pojawia się po linku do style.css - zakładając standardowe umieszczenie).

Odpowiedź: Tekst paragrafu będzie miał kolor **fioletowy (purple)**, ponieważ styl inline ma najwyższą specyficzność spośród stylów autora.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Masz następujący kod HTML i CSS. Jaki kolor będzie miał tekst w elemencie <div>? Wyjaśnij dlaczego, odnosząc się do kroków kaskady.

HTML:

<div class="box" id="main-box">Tekst w divie.</div>

CSS:

#main-box {
  color: blue;
}

div {
  color: red;
}

.box {
  color: green;
}

Rozwiązanie:

Tekst będzie miał kolor **niebieski (blue)**.

Wyjaśnienie:

Wszystkie trzy reguły pasują do elementu <div>.
Wszystkie pochodzą od autora i nie mają !important.
Porównujemy specyficzność selektorów:
- #main-box (ID): (0,1,0,0)
- .box (klasa): (0,0,1,0)
- div (typ): (0,0,0,1)
Selektor ID (#main-box) ma najwyższą specyficzność, więc reguła color: blue; wygrywa i zostaje zastosowana.

Zadanie 2 (do samodzielnego wykonania)

Masz poniższy kod. Jaki kolor będzie miał tekst paragrafu? Uzasadnij odpowiedź, biorąc pod uwagę kolejność reguł w CSS.

HTML:

<p class="info">Informacja.</p>

CSS:

.info {
  color: green;
}

p {
  color: red;
}

p.info {
  color: blue;
}

Zadanie 3 (do samodzielnego wykonania)

Dodaj deklarację !important do reguły color: red; w selektorze p z Zadania 2. Jaki kolor będzie miał teraz paragraf? Dlaczego?

CSS (zmodyfikowany):

.info {
  color: green;
}

p {
  color: red !important; /* Dodano !important */
}

p.info {
  color: blue;
}

FAQ - Najczęściej zadawane pytania

Co dokładnie oznacza "kaskada"?

Kaskada odnosi się do procesu, w którym style z różnych źródeł (przeglądarka, użytkownik, autor) są łączone, a konflikty między nimi są rozwiązywane według ściśle określonych reguł (ważność źródła, specyficzność, kolejność). Wynikiem jest pojedyncza, ostateczna wartość dla każdej właściwości CSS każdego elementu.

Czy kolejność plików CSS w HTML ma znaczenie?

Tak, jeśli dwa zewnętrzne arkusze stylów zawierają reguły o tej samej specyficzności, które dotyczą tego samego elementu i właściwości, to reguła z arkusza dołączonego **później** w kodzie HTML (niżej w sekcji <head>) nadpisze regułę z wcześniejszego arkusza.

Czy style inline zawsze wygrywają?

Prawie zawsze. Style inline mają bardzo wysoką specyficzność (1,0,0,0). Mogą zostać nadpisane tylko przez deklarację z flagą !important pochodzącą z arkusza autora lub użytkownika. Normalne style z arkuszy zewnętrznych czy wewnętrznych, nawet te z selektorem ID, przegrają ze stylem inline.

Do czego służą style użytkownika?

Style użytkownika pozwalają osobom przeglądającym strony dostosować ich wygląd do własnych potrzeb, np. zwiększyć czytelność przez zmianę czcionki czy kontrastu. Są one szczególnie ważne dla osób z niepełnosprawnościami wzroku. Autorzy stron powinni pisać CSS w sposób, który nie utrudnia stosowania stylów użytkownika (np. unikać nadużywania !important).