Sollte ich für Pseudoelemente die Einzel- oder Doppelpunktnotation verwenden?

108

Da IE7 und IE8 die Doppelpunktnotation für Pseudoelemente (z. B. ::afteroder ::first-letter) nicht unterstützen und moderne Browser :afteraus Gründen der Abwärtskompatibilität die Einzelpunktnotation (z. B. ) unterstützen, sollte ich nur die Einzelpunktnotation verwenden und wann Der Marktanteil von IE8 sinkt auf ein vernachlässigbares Niveau. Zurückgehen und in meiner Codebasis suchen / ersetzen? Oder sollte ich beides einschließen:

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

Double allein zu verwenden scheint albern, wenn ich mich um IE8-Benutzer (die armen Lieben) kümmere.

css internet-explorer-8 css-selectors internet-explorer-7 pseudo-element Jinglesthula
quelle

Antworten:

71

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

Wenn ein Benutzeragent den Selektor nicht analysieren kann (dh CSS 2.1 ist nicht gültig), muss er 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 bei zukünftigen Aktualisierungen von CSS andere Bedeutungen annehmen 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 sich an die Ein-Doppelpunkt-Notation halten.

user123444555621
quelle
7
Vielen Dank, dass Sie die Informationen zum Komma und zum Ignorieren hinzugefügt haben. Das hätte mich (und vielleicht auch andere) wahrscheinlich eine Weile am Kopf kratzen lassen. Sieht so aus, als ob das Beste, wenn 99% der verwendeten Browser die Doppelpunkt-Notation unterstützen, darin besteht, diese zu verwenden (da niemand die Unterstützung für Doppelpunkte fallen lässt und das Web bricht, gibt es nicht einmal einen Punkt in der späteren Suche / an dieser Stelle alten Code ersetzen).
Jinglesthula
2
Dies ist nicht der Weg nach vorne. Der Fortschritt des Browsers wird gewaltsam beschleunigt, wenn die Leute aufhören, sich mit antidiluvianischen, kaputten und veralteten Browsern zu beschäftigen.
Gershom
2
@Gershom Maes: Das kannst du leider nicht sagen. Ich denke, ein großer Teil der Entwickler hofft auf dasselbe, aber es wird einfach nicht passieren.
BoltClock
@Gershom Maes können wir träumen
James Cushing
1
Ich denke, es ist wichtig zu beachten, dass das Beibehalten doppelter Stile problematisch sein kann. Wie cHao weiter unten bemerkt, geht doppelter Code gerne auseinander. Die meisten Entwickler müssen wahrscheinlich ein paar Mal davon gebissen werden, um es
abzuschwören
62

Von CSS3-Selektoren REC :

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

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

FelipeAls
quelle
1
Für die Aufzeichnung könnte diese Antwort ebenso gut als richtig markiert werden. Es bietet eine wertvolle Perspektive, obwohl der Anstoß für die ursprüngliche Frage speziell die Vorher- und Nachher-Pseudoelemente waren. Danke, dass du es hinzugefügt hast.
Jinglesthula
Wie sind Sie zu diesem Schluss gekommen? Ich bin zu dem gegenteiligen Schluss gekommen ... Wenn einzelne Doppelpunkte für neue Pseudoelemente nicht zulässig sind, sollten Sie dann nicht anfangen, doppelte Doppelpunkte zu verwenden, um sich daran zu gewöhnen?
Andrewwweber
@andrewtweber im Kontext der ursprünglichen Frage (IE8) mit double würde das CSS brechen. Zum jetzigen Zeitpunkt sehen die meisten Websites die IE8-Nutzung wahrscheinlich auf einem so niedrigen Niveau, dass eine Verdoppelung ohne nennenswerte Auswirkungen möglich ist. Browser-Anbieter können sich darauf verlassen, dass sie die einzelne Notation auf Dauer unterstützen, aber an dieser Stelle ist nichts Falsches daran, die Codierungsgewohnheiten zu ändern.
Jinglesthula
@andrewtweber +1 für OP Yep, IE8 sollte 2012 berücksichtigt werden und - YMMV - ist noch 2015 in großen B2B-Projekten und ähnlich, aber nicht in anderen Webprojekten. Beide Notationen sind für diese vorhandenen Pseudos vollkommen gültig. Die CSS-Minimierung erhält 1 Byte unter Verwendung der Ein-Doppelpunkt-Notation. Wenn Sie immer eine Notation verwenden und die andere verbieten möchten, können Sie dies mit Ihrem Team völlig frei tun, aber es ist keine Empfehlung.
FelipeAls
@jinglesthula und Felipe, du hast recht, ich habe das Datum nicht bemerkt. Vielleicht sollte die Antwort jedoch aktualisiert werden, da diese Frage in den Suchergebnissen hoch
auftaucht
22

