Czy powinienem używać notacji z pojedynczym czy podwójnym dwukropkiem dla pseudoelementów?

108

Ponieważ IE7 i IE8 nie obsługują notacji z podwójnym dwukropkiem dla pseudoelementów (np. ::afterLub ::first-letter), a ponieważ współczesne przeglądarki obsługują notację z pojedynczym dwukropkiem (np. :after) W celu zapewnienia zgodności wstecznej, powinienem używać wyłącznie notacji z pojedynczym dwukropkiem i kiedy Udział w rynku IE8 spadł do znikomego poziomu, cofnąć się i znaleźć / zamienić w mojej bazie kodu? Czy powinienem uwzględnić oba:

.foo:after,
.foo::after { /*styles*/ }

Używanie samego podwójnego wydaje się głupie, jeśli zależy mi na użytkownikach IE8 (biedni kochani).

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element jinglesthula
źródło

Odpowiedzi:

71

Czy nie używać zarówno w połączeniu z przecinkiem. Agent użytkownika zgodny z CSS 2.1 (nie obsługujący CSS3) zignoruje całą regułę:

Gdy agent użytkownika nie może przeanalizować selektora (tj. Nie jest to poprawny CSS 2.1), musi również zignorować selektor i następujący po nim blok deklaracji (jeśli istnieje).

CSS 2.1 nadaje specjalne znaczenie przecinkowi (,) w selektorach. Jednakże, ponieważ nie wiadomo, czy przecinek może nabrać innego znaczenia w przyszłych aktualizacjach CSS, całą instrukcję należy zignorować, jeśli w dowolnym miejscu selektora jest błąd, nawet jeśli reszta selektora może wyglądać rozsądnie w CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

Możesz jednak użyć

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

Z drugiej strony jest to bardziej szczegółowe niż to konieczne; na razie możesz trzymać się notacji z jednym dwukropkiem.

user123444555621
źródło
7
dzięki za dołączenie informacji o przecinku i zignorowaniu. To prawdopodobnie sprawiłoby, że ja (i może inni) drapałem się przez jakiś czas po głowach. Wygląda na to, że najlepszą rzeczą, gdy 99% używanych przeglądarek obsługuje notację z podwójnym dwukropkiem, jest przejście na używanie tego i (ponieważ nikt nie porzuci obsługi pojedynczego dwukropka i nie zepsuje sieci, więc tak naprawdę nie ma nawet sensu późniejszego znajdowania / zastąpienie starego kodu w tym momencie).
jinglesthula
2
To nie jest droga do przodu. Postęp przeglądarki zostanie przymusowo przyspieszony, jeśli ludzie przestaną przechodzić do przedpotopowych, zepsutych i przestarzałych przeglądarek.
Gershom
2
@Gershom Maes: Niestety nie możesz tego powiedzieć. Myślę, że duża część programistów ma taką samą nadzieję, ale tak się nie stanie.
BoltClock
@Gershom Maes we can dream
James Cushing,
1
Myślę, że ważne jest, aby pamiętać, że utrzymywanie zduplikowanych stylów może być problematyczne. Jak zauważa cHao poniżej, zduplikowany kod uwielbia się różnić. Większość deweloperów pewnie
musiałaby
62

Z selektorów CSS3 REC :

This :: notation jest wprowadzona w obecnym dokumencie w celu ustalenia rozróżnienia między pseudoklasami i pseudoelementami.
Aby zachować zgodność z istniejącymi arkuszami stylów, programy użytkownika muszą również akceptować poprzednią notację z dwukropkiem dla pseudoelementów wprowadzonych na poziomach CSS 1 i 2 (a mianowicie: pierwsza linia,: pierwsza litera,: przed i: po).
Ta kompatybilność nie jest dozwolona dla nowych pseudoelementów wprowadzonych w tej specyfikacji.

Wygląda na to, że możesz bezpiecznie używać (tylko) notacji z jednym dwukropkiem dla pseudoelementów, które już istniały w CSS2.1, ponieważ UA muszą być kompatybilne wstecz.

