Zgodność ze specyfikacją

Podcast o CSS – 003: specyficzność

Załóżmy, że pracujesz z takim kodem HTML i CSS:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Istnieją dwie konkurujące ze sobą reguły. Jeden przycisk pokoloruje przycisk na czerwony, a drugi na niebieski. Która reguła jest stosowana do elementu? Zapoznanie się z algorytmem specyfikacji CSS dotyczącym specyfiki jest kluczem do zrozumienia, w jaki sposób CSS decyduje o stosunku do reguł konkurujących.

Szczegółowość to jeden z 4 różnych etapów kaskady, które omówiliśmy w ostatnim module, czyli kaskadzie.

Ocena specyficzności

Każda reguła selektora otrzymuje punktację. Szczegółowość można traktować jako całościowy wynik, w ramach którego za każdy rodzaj selektora naliczane są punkty. Wygrywa selektor z najwyższym wynikiem.

W przypadku precyzyjnego projektu równowaga polega na tym, by zagwarantować, że reguły CSS, które spodziewasz się zastosować, faktycznie są stosowane, przy jednoczesnym utrzymywaniu wyników na niskim poziomie, aby uniknąć złożoności. Wynik powinien być maksymalnie wysoki, a nie najwyższy, możliwy do osiągnięcia. W przyszłości konieczne może być zastosowanie naprawdę ważniejszych usług porównywania cen. Jeśli osiągniesz najwyższy wynik, to będzie ciężka praca.

Ocena każdego typu selektora

Punkty są przyznawane za każdy typ selektora. Dodajesz wszystkie te punkty, aby obliczyć ogólną specyficzność selektora.

Selektor uniwersalny

Selektor uniwersalny (*) nie ma specyfiki i otrzymuje 0 punktów. Oznacza to, że każda reguła z co najmniej 1 punktem zastąpi ją

* {
  color: red;
}

Selektor elementu lub pseudoelementu

Selektor elementu (typu) lub pseudoelementu uzyskuje 1 punkt precyzji .

Wybór typu

div {
  color: red;
}

Selektor pseudoelementów

::selection {
  color: red;
}

Selektor klasy, pseudoklasy lub atrybutu

Selektor klasy, pseudoklasy lub atrybutu uzyskuje 10 punktów szczegółowości.

Selektor zajęć

.my-class {
  color: red;
}

Selektor pseudoklasy

:hover {
  color: red;
}

Selektor atrybutu

[href='#'] {
  color: red;
}

Sama pseudoklasa :not() nie wnosi niczego do obliczenia specyfiki. Jednak selektory przekazywane jako argumenty są dodawane do obliczania specyficzności.

div:not(.my-class) {
  color: red;
}

Ten przykład miałby 11 punktów specyficzności, ponieważ ma 1 selektor typu (div) i 1 klasę wewnątrz :not().

Selektor identyfikatora

Selektor identyfikatora zapewnia 100 szczegółów, o ile używany jest selektor identyfikatora (#myID), a nie selektor atrybutu ([id="myID"]).

#myID {
  color: red;
}

Atrybut stylu wbudowanego

CSS zastosowany bezpośrednio do atrybutu style elementu HTML uzyskuje wynik specyficzności wynoszący 1000 punktów. Oznacza to, że aby zastąpić go w CSS, musisz napisać bardzo szczegółowy selektor.

<div style="color: red"></div>

!important reguła

Wreszcie !important na końcu wartości CSS uzyskuje wynik specyficzności wynoszący 10 tys. punktów. Jest to najwyższa szczegółowość, jaką można uzyskać w przypadku pojedynczego produktu.

Reguła !important jest stosowana do właściwości CSS, więc wszystko w regule ogólnej (selektor i właściwości) nie ma takiego samego wyniku specyfikacji.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ocenie szczegółowości

Szczegółowość w kontekście

Szczegółowość każdego selektora pasującego do elementu jest sumowana. Przeanalizuj ten przykładowy kod HTML:

<a class="my-class another-class" href="#">A link</a>

Ten link zawiera 2 zajęcia. Po dodaniu tego kodu CSS uzyskasz 1 punkt precyzji:

a {
  color: red;
}

Odwoływanie się do jednej z klas w tej regule ma teraz 11 punktów precyzji:

a.my-class {
  color: green;
}

Gdy dodasz do selektora kolejną klasę, ma ona teraz 21 szczegółów:

a.my-class.another-class {
  color: rebeccapurple;
}

Dodaj do selektora atrybut href, ma on teraz 31 szczegółów:

a.my-class.another-class[href] {
  color: goldenrod;
}

Na koniec dodaj do tych wszystkich pseudoklasę :hover, co spowoduje uzyskanie 41 szczegółów:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ocenie szczegółowości

Wizualizacja specyficzności

Na diagramach i kalkulatorach specyficzności specyficzność jest często wizualizowana w ten sposób:

Lewa grupa to selektory id. Druga grupa to selektory klasy, atrybutu i pseudoklasy. Ostatnia grupa to selektory elementów i pseudoelementów.

Oto selektor: 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat wizualizacji specyfiki

Pragmatyczne zwiększanie specyficzności

Załóżmy, że mamy taki kod CSS:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Kod HTML wygląda tak:

<button class="my-button" onclick="alert('hello')">Click me</button>

Przycisk ma szare tło, ponieważ drugi selektor uzyskuje 11 punktów szczegółowych (0-1-1). Dzieje się tak, ponieważ ma jeden selektor typu (button), który wynosi 1 punkt i selektor atrybutu ([onclick]), który daje 10 punktów.

Poprzednia reguła – .my-button – otrzymuje 10 punktów (0-1-0), ponieważ ma 1 selektor klasy.

Jeśli chcesz wzmocnić tę regułę, powtórz selektor klasy w ten sposób:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Teraz przycisk będzie miał niebieskie tło, ponieważ nowy selektor ma wynik specyficzności wynoszący 20 punktów (0-2-0).

Wynik specyficzności dopasowania oznacza najnowszą wygraną instancji

Pozostańmy przy przykładowym przycisku i zmieńmy kod CSS na taki:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Przycisk ma szare tło, ponieważ oba selektory mają identyczny wynik specyficzności (0-1-0).

Jeśli zmienisz reguły w kolejności źródłowej, przycisk stanie się niebieski.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Jest to jedyna sytuacja, w której wygrywa nowsza wersja CSS. Aby tak się stało, musi on pasować do specyfiki innego selektora, który jest kierowany na ten sam element.

Zasoby

• Specyfikacja CSS
• Kalkulator specyficzności
• Szczegółowość MDN
• Informacje o specyfikacji CSS
• Inny kalkulator specyficzności