Zgodność ze specyfikacją

Podcast CSS – 003: Szczegółowość

Załóżmy, że pracujesz z następującym kodem HTML i CSS:

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

button {
  color: red;
}

.branding {
  color: blue;
}

Chodzi tu o 2 konkurujące reguły. Przycisk jednego z nich będzie czerwony, a drugi – niebieski. Która reguła jest stosowana do elementu? Algorytm specyfikacji CSS dotyczący szczegółowości jest kluczem do zrozumienia, w jaki sposób CSS decyduje o tym, jak konkurują ze sobą reguły.

Szczegółowość to jeden z 4 etapów kaskady, co omówiliśmy w poprzednim module – kaskadzie.

Ocena specyficzności

Każda reguła selektora jest punktowana. Możesz wyobrazić sobie, że poziom szczegółowości jest uzależniony od łącznego wyniku, a każdy typ selektora zdobywa punkty. Wygrywa selektor z najwyższym wynikiem.

W autentycznych projektach jest to precyzyjne, Chodzi o to, aby upewnić się, że reguły CSS, które zamierzasz zastosować, w rzeczywistości mają zastosowanie. przy jednoczesnym utrzymaniu niskich wyników, aby uniknąć złożoności. Wynik powinien być na tyle wysoki, ile jest potrzebny, zamiast dążyć do uzyskania jak najwyższego wyniku. W przyszłości konieczne może być zastosowanie bardziej istotnych elementów CSS. Jeśli postarasz się zdobyć najlepszy wynik, będzie to bardzo trudne.

Wynik dla każdego typu selektora

Za każdy typ selektora punkty są naliczane punkty. Musisz dodać wszystkie te punkty, aby obliczyć ogólną dokładność selektora.

Selektor uniwersalny

selektor uniwersalny (*), nie ma szczegółowości i otrzymuje 0 punktów. Oznacza to, że reguła, która ma co najmniej 1 punkt, zastąpi ją

* {
  color: red;
}

Element lub pseudoelementowy selektor

element (typ), lub pseudoelement selektor uzyskuje 1 punkt specyficzności .

Wybór typu

div {
  color: red;
}

Selektor pseudoelementów

::selection {
  color: red;
}

Selektor klasy, pseudoklasy lub atrybutu

Zajęcia, pseudo-class lub Selektor atrybutu uzyskuje 10 punktów dokładności.

Selektor zajęć

.my-class {
  color: red;
}

Selektor pseudoklasy

:hover {
  color: red;
}

Selektor atrybutów

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

:not() pseudoklasa nie wnosi nic do obliczania szczegółowości. Selektory przekazywane jako argumenty są jednak uwzględniane przy obliczaniu szczegółowości.

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

Ta próbka będzie miała 11 punktów szczegółowości bo ma 1 selektor typu (div) i jedną klasę wewnątrz obiektu :not().

Selektor identyfikatorów

identyfikator selektor uzyskuje 100 punktów dokładności, o ile używasz selektora identyfikatora (#myID), a nie selektora atrybutu ([id="myID"]).

#myID {
  color: red;
}

Atrybut stylu wbudowanego

kod CSS zastosowany bezpośrednio do atrybutu style elementu HTML; uzyskuje wynik w zakresie szczegółowości wynoszący 1000 punktów. Oznacza to, że aby zastąpić je w CSS, musisz stworzyć specyficzny selektor.

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

!important reguła

I ostatnio, !important na końcu wartości CSS uzyskuje wynik szczegółowości wynoszący 10 000 punktów. Jest to najwyższy poziom szczegółowości, jaki można uzyskać dla pojedynczego produktu.

reguła !important jest stosowana do właściwości CSS, więc wszystkie elementy w regule ogólnej (selektor i właściwości) nie otrzymują tego samego wyniku precyzji.

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ocenie dokładności

Jaki jest wynik precyzji atrybutu a[href="#"]?

1
Wartość a jest warta 1 punkt, a [href="#"] – 10 punktów.
5
Spróbuj jeszcze raz.
11
Gra a jest warta 1 punkt, a [href="#"] – 10 punktów, co daje 11 punktów.

Szczegółowość w kontekście

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

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

Ten link zawiera 2 zajęcia. Dodaj ten kod CSS, aby uzyskać 1 punkt precyzji:

a {
  color: red;
}

odwoływać się do jednej z klas w tej regule, ma teraz 11 szczegółowości:

a.my-class {
  color: green;
}

dodaj do selektora inną klasę, ma teraz 21 szczegółowości:

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

dodaj do selektora atrybut href, ma teraz 31 szczegółowości:

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

Na koniec dodaj do tego wszystko pseudoklasę :hover, selektor kończy się 41 punktami dokładności:

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ocenie dokładności

Który z tych selektorów jest wart 21 punktów?

article > section
Elementy są warte 1 punkt. W selektorze znajdują się 2 elementy, co daje 2 punkty.
article.card.dark
Elementy są warte 1 punkt, a klasy – 10 punktów. Mają 2 klasy i 1 element, więc selektor ma wartość 21 punktów.
article:hover a[href]
Elementy są warte 1 punkt, pseudoklasy i atrybuty – 10 punktów, 2 punkty za elementy oraz 20 punktów za atrybuty i klasy, co sprawia, że wartość tego selektora to 22 punkty.

Wizualizacja szczegółowości

W diagramach i kalkulatorach specyficzności szczegółowość można często przedstawić w następujący sposób:

Diagram prezentujący najmniej konkretne selektory

Grupa po lewej zawiera selektory (id). Druga grupa to selektory klasy, atrybutu i pseudoklasy. Ostatnia grupa to selektory elementów i pseudoelementów.

Ten selektor to 0-4-1:

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat wizualizowania szczegółowości

Który z tych selektorów to 1-2-1?

section#specialty.dark
Ten selektor jest wizualizowany jako 1-1-1.
#specialty:hover li.dark
🎉
[data-state-rad].dark#specialty:hover
Ten selektor jest wizualizowany jako 1-3-0.
li#specialty section.dark
Ten selektor jest wizualizowany jako 1-1-2.

Pragmatyczne zwiększanie szczegółowości

Załóżmy, że mamy usługę porównywania cen, która wygląda tak:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

W przypadku kodu HTML wyglądającego tak:

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

Przycisk ma szare tło. ponieważ drugi selektor uzyskuje 11 punktów dokładności (0-1-1). To dlatego, że ma jeden selektor typu (button), czyli 1 punkt i selektor atrybutu ([onclick]), który wynosi 10 punktów.

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

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

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

button[onclick] {
  background: grey;
}

Przycisk będzie miał niebieskie tło. ponieważ nowy selektor uzyskuje wynik precyzji wynoszący 20 punktów (0-2-0).

Wynik specyficzności dopasowania oznacza, że wygrana jest najnowsza instancja

Na razie pozostańmy przy przykładowym przycisku i zmień CSS na taki:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Przycisk ma szare tło. bo oba selektory mają taki sam wynik specyficzności (0-1-0).

Jeśli przełączysz reguły w kolejności źródłowej, przycisk będzie niebieski.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

To jedyna taka sytuacja, w której wygrywa nowsza usługa porównywania cen. W tym celu musi on pasować do specyfiki innego selektora, który wskazuje ten sam element.

Zasoby