FelipeAls
źródło
1
Dla przypomnienia, tę odpowiedź można równie dobrze oznaczyć jako poprawną. Zapewnia cenną perspektywę, mimo że impulsem dla pierwotnego pytania były w szczególności pseudoelementy przed i po. Dzięki za dodanie.
jinglesthula
Jak doszedłeś do takiego wniosku? Doszedłem do przeciwnego wniosku ... jeśli pojedyncze dwukropki nie będą dozwolone dla nowych pseudoelementów, czy nie powinieneś zacząć używać podwójnych dwukropków, aby nabrać nawyku?
andrewtweber
@andrewtweber w kontekście oryginalnego pytania (IE8) użycie double zepsułoby CSS. To powiedziawszy, w chwili pisania tego tekstu większość witryn prawdopodobnie widzi użycie IE8 na tak niskim poziomie, że pozwala na podwojenie bez znaczących strat. Można polegać na producentach przeglądarek, którzy obsługują pojedynczą notację przez wieczność, ale nie ma nic złego w zmianie nawyków kodowania w tym momencie.
jinglesthula
@andrewtweber +1 dla PO Tak, IE8 miał zostać uwzględniony w 2012 r. i - YMMV - jest nadal w 2015 r. w dużych projektach B2B i podobnych, ale nie w innych projektach internetowych. Obie notacje są całkowicie poprawne dla tych istniejących pseudo. Minifikacja CSS zyska 1 bajt dzięki zastosowaniu notacji z jednym dwukropkiem. Jeśli chcesz zawsze używać jednej notacji, a zabraniać drugiej, cóż, jest to konwencja, którą możesz robić ze swoim zespołem, ale nie jest to REKOMENDACJA.
FelipeAls,
@jinglesthula i Felipe, masz rację, nie zauważyłem daty. Może jednak odpowiedź powinna zostać zaktualizowana, ponieważ to pytanie pojawia się wysoko w wynikach wyszukiwania
andrewtweber
22

Absolutnie nie zgadzam się z @mddw i @FelipeAls, jeśli chodzi o rozważenie użycia jednego dwukropka jako „bezpiecznego”.

Ta mentalność „Będę go używać, mimo że jest przestarzała”, jest dokładnie powodem, dla którego technologie oparte na przeglądarkach są tak powolne w rozwoju i posuwaniu naprzód.

TAK, chcemy zachować zgodność ze starymi standardami. Spójrzmy prawdzie w oczy, to ręka, którą otrzymaliśmy. ALE, nie oznacza to, że masz wymówkę, aby być leniwym w rozwoju, ignorując obecne standardy na rzecz przestarzałych.

Naszym celem powinno być utrzymanie zgodności z obecnymi standardami, przy jednoczesnym wspieraniu jak największej części dotychczasowego standardu.

Jeśli pseudoelementy są używane :w CSS2 i ::CSS3, nie powinniśmy używać jednego ani drugiego; powinniśmy używać obu .

Aby w pełni odpowiedzieć na pierwotnie zadane pytanie, poniżej przedstawiono najbardziej odpowiednią metodę obsługi najnowszej implementacji CSS (wersja 3), przy jednoczesnym zachowaniu starszej obsługi wersji 2.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Joshua Burns
źródło
3
Myślę, że można całkiem bezpiecznie założyć, że dostawcy przeglądarek będą nadal obsługiwać starą notację w nieskończoność ze względu na ilość kodu, który nigdy nie zostanie zaktualizowany, ponieważ chcą, aby ich przeglądarka renderowała się „poprawnie”. Z drugiej strony, myślę, że utrzymywanie oddzielnych kopii stylów podnosi czerwoną flagę DRY. Myślę, że bardziej pragmatyczne niż leniwe jest używanie notacji z pojedynczym dwukropkiem, dopóki nie spadnie udział w rynku IE7. To powiedziawszy, chcę, aby sieć rozwijała się tak samo jak wszyscy!
jinglesthula
9
Jeśli „ absolutnie nie zgadzasz się ” z moją odpowiedzią, to absolutnie nie zgadzasz się ze słowem „ musi” w rekomendacji W3C. „ Naszym celem powinno być utrzymanie zgodności z obecnymi standardami, przy jednoczesnym wspieraniu jak największej części dotychczasowego standardu ” . Jest to, do czego odnosi się ta część REC i wyraźnie stwierdza, że ​​UA nie mogą zmuszać autorów do używania obu notacji i wyjaśnia, jak muszą to zrobić te aplikacje. Zapraszam do kontaktu z listą mailingową CSS WG, jeśli nie zgadzasz się z tym (lub na Twitterze @glazou współprzewodniczącym tej grupy roboczej)
FelipeAls
4
Nie zgadzam się z całą twoją odpowiedzią, a jedynie uznając użycie jednej okrężnicy za „bezpieczne”. kompatybilność nie jest dozwolona dla nowych pseudoelementów oznacza, że ​​wszelkie przyszłe pseudoelementy zostaną zaimplementowane tylko w ::. Zgodnie z twoim podejściem, jednostki zaczną wtedy mieszać i dopasowywać użycie :i ::dla pseudo-elementów. Wyraźne trzymanie się starego standardu (który na razie może być wspierany) jest z natury złą praktyką i należy go unikać, gdy tylko jest to rozsądnie możliwe. Jeśli nie zgadzasz się z tym stwierdzeniem, mamy po prostu różne poglądy.
Joshua Burns
4
Przestrzeganie wyraźnie zgodnego standardu z natury nie jest złą praktyką, jeśli celem jest zgodność. Z drugiej strony, używanie obu prowadzi do powielania stylów - a każdy, kto jest kodowany przez jakiś czas, wie, że zduplikowany kod po prostu lubi się rozchodzić.
cHao,
8
@JoshuaBurns Gdyby mój poprzednik zduplikował ładunek kodu w celu ochrony przed wyimaginowanym przyszłym zagrożeniem, czułbym się znacznie bardziej „spieprzony”.
Mark Amery,
2

Jednak coraz popularniejsze staje się używanie polyfillów zarówno dla nowego javascript, jak i CSS, więc możesz po prostu trzymać się nowszej ::składni dwukropka ( ) i zachować polyfill dla starszych przeglądarek, o ile jest to konieczne.

zpr
źródło
Zasadniczo jest to tylko meta odpowiedź; nie zawiera żadnych przydatnych informacji. Jeśli odpowiedź jest nieaktualna, oceń ją i / lub skomentuj, wskazując na to.
TylerH,
2
dlaczego nie połączyć również takiego polyfillu, abyśmy mogli go używać bez dalszego googlowania?
MightyPork,
4
eh, pierwsza część może być meta, ale myślę, że druga część jest dobrą odpowiedzią. Tam, gdzie pracuję, nie używamy preprocesora i / lub polyfillów, więc zaakceptowana odpowiedź działa dla mnie. Ale dla każdego sklepu lub dewelopera, który używa takich narzędzi, ta odpowiedź jest prawdopodobnie bardziej przydatna.
jinglesthula
1

Co to jest warte według Browser Stats IE 8.0 spadł do mniej niż 1% w USA w ciągu ostatniego roku.

http://gs.statcounter.com/browser-version-partually-combined-market-share/desktop/united-states-of-america/#monthly-201512-201612

W grudniu 2015 r. IE 8.0 posiadała 2,92% rynku. W grudniu 2016 r. IE 8.0 posiadała 0,77% rynku.

Przy takim tempie spadku nie byłoby najgorszym pomysłem zaprzestanie wspierania starszych wersji IE i rozpoczęcie używania :: for Pseudo Elements.

DR01D
źródło
Co jest powodem do świętowania :) Warto też zaznaczyć, że zależy to jeszcze od sytuacji. Jeśli jesteś Amazon, 0,5% Twoich użytkowników to ponad milion klientów, którzy uważają, że Twoja witryna jest zepsuta. Jeśli prowadzisz blog dla 10-osobowego startupu, stawki mogą być inne.
jinglesthula
Zdecydowanie prawda o organizacji takiej jak Amazon. Ale to 0,77% nie jest równomiernie rozłożone w całej populacji. To nieproporcjonalnie starzy ludzie lub ludzie z niewielkimi pieniędzmi, których nie można ulepszyć. Z czysto biznesowego punktu widzenia prawdopodobnie nie są to idealne rynki docelowe. Tak więc dla większości firm grupa 0,77% jest jeszcze mniej znacząca, niż sugeruje ta mała liczba. A ta liczba będzie się tylko zmniejszać.
DR01D
Słuszne uwagi. Inną grupą, w której aktualizacja jest żmudną bitwą, jest rząd, a grupy biznesowe w dużym stopniu polegają na aplikacjach, które będą działać tylko z określoną wersją przeglądarki (choć na szczęście grupy, które są w ten sposób, z czasem będą się zmniejszać). Oby nikt z Was nigdy nie musiał kodować dla takiego klienta :)
jinglesthula
0

Uwzględnienie obu notacji jest z pewnością bezpieczniejsze, ale nie widzę żadnej przeglądarki porzucającej pojedynczą notację przez długi czas, więc tylko jedna notacja będzie w porządku (to prawidłowy CSS2).

Osobiście używam tylko notacji z pojedynczym dwukropkiem, głównie z przyzwyczajenia.

mddw
źródło
1
Jak wyjaśniają inne odpowiedzi, jest to trochę bardziej skomplikowane i istnieją pewne nieoczywiste pułapki (np. Obsługa notacji z pojedynczym dwukropkiem dla pseudoelementów CSS 3 jest jawnym naruszeniem specyfikacji, więc wydaje się rozsądne, aby autorzy CSS nie aby użyć notacji z pojedynczym dwukropkiem dla tych selektorów).
Mark Amery,