Ich werde diesen Sommer einige Vorträge über Pseudo-Elemente und all die tollen Dinge halten, die man damit machen kann. Eines der coolen Dinge daran ist, dass die Browserunterstützung tatsächlich ziemlich gut ist – viel besser als bei manchen CSS3-Sachen. Und tatsächlich kann man damit auch einige CSS3-Sachen nachbilden (wie z.B. mehrere Hintergründe, irgendwie)
Ich wollte eine Browserkompatibilitätstabelle erstellen, damit klar ersichtlich ist, welche Art von Unterstützung Sie erhalten, wenn Sie die Pseudo-Elemente :before und :after verwenden. Meine Recherche basierte hauptsächlich auf dieser Schnell-Demo-Seite. Ich habe diese Seite in Browsern angesehen, die ich selbst ausführen kann, sie durch BrowserShots laufen lassen und im schlimmsten Fall die Dokumentation für ältere Browser nachgeschlagen.
|
3.5 und höher | Unterstützt Bonus: Firefox 4 kann sie animieren |
|---|---|---|
| 3.0 und niedriger | Teilweise Unterstützung Unterstützt keine Positionierung oder das Floaten der Elemente. |
|
|
Getestet: 4 und höher Angeblich: 1.3 und höher |
Unterstützt |
|
Alle Versionen | Unterstützt |
|
6 (Doku) und höher | Unterstützt |
|
9 und höher | Unterstützt |
| 8 | Teilweise Unterstützung z-index wird nicht beachtet, muss einen Doctyp verwenden, muss einen :hover-Zustand deklarieren, wenn :hover:after/:hover:before verwendet wird |
|
| 7 und niedriger | Nicht unterstützt |
Support-Level
Betrachten wir drei verschiedene Datenquellen. Die angegebenen Prozentsätze werden (Juni 2011) aus dem letzten Monatsbesuchern berechnet, indem die Prozentsätze der Besucher aus jeder Version jedes Browsers, der Pseudo-Elemente unterstützt, summiert werden.
| W3Schools Browsernutzungsdaten | 91.9% |
| CSS-Tricks (über meine Google Analytics) | 97% |
| StatCounter | 84.8% |
Muss aktualisiert werden…
Wenn jemand Zugriff auf ältere Browser hat und testen kann, wäre das großartig.
- Ich habe nur Beweise dafür, dass Safari 4+ funktioniert, aber Dokumentationen gesehen, die 1.3+ unterstützen.
- Ich habe nur Beweise dafür, dass Opera 7+ funktioniert, aber Dokumentationen gesehen, die 6 unterstützen. Könnte sogar noch weiter zurückgehen.
- Weitere Eigenheiten, die noch nicht erwähnt wurden…
Danke fürs Teilen. Ich mag diese Funktion von CSS wirklich und habe sie auf eine meiner Meinung nach sehr coole Weise genutzt, um sehr semantischen Code zu erstellen.
Ich wollte eine kommagetrennte Liste mit einem Punkt am Ende der Liste haben. Listen in HTML sollten in ul oder ol mit li-Kindern formatiert werden. Beides habe ich mit der :after-Pseudoklasse erreicht
ul li:after { content: “, “; display: inline; padding-right: 5px; }
ul li:last-child:after { content: “.”; }
Das können Sie hier in Aktion sehen
http://u.milesplit.com/meets/78374
Was ist der Unterschied zwischen :before / :after und ::before / ::after?
Ich weiß nicht, woher ich das Doppelkreuz bekommen habe, aber es funktioniert immer noch gut auf meinen Seiten. Ich habe meinen Code bereits auf das Standardformat :before und :after geändert, bin aber neugierig, warum es vorher nicht in die Hose gegangen ist.
Gute Frage.
Doppelkreuz ist der offizielle Weg, dies zu tun. Es dient zur Unterscheidung von Pseudo-Elementen und Pseudo-Selektoren. Zum Beispiel, wenn Sie etwas zur Seite hinzufügen, das noch nicht da ist, oder etwas auswählen, das kein "echtes" HTML-Element ist.
Das Problem ist, dass IE 8 (glaube ich) Doppelkreuz-Selektoren einfach ignoriert, daher muss man Einzelkreuze verwenden, damit es funktioniert. Und alle Browser UNTERSTÜTZEN AUCH Einzelkreuze, also kann man genauso gut Einzelkreuze verwenden.
Vor CSS 3 wurden Einzelkreuze sowohl für Pseudo-Elemente als auch für Pseudo-Selektoren verwendet. CSS 3 unterscheidet zwischen beidem durch die Verwendung von Doppel- und Einzelkreuzen. Doppelkreuze sind für Pseudo-Elemente zu verwenden, während Einzelkreuze für Pseudo-Selektoren zu verwenden sind.
Louis Lazaris hat einen tollen Artikel über die Verwendung von Doppel- und Einzelkreuzen. http://www.impressivewebs.com/before-after-css3/
Wenn Sie die Kommentare zu diesem Artikel lesen, hat Stephen ein schönes Beispiel für den Unterschied zwischen Pseudo-Elementen und Pseudo-Selektoren gepostet.
Ich habe mich in letzter Zeit viel mit Pseudo-Elementen beschäftigt, und diese Tabelle ist ein großartiger Fund!
Ihr könntet an diesem jQuery-Plugin von Luke Lutman interessiert sein, das ":before" und ":after" in IE "unterstützen" soll.
Ich habe es noch nicht getestet, kann es also nicht befürworten, aber vielleicht hilft das bei der Verwendung in IE 7.
IE7 ist wirklich das Einzige, was mich davon abhält, Pseudo-Elemente in kommerziellen Websites zu verwenden.
Ich bin neugierig, ob jemand Vorschläge für ein gracefully degradation für Pseudo-Elemente in IE 7 hat?
Ha! Also hatte ich mit den Doppelkreuzen Recht, ich ändere es dann zurück. Danke für die Kommentare, Leute.
Ich verstehe nicht, warum das Doppelkreuzformat überhaupt existiert. Warum müssen wir zwischen Pseudo-Elementen und Pseudo-Selektoren unterscheiden?
Ich wollte nur erwähnen, dass Pseudo-Elemente in WebKit keine CSS-Übergänge unterstützen, während sie in Firefox 4 unterstützt werden. Ich habe das aber seit Januar nicht mehr wirklich überprüft, vielleicht hat sich also etwas geändert.
Mir zuvorgekommen!
Immer noch keine Unterstützung dafür in WebKit. Ich hoffe, sie implementieren es bald, da es einem ermöglicht, ziemlich coole Sachen zu machen, wie das Überblenden zwischen mehreren Hintergrundbildern auf einem einzigen Element usw.
Korrekt. Es ist nur Firefox 4. Es wurden jedoch Fehler für alle anderen Browser gemeldet. Ich habe fast das Gefühl, es ist gravierend genug, um "Teilweise Unterstützung" aufzuführen, aber vorerst werde ich es als Bonus für Firefox 4 auflisten.
Danke. Ich habe mich verrückt gemacht und mich gefragt, warum CSS-Übergänge in Webkit-Browsern nicht funktionierten.
Ist es auch immer noch nicht möglich, CSS-Gradients zu überblenden?
Andere seltsame Dinge – CSS-rotierte Elemente sehen auf dem iPhone zackig oder abgehackt aus, aber in Safari einwandfrei.
Beim Anwenden von Textschatten auf Text (offensichtlich) erscheinen Schriften in Chrome 11.x für Mac viel dünner.
Sie können background-position überblenden, und wenn es sich um ein Gradient handelt, ist es ein background-image, sodass Sie sie zumindest bewegen können. Ich bin mir nicht sicher, ob Sie die verwendeten Farben überblenden können. Machen Sie einen reduzierten Testfall!
Ich frage mich nur… warum brauchen wir Tests für solch alte Browser? Nutzt irgendjemand wirklich Safari 1.0?
Wahrscheinlich nicht, aber ich möchte mir wirklich die Gewohnheit aneignen, SEHR SPEZIFISCH zu sein, was die Browserunterstützung für Dinge angeht. Wenn Sie einen Blog-Beitrag schreiben oder über etwas sprechen und einfach sagen: "Funktioniert in modernen Browsern", dann hilft uns das nicht sehr.
Ja, Opera kann jetzt auch Gradients, aber nur lineare und nur ab Version 11.10, und nur mit einem Vendor-Präfix. Das sind viele Insider-Kenntnisse, über die Webdesigner Bescheid wissen und auf dem Laufenden bleiben sollten.
Es macht es auch zu einer zeitloseren Ressource. Wohin werden Sie nächstes Mal gehen, wenn Sie die Browserunterstützung für Pseudo-Elemente kennen müssen? =)
Ich bin froh, dass es eine großartige Unterstützung für diese Pseudo-Elemente gibt, da ich sie bereits auf meinen Websites für einige großartige Effekte verwende.
Eine Methode, die ich verwende, ist ein Bild-Rollover.
Ich habe mehrere Bilder gleicher Größe, die in Anker-Tags eingeschlossen sind. Dann ziele ich auf das Anker-Tag mit
a:hover:after
Jedes Bild hat einen Rollover mit einem transparenten Bild und etwas Text.
Nicht, dass es gesagt werden müsste, aber "Scheiß auf IE7!" Hält mich davon ab, diese zu benutzen : (
Großartige Zusammenfassung! Weiß jemand, ob es eine Möglichkeit gibt, den von den Pseudo-Elementen generierten Inhalt in Firebug/Entwicklertools usw. zu sehen? Ich bin neulich bei einem Problem mit dem Code eines anderen erwischt worden und konnte nicht herausfinden, woher einige Inhalte kamen. Es stellte sich heraus, dass es sich um ein Pseudo-Element handelte.
Mit Entwicklertools (WebKit) können Sie, wenn Sie das Element auswählen, zu dem sie gehören, die CSS dafür sehen und ändern. Aber Sie können das Pseudo-Element nicht direkt auswählen. Alle Dev-Tools-Projekte sind sich dieses Art von Bug bewusst.
Hmm, das ist mir nie aufgefallen, dass IE7 sie nicht unterstützt.
Glücklicherweise habe ich sie nur für eine relativ kleine Website verwendet, aber um IE7-Benutzern eine anständige Website zu bieten (ich habe einfach Before/After-Pseudo-Elemente verwendet, um obere und untere Grafiken zu einigen Seitenleisten hinzuzufügen), muss ich ihnen offenbar eine schöne Fallback-Lösung bieten.
Um ein wenig pedantisch zu sein (weil ich es selbst immer wieder falsch mache), denke ich technisch gesehen ist : eine Pseudoklasse und :: ein Pseudo-Element.
Aber ja… wen kümmert's. haha. Lesezeichen gesetzt.
Ja, das habe ich oben schon erwähnt. Im Grunde befürworte ich die Verwendung von Einzelkreuzen, weil alle Browser das unterstützen und einige (IE 8) nur das unterstützen.
Firefox 4.0 unter Windows und Linux hat einen Fehler mit :before und :after, daher ist es derzeit nur teilweise unterstützt.
https://bugzilla.mozilla.org/show_bug.cgi?id=646053
Ein cooler Trick, den ich :before und :after für verwende, ist, Facebook mir detaillierter mitzuteilen, wann ein Update gepostet wurde…
abbr.timestamp:before { content: attr(title) ” [“; }
abbr.timestamp:after { content:”]”; }
Wow Chris, diese Tabelle kam gerade richtig. Habe sie gerade als Lesezeichen gespeichert. Jetzt teile ich sie mit Freunden. Großartig, einfach großartig.
Ich war ziemlich überrascht, dass Selectivizr keine Funktionalität für :before und :after hinzufügt, habe aber später gelesen, dass dies auf DOM-Manipulationen zurückzuführen ist, die Konflikte verursachen (http://bit.ly/i3liNQ)
Kennt jemand Lösungen für die Verwendung von :before und :after in älteren Browsern oder bleiben wir vorerst bei progressiver Verbesserung?
Ich habe einige alte Browser überprüft, um die Unterstützung für diese Pseudo-Elemente zu testen.
Opera 3.0: Keine Unterstützung (eigentlich für irgendein CSS)
Opera 3.6: Keine Unterstützung
Opera 5.02: Unterstützung für sowohl :before als auch :after
Netscape 4.79: Keine Unterstützung (es stürzt ab)
Netscape 6.01: Teilweise Unterstützung (p:before und p:after funktionieren, während div:before und div:after nicht funktionierten – stürzte nach einer Weile ab)
Netscape 7.01: Teilweise Unterstützung (wie 6.01, aber stürzt nicht ab)
SeaMonkey 1.0: Teilweise Unterstützung (wie Netscape 7.01)
Es ist erstaunlich, wie Netscape 6.01 (veröffentlicht 1998), Opera 5.02 (veröffentlicht 2000) und SeaMonkey 1.0 (veröffentlicht 2005) dies – sogar teilweise – unterstützten, während Internet Explorer 7 (veröffentlicht 2006) dies nicht tat.
CSS3-Übergänge auf Pseudo-Elementen scheinen bisher nur in FF4 zu funktionieren…
Hier ist eine schnelle Demo, die Button-Glanz beim Hover animiert: http://j.mp/l70BVq
Ich bin neugierig, ob jemand andere (bessere?) Ressourcen für Browsernutzungslevel hat? Chris, Sie erwähnten in Screencast #98, dass Sie den Link in diesem Beitrag aktualisieren würden.
Zum Zeitpunkt dieses Kommentars habe ich den obigen Artikel aktualisiert, um drei Quellen aufzuführen.
http://www.quirksmode.org/css/contents.html#t15 Hier ist eine weitere nützliche Tabelle, die die Unterstützung für diese :: Pseudo-Selektoren zeigt.
Wie mache ich ":after" ":before" Pseudo-Selektoren kompatibel mit dem IE-Browser? In IE 8 funktioniert es nicht..
Hallo **Chris Coyier**, ich habe Probleme mit IE 8. Ich füge das :before Pseudo-Element zu einem Anker hinzu, alle Browser funktionieren perfekt, aber nicht in IE8. Gibt es eine andere großartige Möglichkeit, dieses Problem zu lösen?
a:before{
content: ‘+’;
background:url(‘images/bg-hover.png’) repeat left top;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
}
IE 9: Element muss einen Hintergrund oder Inhalt haben, nicht nur einen leeren String.