Rozwiązywanie konfliktów

Kaskadowość stylów CSS

Pierwszym etapem przetwarzania CSS przez przeglądarkę jest określenie, które style mają zostać użyte dla danego elementu.

Kaskadowość polega na łączeniu arkuszy stylów i rozwiązywaniu konfliktów między różnymi regułami CSS, gdy więcej niż jedna reguła dotyczy danego elementu.

Znaczenie (ang. importance)

Arkusze stylów mogą pochodzić z różnych źródeł: (autor, użytkownik, przeglądarka).

Najwyższy priorytet mają deklaracje użytkownika z dyrektywą !important. Następnie deklaracje autora z dyrektywą !important. Po nich deklaracje autora i użytkownika. Najmniejszą wagę posiadają domyślne deklaracje przeglądarki.

1. User !important declarations
2. Author !important declarations
3. Author declarations
4. User declarations
5. Default browser declarations

Przykład

.button {
    font‐size: 20px;
    background‐color: blue !important;
}

#nav .pull‐right .button {
    background‐color: tomato;
}

Zastosowanie powyższych deklaracji spowoduje, że element .button będzie posiadał niebieski kolor tła (deklaracja autora z dyrektywą !important).

Szczegółowość (ang. specificity)

Jeżeli deklaracje odnoszą się do tego samego elementu i mają to samo znaczenie konflikt rozwiązywany jest poprzez określenie szczegółowości deklaracji.

1. Inline style
2. IDs
3. Classes, pseudo‐classes, attribute
4. Elements, pseudo‐elements

Przykład

.button {
    font‐size: 20px;
    color: white;
    background‐color: blue;
}

nav#nav div.pull-right .button {
    background‐color: green;
}

a {
    background‐color: purple;
}

#nav a.button:hover {
    background‐color: tomato;
}

Wszystkie powyższe deklaracje mają takie samo znaczenie i pochodzą od autora. Kolor tła elementu .button będzie wynikał z obliczenia specyficzności każdej z deklaracji. Obliczenie wykonywane jest dla każdej z czterech kategorii.

|n|inline|IDs|classes/pseudo-classes/attribute|elements/pseudo-elements|
|1|0|0|1|0|
|1|0|1|2|2|
|1|0|0|0|1|
|1|0|1|2|1|

Najbardziej specyficzna więc jest deklaracja (2). Wartością atrybutu background‐color będzie więc green.

Kolejność (ang. source order)

Jeżeli po sprawdzeniu znaczenia (ang. importance) oraz szczegółowości (ang. specificity) nadal więcej niż jedna deklaracja odnosi się do elementu to o zastosowanej deklaracji decyduje kolejność (ang. source order).

Ostatnia deklaracja w kodzie nadpisuje wszystkie wcześniejsze.

Podsumowanie

1. Najwyższy priorytet maja deklaracje z dyrektywą !important.
2. Style inline mają wyższy priorytet od styli pochodzących z zewnątrz.
3. Selektor zawierający 1 ID jest bardziej szczegółowy niż selektor składający się z 1000 klas.
4. Selektor uniwersalny * nie posiada żadnej wartości specyficznej (0, 0, 0, 0).
5. Należy polegać na szczegółowości selektorów, a nie na ich kolejności.
6. Kolejność arkuszy stylów jest ważna w przypadku wykorzystania arkuszy z innych źródeł.