pisownia pseudo-elementy pseudo-klasy css ach te internety Lachlan Donald

:before, czy może jednak ::before…?

To jak – znasz odpowiedź? Która wersja jest poprawna: :before, czy ::before? Może obie…?


Bez zbędnych ceregieli przejdźmy do konkretów.

Poprawna wersja to ::before. Przynajmniej tak mówi specyfikacja:

A pseudo-class always consists of a „colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

I nieco niżej…

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

Czyli sprawa wydaje się oczywista:

  • :: podwójny dwukropek dla pseudo-elementów
  • : pojedynczy dwukropek dla pseudo-klas.

Nie pamiętasz, co jest czym…?

  • Pseudo-elementy to np.: ::before, ::after, ::first-letter, ::placeholder. Pełną listę znajdziesz tutaj.
  • Pseudo-klasy to np. :hover, :focus, :active, :not(), :nth-child(). Pełną listę znajdziesz tutaj.

I w tym momencie można by skończyć naszą dyskusję, jednakże, jak to we frontendzie bywa…. hola, hola, nie tak szybko.


Powiesz pewnie – ja piszę :before i u mnie działa.

Racja.

Wróćmy zatem jeszcze raz do specyfikacji:

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).

Okazuje się, że cywilizowane przeglądarki muszą wspierać obie składnie. W przeciwnym wypadku połowa internetu by wybuchła. Jednakże nasza specyfikacja wyraźnie zaznacza….

This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Oznacza to, że każdy nowy pseudo-element będzie wymagał użycia podwójnego dwukropka. I tu nie ma wymówek. Dotyczy to np. ::selection przedstawionego w tej specyfikacji (tak, wiem, że to dopiero WD, jednak ::selection ma już piękne wsparcie i z powodzeniem możemy z niego korzystać już dziś). Podobnie sprawa wygląda z pseudo-elementem ::placeholder.


Wobec tego zachęcam Ciebie do poprawnej pisowni. Dosyć mamy słabego kodu w internecie, nie przykładaj do niego swojej ręki. Jeśli tylko nie musisz wspierać IE8 – pisz zgodnie ze specyfikacją. Moja córka powiedziałaby: bądź jak trzecia świnka, buduj domek z drewna, a nie siana.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę