wake-up-neo.com

Soll ich für Pseudoelemente die Doppel- oder Einfach-Doppelpunktnotation verwenden?

Da IE7 und IE8 die Doppelpunktnotation für Pseudoelemente nicht unterstützen (z. B. ::after oder ::first-letter), und da moderne Browser die Ein-Doppelpunkt-Notation unterstützen (z. B. :after) Soll ich aus Gründen der Abwärtskompatibilität nur die Ein-Doppelpunkt-Notation verwenden und, wenn der Marktanteil von IE8 auf ein vernachlässigbares Maß abfällt, zurückgehen und in meiner Codebasis suchen/ersetzen? Oder sollte ich beides einschließen:

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

Double alleine zu benutzen, scheint dumm, wenn ich mich um IE8-Benutzer (die armen Lieben) kümmere.

106
jinglesthula

Verwenden Sie nicht beides in Kombination mit einem Komma. Ein CSS 2.1-kompatibler (nicht CSS3-fähiger) Benutzeragent ignoriert die gesamte Regel:

Wenn ein Benutzerprogramm den Selektor nicht analysieren kann (d. H., Es ist kein gültiges CSS 2.1), muss es den Selektor und den folgenden Deklarationsblock (falls vorhanden) ebenfalls ignorieren.

CSS 2.1 gibt dem Komma (,) in Selektoren eine besondere Bedeutung. Da jedoch nicht bekannt ist, ob das Komma in zukünftigen CSS-Aktualisierungen eine andere Bedeutung haben kann, sollte die gesamte Anweisung ignoriert werden, wenn irgendwo im Selektor ein Fehler auftritt, auch wenn der Rest des Selektors in CSS 2.1 möglicherweise vernünftig aussieht.

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

Sie könnten jedoch verwenden

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

Auf der anderen Seite ist dies ausführlicher als nötig; Im Moment können Sie die Ein-Doppelpunkt-Notation beibehalten.

69

Von CSS3 Selectors REC :

Diese :: Notation wird durch das aktuelle Dokument eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen herzustellen.
Um mit vorhandenen Stylesheets kompatibel zu sein, müssen Benutzerprogramme auch die vorherige Ein-Doppelpunkt-Notation für Pseudoelemente akzeptieren, die in den CSS-Stufen 1 und 2 eingeführt wurden (nämlich: erste Zeile,: erster Buchstabe,: vorher und: nachher).
Diese Kompatibilität ist für die in dieser Spezifikation eingeführten neuen Pseudoelemente nicht zulässig.

Es scheint sicher zu sein, dass Sie (nur) die Ein-Doppelpunkt-Notation für Pseudoelemente verwenden, die bereits in CSS2.1 vorhanden waren, da UAs abwärtskompatibel sein müssen.

61
FelipeAls

Ich bin absolut anderer Meinung als @mddw und @FelipeAls, was die Verwendung eines Doppelpunkts als "sicher" anbelangt.

Diese "Ich werde es benutzen, obwohl es veraltet ist" -Mentalität ist genau der Grund, warum browserbasierte Technologien so langsam vorankommen und Fortschritte machen.

JA, wir möchten die Kompatibilität mit alten Standards aufrechterhalten. Seien wir ehrlich, es ist die Hand, die uns gegeben wurde. ABER das bedeutet nicht, dass Sie eine Entschuldigung haben, faul in Ihrer Entwicklung zu sein, indem Sie die aktuellen Standards zugunsten veralteter Standards ignorieren.

Unser Ziel sollte es sein, die Einhaltung der aktuellen Standards aufrechtzuerhalten und gleichzeitig so viel wie möglich vom alten Standard zu unterstützen.

Wenn Pseudoelemente verwenden : in CSS2 und :: In CSS3 sollten wir nicht das eine oder andere verwenden. wir sollten beide verwenden.

Um die ursprüngliche Frage vollständig zu beantworten, wird im Folgenden die Methode am besten geeignet zur Unterstützung der aktuellsten Implementierung von CSS (Version 3) beschrieben, wobei die bisherige Unterstützung für Version 2 beibehalten wird.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
21
Joshua Burns

Es wird jedoch immer beliebter, polyfills sowohl für neues Javascript als auch für CSS zu verwenden. Daher möchten Sie möglicherweise nur das neuere Doppelpunkt (::) und pflegen Sie eine Polyfill für ältere Browser, sofern dies erforderlich ist.

2
zpr

Laut Browserstatistik ist IE 8.0 in den USA im letzten Jahr auf unter 1% gefallen.

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

Im Dezember 2015 hatte IE 8.0 2.92% des Marktes. Im Dezember 2016 hatte IE 8.0 . 77% des Marktes.

In diesem Fall wäre es nicht die schlechteste Idee, die Unterstützung alter Versionen von IE einzustellen und :: für Pseudo-Elemente zu verwenden.

1
DR01D

Das Einschließen beider Notationen ist sicher sicherer, aber ich kann keinen Browser sehen, der die einzelne Notation für eine lange Zeit fallen lässt, so dass nur eine einzige in Ordnung ist (es ist gültiges CSS2).

Ich persönlich benutze nur die einfache Doppelpunktnotation, meistens aus Gewohnheit.

0
mddw