Ich bin absolut anderer Meinung als @mddw und @FelipeAls, wenn es darum geht, die Verwendung eines Doppelpunkts als "sicher" zu betrachten.

Diese "Ich werde es verwenden, 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 beibehalten. Seien wir ehrlich, es ist die Hand, die uns gegeben wurde. ABER dies bedeutet nicht, dass Sie eine Entschuldigung dafür haben, in Ihrer Entwicklung faul 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 in CSS2 und ::in CSS3 verwendet werden, sollten wir nicht das eine oder andere verwenden. wir sollten beide verwenden .

Um die ursprünglich gestellte Frage vollständig zu beantworten, ist die folgende Methode am besten geeignet , um die aktuellste Implementierung von CSS (Version 3) zu unterstützen und gleichzeitig die Legacy-Unterstützung für Version 2 beizubehalten.

.foo:after {
  /* styles */
}
.foo::after {
  /* same styles as above. */
}
Joshua Burns
quelle
3
Ich denke, es ist ziemlich sicher anzunehmen, dass Browser-Anbieter die alte Notation weiterhin auf unbestimmte Zeit unterstützen, da die Menge an Code, die realistischerweise nie aktualisiert wird, von ihrem Browser "korrekt" gerendert werden soll. Auf der anderen Seite wird die DRY-rote Fahne ausgelöst, wenn separate Kopien der Stile beibehalten werden. Ich denke, es ist eher pragmatisch als faul, die Ein-Doppelpunkt-Notation zu verwenden, bis der Marktanteil von IE7 abnimmt. Trotzdem möchte ich, dass sich das Web so weit wie jeder andere weiterentwickelt!
Jinglesthula
9
Wenn Sie mit meiner Antwort " absolut nicht einverstanden " sind, dann sind Sie mit dem Wort " Muss" in einer W3C-Empfehlung absolut nicht einverstanden. " Unser Ziel sollte es sein, die Einhaltung der aktuellen Standards aufrechtzuerhalten und gleichzeitig so viel wie möglich vom Legacy-Standard zu unterstützen. " Dies wird in diesem Teil der REC angesprochen, und es wird ausdrücklich darauf hingewiesen, dass UAs Autoren nicht zwingen dürfen, beide Notationen zu verwenden und erklärt, wie dies von diesen UAs getan werden muss. Sie können sich gerne an die CSS WG-Mailingliste wenden, wenn Sie damit nicht einverstanden sind (oder auf Twitter @glazou, Co-Vorsitzender dieser Arbeitsgruppe)
FelipeAls
4
Ich bin mit Ihrer gesamten Antwort nicht einverstanden, nur was die Verwendung eines einzelnen Doppelpunkts als "sicher" betrifft. Kompatibilität für die neuen Pseudoelemente ist nicht zulässig , dh zukünftige Pseudoelemente werden nur in implementiert ::. Entsprechend Ihrem Ansatz beginnen Einzelpersonen dann, die Verwendung von :und ::für Pseudoelemente zu mischen und anzupassen. Die explizite Einhaltung des alten Standards (der vorerst unterstützt werden kann) ist von Natur aus eine schlechte Praxis und sollte nach Möglichkeit vermieden werden. Wenn Sie mit dieser Aussage nicht einverstanden sind, vertreten wir einfach unterschiedliche Ansichten.
Joshua Burns
4
Die Einhaltung eines explizit kompatiblen Standards ist von Natur aus keine schlechte Praxis, wenn Kompatibilität ein Ziel ist. Auf der anderen Seite führt die Verwendung beider zu doppelten Stilen - und wie jeder, der eine Weile codiert hat, weiß, liebt es doppelter Code, sich zu unterscheiden.
CHao
8
@JoshuaBurns Wenn mein Vorgänger eine Menge Code dupliziert hätte, um sich vor einer imaginären zukünftigen Bedrohung zu schützen, würde ich mich deutlich "beschissener" fühlen.
Mark Amery
2

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 die neuere Double-Colon ( ::) -Syntax verwenden und eine Polyfill für ältere Browser beibehalten, sofern dies erforderlich ist.

