Generierte Inhalte bedeutet, dass Pseudo-Elemente über die ::before und ::after zu der Seite hinzugefügt werden. Die Unterstützung für die Anwendung von Übergängen oder Animationen auf diese in der aktuellen Browserlandschaft ist nicht gut. Ich finde das sehr schade, daher mache ich diesen Blogbeitrag zu meiner dauerhaften Anlaufstelle, um den Fortschritt hier zu verfolgen.
Die Daten in dieser Tabelle stammen aus diesem Testfall.
|
3.6 und darunter | Nicht unterstützt |
|---|---|---|
| 4.0 und höher | Unterstützt | |
|
6.0.5 und darunter | Nicht unterstützt – Fehlerbericht |
| 6.1 und höher | Unterstützt | |
|
25 und darunter | Nicht unterstützt |
| 26 und höher | Unterstützt – behoben am 3. Januar 2013 | |
|
12.16 und darunter | Nicht unterstützt – Konnte nicht darauf zugreifen, aber Divya Manian bestätigte, dass der Bericht existiert und die interne Nummer CORE-29141 hat. |
| 15 und höher | Unterstützt – nach Blink-Konvertierung | |
|
9 und darunter | Nicht unterstützt |
| 10 und höher | Unterstützt – mit einer seltsamen Einschränkung, die hier vermerkt ist. |
Auf Mobilgeräten, auf Safari unter iOS 6.1 und darunter funktionierten sie nicht, aber sie funktionieren auf Safari unter iOS 7.
Warum ist das wichtig?
Pseudo-Elemente sind sehr sehr nützlich. Sie helfen uns im Kampf als Designer, schicke Dinge zu tun und dabei unseren Markup sauber zu halten. Die zusätzlichen Design-Bits, für die Pseudo-Elemente am nützlichsten sind, sind dieselben Design-Bits, für die Übergänge und Animationen nützlich sind. Es gibt dort viel Überschneidung. Zum Zeitpunkt des Schreibens hat das Design dieser Website animierte Pseudo-Elemente im Footer. Die Reihe von Kästen unten haben Logos, die herein-gleiten (oder hineingleiten sollten, wenn dies universell unterstützt würde).
Es gibt keinen Grund, warum Browser dies nicht unterstützen sollten. Ich verstehe alles über Priorisierung, also heule ich nicht herum und beschuldige Browser nicht, noch nicht da zu sein, aber ich hoffe, dieser Artikel hilft ein wenig dabei, es im Blick zu behalten.
Absolut einverstanden, das ist es, was mich bei Jquery hält (nicht dass es schlecht wäre), aber ich würde es viel lieber mit reinem CSS erreichen, um etwas semantisch Sexuelles zu schaffen.
Nur zur Information, jQuery erlaubt Ihnen auch nicht, Pseudo-Elemente zu animieren.
Nicht einmal, wenn Sie ihm eine ID geben und das DOM neu berechnen lassen?
Pseudo-Elemente befinden sich nicht im DOM und können auch keine IDs haben.
Lol @John, wir waren alle schon mal da (denke ich)
Ach, ich arbeite nicht so intensiv mit Pseudo-Elementen. Können Sie mir nicht vorwerfen, einen scheinbar vernünftigen Vorschlag gemacht zu haben ;)
Heh, ja, Entschuldigung, wenn ich für Verwirrung gesorgt habe. Ich bezog mich auf das Hinzufügen von Elementen mit Jquery, um das HTML-Markup sauber zu halten. (append, prepend) dasselbe wie bei Pseudo. Wäre einfach schöner mit CSS.
Bei mir hat nur Firefox funktioniert, die Animation, was WUNDERBAR war, verdammt. Ich habe vielleicht eine dumme Frage, aber wäre es nicht einfacher, das mit dem Canvas-Element zu erreichen?
Hey, ich kenne dieses Problem. Ich habe es mit dieser Lösung behoben
Geben Sie dem DIV Übergänge, setzen Sie ::after oder ::before in das DIV, und das war's. Aber ich hoffe, dass sie das 2011 zum Laufen bringen.
Das bedeutet, dass sich das DIV übergangslos verhält, aber nicht speziell die Pseudo-Elemente (aber sie machen das mit dem DIV mit, Sie können sie nur nicht speziell überblenden).
Einverstanden, das könnte viele neue Möglichkeiten eröffnen. Besonders die 'content'-Eigenschaft zusammen mit '@keyframes' könnte dies zu einem schönen Bildschieberegler machen. Alle 10 Sekunden ein neues Bild anzeigen, das nach links oder rechts gleitet, reine CSS-Bildschieberegler.
Ich habe darüber nachgedacht, dies zu untersuchen, da wir mit einer kompletten Überarbeitung unserer Website beschäftigt sind und hofften, Übergänge mit einem Sprite in den Pseudo-Elementen zu verwenden!
Was für ein Mist, dass es (noch?) nicht gut unterstützt wird!
Diese Pseudo-Elemente sind magisch... Ich kann es kaum erwarten, dass IE7-Unterstützung aufgegeben werden kann und Sprites und HTML mit diesen kleinen Juwelen aufgeräumt werden können.
Danke für den Hinweis, Chris – Sie haben mir Stunden des Kopfzerbrechens erspart :)
Ich bin ziemlich sicher, dass wir fast so weit sind, dass IE7-Unterstützung aufgegeben werden kann. Sein Marktanteil ist nur 1/2% höher als bei IE6.
Liebe das neue Website-Layout!
Moderne Architekturen. WooHooOO!
Ja, ich kann es kaum erwarten, dass dies implementiert wird, insbesondere weil es möglich sein wird, zwischen Hintergrundbildern auf einem einzigen Element zu wechseln. Danke Chris, dass Sie das zur Sprache gebracht haben, hoffentlich werden die Browserhersteller darauf achten!
Ich warte schon lange auf die Jungs bei Chrome, um das zu beheben…
Ich benutze normalerweise Chrome zum täglichen Surfen, aber nachdem ich diesen Beitrag gelesen hatte, beschloss ich, meinen Firefox (den ich gestern auf Version 6 aktualisiert habe) zu öffnen, um zu sehen, wie die Kästen in der Nähe des Footers aussehen sollen. Das war alles ein Spaß, aber ich stellte fest, dass diese Website auf meinem Firefox nicht richtig angezeigt wird (vielleicht nur auf Version 6, ich habe die älteren Versionen nicht überprüft). Sie scheint nur die Homepage und einige Beitragsseiten zu betreffen, aber sie sehen entweder komplett schwarz aus oder nur der Header wird beim Laden angezeigt, bis ich nach unten scrolle, und selbst dann wird nicht alles angezeigt, wenn ich wieder nach oben scrolle. Sehr seltsam.
Scheint nur aufzutreten, wenn die Viewport-Breite größer als 1024 Pixel ist, bei bestimmten Breiten-/Höhenkombinationen (mein vollformatiges Firefox-Fenster muss eine dieser Kombinationen sein). Vielleicht hat es etwas mit dem animierten Reflowen von Inhalten zu tun, von dem ich vorher nichts wusste – sehr cool, übrigens.
Ziemlich cooler Effekt bei den Kästen im Footer. Ich erinnere mich, dass dieser Effekt im vorherigen Design vorhanden war, ich schätze, Sie haben dafür jQuery verwendet? Denn es wurde schön hineingeglitten, sogar in Chrome.
CSS3 mit jQuery-Fallback :P
Das ist großartig, da sauberer Markup von mir definitiv gebraucht und geliebt wird!
Beste Grüße
Ich schaue mir die Tabelle mit Browserunterstützung und Versionen an und bin traurig.
Deshalb ist es immer noch sicher, jQuery für solche Dinge zu verwenden.
Die Canary/Entwicklerversionen von Chrome (v. 15) haben ebenfalls keine Unterstützung für Übergänge und Animationen für generierte Inhalte. Ich schätze, es wird noch etwas dauern, bis wir das in Chrome sehen.
Ich bin immer noch überzeugt davon, dass der heutige Webentwickler eher im Fluss ist: „Unterstütze jeden Browser und versuche, jede Website in jedem Browser gleich zu machen.“
Wir müssen zum neuen Stil übergehen und ein paar CSS3-Sachen zu den neuen Websites hinzufügen, die die neuen Browser unterstützen. Geben Sie den älteren Browsern kein jQuery-Fallback, sondern lassen Sie den Browser auf den Text ohne die schicken CSS3-Effekte zurückfallen.
Das wird den Benutzer motivieren, die neuen Browser (Versionen) zu benutzen, oder?
Ich lese das auf mehr CSS3-Websites und in dem Buch, das ich gerade lese: „Das Buch CSS3“, und ich stimme dem voll und ganz zu. Mehr Leute dazu?
Grüße
Ich bin ein großer Fan von CSS3! Aber das, was schmerzt, ist der Strom nicht kompatibler Browser! Ich war bei den Animationen auf meinem Blog, aber...
Ich schätze, ich muss warten