zpr
quelle
Dies ist im Wesentlichen nur eine Meta-Antwort; Es liefert keine nützlichen Informationen. Wenn eine Antwort veraltet ist, stimmen Sie sie ab und / oder kommentieren Sie sie, indem Sie darauf hinweisen.
TylerH
2
Warum nicht auch eine solche Polyfüllung verknüpfen, damit wir sie ohne weiteres googeln verwenden können?
MightyPork
4
eh, der erste Teil mag meta sein, aber ich denke, der zweite Teil ist eine gute Antwort. Wo ich arbeite, verwenden wir keinen Präprozessor und / oder Polyfills, daher funktioniert die akzeptierte Antwort für mich. Aber für jeden Shop oder Entwickler, der solche Tools verwendet, ist diese Antwort wahrscheinlich nützlicher.
Jinglesthula
1

Für das, was es laut Browser Stats wert ist, ist IE 8.0 in den USA im letzten Jahr auf weniger als 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 einen Marktanteil von 2,92% . Im Dezember 2016 hatte IE 8.0 Marktanteil von 0,77% .

Bei dieser Abnahmerate wäre es nicht die schlechteste Idee, alte IE-Versionen nicht mehr zu unterstützen und :: for Pseudo Elements zu verwenden.

DR01D
quelle
Welches ist etwas zu feiern :) Es ist auch erwähnenswert, dass es noch von der Situation abhängt. Wenn Sie Amazon sind, entsprechen 0,5% Ihrer Benutzer mehr als einer Million Kunden, die glauben, dass Ihre Website beschädigt ist. Wenn Sie ein Blog für ein 10-Personen-Startup erstellen, können die Einsätze unterschiedlich sein.
Jinglesthula
Auf jeden Fall wahr für eine Organisation wie Amazon. Aber diese 0,77% sind nicht gleichmäßig über die gesamte Bevölkerung verteilt. Es sind unverhältnismäßig alte Leute oder Leute mit wenig Geld, die nicht upgraden können. Aus rein geschäftlicher Sicht sind dies wahrscheinlich keine idealen Zielmärkte. Für die meisten Unternehmen ist die 0,77% -Gruppe sogar noch weniger bedeutend als diese kleine Zahl vermuten lässt. Und diese Zahl wird nur kleiner.
DR01D
Gute Argumente. Eine andere Gruppe, in der das Upgrade ein harter Kampf ist, ist die Regierung, und Unternehmensgruppen verlassen sich stark auf Apps, die nur mit einer bestimmten Browserversion funktionieren (obwohl zum Glück auch Gruppen, die auf diese Weise funktionieren, mit der Zeit abnehmen). Möge keiner von euch jemals für einen solchen Client
codieren müssen
0

Das Einfügen beider Notationen ist sicherlich sicherer, aber ich kann keinen Browser sehen, der die einzelne Notation für eine lange Zeit löscht, sodass nur eine einzige in Ordnung ist (es ist gültiges CSS2.)

Persönlich verwende ich nur die Einzelpunktnotation, meistens aus Gewohnheit.

mddw
quelle
1
Wie die anderen Antworten deutlich machen, ist es etwas komplizierter und es gibt einige nicht offensichtliche Fallen (z. B. ist die Unterstützung der Ein-Doppelpunkt-Notation für CSS 3-Pseudoelemente eine explizite Verletzung der Spezifikation, daher scheint es für CSS-Autoren nicht sinnvoll zu sein um die Einzelpunktnotation für diese Selektoren zu verwenden).
Mark Amery