Früher hielt ich einen ganzen Vortrag über Pseudo-Elemente. Eines der Dinge, die ich erwähnte, war, dass es früher eine CSS3-Spezifikation gab, die „mehrere“ Pseudo-Elemente enthielt, diese aber entfernt wurde. Das war irgendwie schade, denn manchmal reichen ::before und ::after einfach nicht aus. Warum diese scheinbar willkürliche Einschränkung?
Jetzt leitet Alan Stearns von Adobe einen neuen Entwurf für die CSSWG, um dies wieder in die Spezifikation aufzunehmen (und dafür zu sorgen, dass es in Browsern funktioniert). Er braucht Hilfe! Er braucht visuelle Anwendungsfälle dafür, warum Designer dies wollen.
Ein Beispiel, das mir sofort einfiel, war das mit den Sprechblasen-Pfeilen. Der Pfeil der Sprechblase kann aus einem Pseudo-Element erstellt werden, aber was, wenn Sie diese Pseudo-Elemente für andere Dinge benötigen? Zum Beispiel könnte eine Blockquote öffnende und schließende Anführungszeichen um sich herum haben.
Oder Sie müssen möglicherweise den clearfix darauf anwenden, falls sich schwebende Elemente darin befinden könnten. Der clearfix verwendet (normalerweise) beide verfügbaren Pseudo-Elemente eines Elements.
Im größeren Maßstab schauen Sie sich mal auf CodePen um. Dort gibt es viele großartige Beispiele wie dieses mit einem schießenden Panzer. Viele dieser Style-Demos bestehen aus einer großen Menge an HTML-Elementen für jeden Teil davon. Warum den DOM mit semantischen Elementen für nicht-semantische Zwecke verschmutzen? All das könnte stattdessen mit Pseudo-Elementen gemacht werden.
Also her damit, Leute! Was sind einige Anwendungsfälle, bei denen Sie sich mehrere Pseudo-Elemente gewünscht, aber keine gehabt haben? Wenn Sie Alan dabei helfen, helfen Sie, das Web voranzubringen.
Ein paar weitere Ideen, die ich weiterverfolge
Noch mehr zusätzliche Hintergründe und Rahmen à la Nicolas Gallagher.
Mehr als ein Stylesheet, das ::before und ::after Inhalte hinzufügt, ohne sich gegenseitig zu überschreiben.
Erzeugung von Boxen in CSS zur Verwendung in einer Regionen-Kette.
Mehr :before und :after Pseudo-Elemente sind manchmal nützlich, aber was wirklich erstaunlich wäre, wäre ein Wrapper-Pseudo-Element. Es würde Hacks wie „Uncle Dave’s Box“ mit einem Element anstelle von 2 (manchmal sogar 3) ermöglichen.
Blockquotes sollten Absätze enthalten, sodass Sie die ersten und letzten Absätze für die Anführungszeichen ansprechen und die Pseudo-Elemente immer noch auf der Blockquote verwenden könnten ;-)
Aber ich denke, es wäre schön, wenn man Pseudo-Elemente verketten könnte, wie z.B.
.some-class:before:before
Obwohl das ein wenig unübersichtlich würde, nehme ich an ;-)
Könnte auch komplexe CSS-Animationen ohne 100 divs ermöglichen.
Es wäre sehr nützlich für Leute, die mit CSS arbeiten, aber keine HTML-Änderungen vornehmen dürfen.
Persönlich haben 1 von 2 meiner Websites nicht-semantische divs darin... und ich denke, alle haben überflüssige Tags wie einen Link in einem li-Tag oder ein p in einem article...
Das ärgert mich manchmal.
Das ist etwas, worüber ich mich schon immer gewundert habe. Vielleicht würde es so funktionieren? Es scheint eine gute Möglichkeit zu sein, da mehrere Elemente auf dasselbe vordefinierte Pseudo-Element zugreifen könnten.
Das sieht nach einer wirklich ausgereiften Lösung aus, mit der ich definitiv arbeiten könnte. Es wäre weitaus skalierbarer als das Verketten von Pseudo-Elementen (nebenbei bemerkt, man würde sich total mit ::before::after und ::after::before vermischen) oder das Erfinden von ::more. Es passt auch zur Sass-Syntax, die man durch das Einbetten von Pseudo-Elementen erhält, wie wir es jetzt tun.
Ich kann mir die Support-Threads schon vorstellen: „Nein, ::after kommt vor ::after::after und ::before::before kommt vor ::before... nicht danach!“
Seltsamerweise habe ich heute mit einem Kreis herumgespielt, der eine Art Faltschirm-Business mit :before und :after machte, und ich dachte mir...
Pseudo-Beispiel
http://codepen.io/grayghostvisuals/full/EneAo
Wäre großartig, wenn das in die Spezifikation aufgenommen würde.
Außerdem, wie wäre es mit ::outer-before und ::outer-after für „ersetzte Elemente“.
Ich würde gerne einen 3D-Würfel mit einem einzigen Element erstellen können. Ich konnte etwas ziemlich Ähnliches erstellen (http://codepen.io/joshnh/pen/FCJGI), aber die Rotationen sind begrenzt, da es sich wirklich nur um die vorderen drei Flächen handelt!
Was sinnvoller wäre
Ich möchte Corey's Methode erweitern, um wie :nth-child Selektoren zu funktionieren.
Z.B. ::before(2), ::before(2n+1)
Ich bin mir nicht sicher, wie man angeben würde, wie viele vorhanden waren. Vielleicht als Eigenschaft?
element{ margin:0; before:6; after:2; }
Aber so könnte man alle möglichen Möglichkeiten für CSS eröffnen, um Bilder und/oder zusätzliche Elemente zu ersetzen.
Genau meine Idee! Sogar etwas wie
::before(even)oder::before(-1), um gerade/ungerade anzugeben und rückwärts vom Ende zu zählen, oder sogar etwas wie:first-line::after(2).Ich möchte ein Pseudo-Element :bad-ass in der Spezifikation sehen. Es ist mir egal, was es tut, ich möchte es nur in der Spezifikation sehen.
Ein häufiger Anwendungsfall für mich ist eine Box mit einem Rahmen und einem pfeilförmigen Rahmen... was durch einen kleineren
:after-Pfeil, der auf einem etwas größeren:before-Pfeil liegt, erreicht wird, um den Anschein eines Rahmens zu erwecken. Dies bindet jedoch beide Pseudo-Elemente.Ich habe mir angewöhnt, diese Situationen zu erkennen, während ich den DOM aufbaue, und sofort ein Inner-Wrap-Element für all meine anderen potenziellen Pseudo-Element-Bedürfnisse zu codieren. Ich weiß, es ist nicht genau semantisch... aber Konsistenz und zukünftige Flexibilität wiegen für mich schwerer als Semantik
:(.Ich mag die Art, wie Sie neue Einführungen präsentieren, Chris. Verwenden Sie diese Pseudo-Klassen beim Styling von Blockquotes und Piktogramm-Navigations.
Das ist mein Panzer! Aber ich muss zustimmen, es ist ärgerlich, dass ich viele Elemente für einen solchen Zweck verwenden musste.
Eigentlich bin ich an einem Punkt angelangt, an dem ich mir nicht einmal mehr die Mühe mache, darüber nachzudenken, wie ich Pseudo-Elemente verwenden könnte, um die Anzahl der Elemente im DOM zu reduzieren, wenn ich mehr als ein oder zwei Elemente darin verwende. Es lohnt sich nicht, oder zumindest nicht für CodePen-Demos.
Schon lange wünsche ich mir mehrere Pseudo-Elemente, um absolut nicht-semantische Dinge zu bauen (wie einen schießenden Panzer, der über den Bildschirm fährt). Etwas wie #element:before:after:before:before... oder besser #element:pseudo(N).
Ich mag Ihre Idee, ::after und ::before zu einem einzigen Pseudo-Element wie ::pseudo(x) zu kombinieren. Ich denke, die Namen „before“ und „after“ wirken als willkürliche semantische Einschränkungen aufgrund ihrer realen Assoziationen. Es ist schwieriger, die Notwendigkeit mehrerer Pseudo-Elemente zu begründen, wenn ein physisches Objekt normalerweise nur eine Rückseite und eine Vorderseite hat. Die aktuelle Spezifikation wendet unbeabsichtigt eine fehlerhafte Analogie auf HTML-Elemente an.
:)
Erstellen Sie ein Website-Logo nur mit einem Anker-Element:
<a id="logo" href="/">Meine Seite!</a>Obwohl, ich denke, es gibt eine Sache, die ich mir wünsche. Selbst wenn wir keine mehreren Pseudo-Elemente erstellen können, hoffe ich zumindest, dass sie mit dem Originalelement verglichen werden können: Auswählbar und Übergangsfähig (übergangsfähig wie auch in Firefox) :\
Sie können einen Hover-Effekt für Bilder ohne zusätzlichen Markup erstellen (a.img-sprite-hover-fade:hover:after)
http://jsfiddle.net/mbDAF/
Leider funktionieren CSS-Transitions in aktuellen Browserversionen nicht bei generiertem Inhalt..
Hm, das sieht nach einer wirklich schönen Ergänzung zu den CSS-Spezifikationen aus, aber was ich nicht verstehe, ist, dass Sie uns nach Beispielen fragen, damit die W3C-Arbeitsgruppe diese Spezifikation berücksichtigt.
Denn wenn es eine sehr gefragte CSS-Spezifikation ist, warum müssen Sie uns dann nach Beispielen fragen? Es muss Tonnen davon geben, wenn Leute sie wirklich nutzen wollten, aber es nicht konnten.
Natürlich werden sie nicht sichtbar sein, da diese Pseudo-Klassen derzeit nicht verfügbar sind, aber wenn sie wirklich gewollt wären, müssten Sie nicht einmal danach fragen, weil die Beispiele einfach da sind.
Zurück zum Artikel, die Spezifikation sieht sehr cool aus. Ich mag den Ansatz von @corey (genau wie Sie ihn auch in Ihrer Präsentation erwähnt haben). Ich mag die Art und Weise, wie Nicolas die Pseudo-Klassen verwendet hat, um GUI-Elemente zu bauen (http://nicolasgallagher.com/pure-css-gui-icons/).
Die Pseudo-Klassen sind auch sehr gut geeignet, um Ihren Elementen wirklich schöne Schatten hinzuzufügen. (http://jsfiddle.net/savver/wXKbc/embedded/result/).
Das ist wirklich sinnvoll, besonders für visuelle Inhalte, die rein CSS-basiert sind. Ich habe immer das Gefühl, dass ich dem DOM sinnlose Inhalte hinzufüge, nur um CSS-Einschränkungen zu umgehen... besonders wenn es etwas so Einfaches ist wie die Anzeige eines zusätzlichen visuellen Materials, das keine Interaktion hat.
Ich unterstütze voll und ganz die von Corey (Indexnummern für mehrere Before/After-Selektoren) und Alex Kempton (mehrere benutzerdefinierte Namen für Before/After-Selektoren, die vordefiniert sind) aufgeworfenen Ideen.
Die Methode, die am geeignetsten erscheint, ist die von Alex, und sie macht viel Sinn, wenn man bedenkt, dass es bereits Dinge im CSS-Standard gibt, die benutzerdefinierte Namen verwenden, z.B. CSS-Animationen.
Hier ist auch etwas, das nützlich wäre
Eine Sprechblase mit Anführungszeichen, dem Pfeil und auch statischen Symbolen, die über die obere Ecke schweben, wenn die Nachricht angeheftet ist (oder als Favorit markiert, beliebt, wichtig usw.).
So kann man einfach diesen HTML verwenden
Kombiniert mit diesem CSS
Oder die andere von Alex erwähnte CSS-Methode
Anstatt mehr im DOM zu haben, wie das...
Ich mag das Indexierungsbeispiel. Es ist sehr sinnvoll und ich habe sogar das Gefühl, dass ich etwas Ähnliches wie mehrere
background-imagesund die:nth-child-Eigenschaften verwende.Ich verstehe immer noch nicht dieses ganze doppelte Doppelpunkt-Ding. Was ist das?
Obwohl nicht erforderlich, besagt die Spezifikation, dass der Doppelpunkt der „richtige“ Weg ist, um Pseudo-Elemente zu bezeichnen.
Es wäre interessant, wenn es ein ::inbetween gäbe, das den Raum zwischen den Kindern des ausgewählten Elements auswählt
ul::inbetween{ content: ‘|’ ; }
würde eine Liste in
<ul><li>…</li>|<li>…</li>|<li>…</li></ul>
verwandeln. Anstatt Inhalt zu verwenden, wäre es natürlich möglich, kleine Blöcke, Bilder usw. zu verwenden, um als Trennzeichen zwischen einer Gruppe von Elementen (Artikel, Menüeinträge, Formularelemente usw.) zu dienen.
vielleicht zwei verschiedene Funktionen von (etwas wie) ::content-before/after und ::display-before/after, nur um einfache Dinge wie das Blockquote-Beispiel oben zu trennen.
Hmmm.... demo this http://codepen.io/aaronkahlhamer/pen/dnLfF (FYI: The styling isn’t perfect. )
Ich denke, das hätte ich tun können, wenn mir mehrere Pseudo-Elemente zur Verfügung gestanden hätten.
Hmmm.... demo this http://codepen.io/aaronkahlhamer/pen/dnLfF (FYI: The styling isn’t perfect. )
Ich denke, das hätte ich tun können, wenn mir mehrere Pseudo-Elemente zur Verfügung gestanden hätten.
<label>Name: <a href=”#” id=”clickme” class=”a few classes here to mange the styles”>Edit<input type=”input” name=”pwd” value=”enter first name” /></li></ul></label>
Ich denke, einige der Anwendungsfälle werden schließlich von Web Components übernommen werden... aber vielleicht nicht alle.
Was ist mit etwas wie dem hier
In diesem Fall weisen wir dem ursprünglichen Pseudo-Element eine bestimmte ID (oder CLASS, wenn Sie möchten) zu. Sie können dann Ihrem ursprünglichen Pseudo-Element ein neues Pseudo zuweisen.
Technisch gesehen könnte CSS mit dieser Art von Syntax ein gesamtes HTML-Dokument mit nur einem Tag schreiben.
Die letzte Zeile sollte enden
„... könnte ein gesamtes HTML-Dokument mit nur einem BODY-Tag schreiben.“
Text automatisch in Links umwandeln
Das habe ich jetzt mit jQuery gemacht
Mit CSS
Dies scheint mit regulärem CSS nicht zu funktionieren. Was versuchen Sie zu tun?
Ja, das Hinzufügen von HTML über Pseudo-Elemente wird wahrscheinlich nicht passieren. Das ist, denke ich, zu weit in die Vermischung der Ströme.
Außerdem glaube ich nicht, dass das sowohl nützlich als auch rational wäre.
http://we-are-gurus.com/labs/css3/css3-3d-block-minecraft.html
Dies ist ein kleiner Würfel, der mit ::pseudo erstellt wurde, und natürlich wäre es großartig, die fehlenden 3 Flächen ebenfalls über Pseudo-Elemente erstellen zu können!
Eine CSS „Lade“- oder „Spinner“-Ikone mit einem einzigen HTML-Element (bei besserer Unterstützung für die Animation von Pseudo-Elementen).
Dabblet-Beispiel (unter Verwendung mehrerer divs stattdessen): http://dabblet.com/gist/3205691
Ich wollte einen Stapel Fotos bauen, die ein Album darstellen. Ich konnte nur drei gestapelte Fotos bekommen: das ::before, das ::after und das Element selbst.
Wie Chuck Neely sagte, ist die Animation auf Pseudo-Elementen ebenfalls ein Problem. Ich hatte auch dieses Spinner-Problem.
Ja, derselbe Stapel Fotos, den Sie verwendet haben. Ich habe
::beforefür den zusätzlichen Foto-Rahmen verwendet, aber::afterwar bereits für einen clearfix aufgebraucht.Waren Pseudo-Elemente wirklich für den Grund gedacht, warum wir sie jetzt so mögen? Ich nahm immer an, dass die Verwendung als Styling-Hooks eher ein Workaround als ein beabsichtigtes Verhalten war (was weitgehend erklärt, warum es nur zwei gibt).
Auch ich habe manchmal gewünscht, wir hätten mehr als zwei Pseudo-Elemente (meistens im Zusammenhang mit Icons, Dreiecken und Clearfixes, die alle auf einem einzigen Element definiert sind), obwohl diese Fälle selten sind und ich mich frage, ob wir diesen (zugegebenermaßen sehr nützlichen) Workaround nicht überbeanspruchen und stattdessen konventionellere Styling-Mittel (wie mehrere Hintergründe) vergessen?
Ja, ich stimme zu; ich habe einen ähnlichen Kommentar gemacht, als ich Pseudo-Elemente für Icon-Fonts verwendete.
Hier ist ein Beispiel, wo ich einige zusätzliche Pseudo-Elemente verwenden könnte, damit ich keinen zusätzlichen
span-Tag verwenden muss.Ich weiß nicht, ob wir mehr Boxen brauchen oder eine Möglichkeit, Boxen in kleinere Stücke zu zerlegen. Jedenfalls halte ich die Region-Spezifikation für die erstaunlichste Quelle für Anwendungsfälle.
Übrigens verwende ich in diesen Beispielen die ::slot()-Notation
Dies löst auch Fälle wie die Sprechblase
Was ich hier gesehen habe, erschien mir
::between-elementsnett.Der Vorteil der Verwendung einer CSS-Eigenschaft und nicht eines Pseudo-Elements ist, dass, sobald die CSS-WG eine Lösung findet, um mehreren Stylesheets zu erlauben, Elemente zu einer listenwertigen Eigenschaft hinzuzufügen, ohne die woanders im Stylesheet hinzugefügte zu löschen, wir die Möglichkeit haben werden, Slots zu content() hinzuzufügen, ohne uns darum kümmern zu müssen, einen eindeutigen Index (::after(1),::after(2)…) für jede unserer Ergänzungen zu verwenden.
Danke, dass Sie das Schreiben so interessant zu sehen und zu verstehen machen.
Das Haben von n Pseudo-Elementen würde es uns endlich ermöglichen, Inhalt von Stil zu trennen.
Im Moment fügen wir alle(?) unerhebliche unsinnige Mock-ups hinzu, um zusätzliche Elemente auf einer Seite zu erstellen, die rein präsentationszwecken dienen, wie z.B.
Dies hat nur Bezug zur Präsentation der Seite, nicht zum Inhalt (also ist es genauso schlimm wie die Verwendung des
font-Tags!).Es wäre eine viel bessere Praxis, wenn dieses ganze Element vollständig in die Präsentationsschicht verschoben werden könnte
Oder unter Verwendung des oben genannten Codes
Es wäre großartig, Pseudo-Elemente zu haben, die vollständig vom DOM getrennt sind. Die meisten Verwendungen von :after und :before entsprechen nicht wirklich dem, was ursprünglich beabsichtigt war. Es wäre gut, wenn man ein Pseudo-Element erstellen und ihm dann Anweisungen geben könnte, wo es auf der Seite erscheinen soll, etwa so:
@pseudo-element{ content: "blah"; dom: article header .avatar; }Interessante Idee, Rachel. Ich denke, es würde wahrscheinlich vom CSS-Standard abweichen, wenn wir solche „DOM“-Selektoren in die tatsächlichen Eigenschaften eines Pseudo-Elements einfügen müssten.
Basierend darauf, wie die meisten CSS-Selektoren funktionieren, sowie auf den bisher vorgestellten Ideen, würde ich wahrscheinlich diese Lösung wählen
Dies würde es uns dann ermöglichen, das Pseudo-Element namens „article_avatar“ an anderen Stellen als nur in „article header .avatar“ zu verwenden,
plus es ist einfach und sauber :)
Ein weiterer Anwendungsfall, auf den ich gestoßen bin, ist, wenn man das
cite-Attribut eines Zitats anders als das schließende Anführungszeichen darstellen möchte. Ich habe einen Pen zusammengestellt, um dies zu veranschaulichen.Außerdem sehe ich große Hilfe in weiteren Pseudo-Elementen bei der Arbeit mit Sprites!
Das gesagt, gibt es viele kreative Ideen in dieser Diskussion. Persönlich würde ich das gerne so einfach wie möglich halten. CSS3 hat Doppelpunkte für Pseudo-Elemente eingeführt. Was ist mit frei benennbaren Pseudo-Elementen, genau wie bei IDs und Klassen?
Dann würden Sie leicht die anfängliche „Sprechblasen-Sache“ lösen, indem Sie entweder hinzufügen
(1) ein zweites ::after-Element
(2) ein verkettetes ::after-Element
(3) ein benutzerdefiniertes verkettetes Element
...oder (4) ein völlig eigenständiges Element
Was ich wirklich lieben würde, wäre es, Pseudo-Elemente im DevTools DOM Inspector in Firefox/Chrome sehen zu können, so wie es in Dragonfly auf Opera gemacht wird!
Es scheint, als hätte jemand diese Funktion bereits in Chrome DevTools angefordert
http://code.google.com/p/chromium/issues/detail?id=123343&q=feature%3DDevTools%20pseudo&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary
Ich bin mit Dragonflys Entwicklertools nicht vertraut, aber Sie können Pseudo-Elemente in Chrome Dev Tools sehen. Sie erscheinen unter den „Matched CSS Rules“ im Styles-Bereich des Elements-Tabs. Möglicherweise haben Sie noch nicht weit genug nach unten gescrollt, um sie zu sehen.
Hallo Shaun,
Ich weiß, dass man sie im CSS Styles Panel sehen kann, aber man kann sie nicht visuell im DOM Inspector sehen. Sehen Sie sich diesen Screenshot eines Pseudo-Elements in Dragonfly an http://i.imgur.com/khceh.png. Beachten Sie das <::after>-Element innerhalb des h2.
Ich könnte mir unzählige Vorteile von mehreren Pseudo-Elementen vorstellen. Ein Beispiel, auf das ich kürzlich gestoßen bin, war der Versuch, einen Ordner-Tab-ähnlichen Button mit reinem CSS zu erstellen. Die Art von Tab, die auf beiden Seiten eine „S“-Kurve hat. Ich konnte leicht eine Seite davon mit einem Vor- und Nach-Element erstellen. Eines wurde als Maskierungsart-Schicht mit einem Radius verwendet und das andere füllte die Lücke zwischen der Maske und dem eigentlichen Element. Mit nur einem weiteren Pseudo-Element hätte ich die andere Seite maskieren und einen perfekten Ordner-Tab-Button mit reinem CSS erreichen können. Leider musste ich mich damit begnügen, den Tab rechtsbündig auszurichten und nur eine „S“-Kurve auf einer Seite zu haben :(.
Haben Sie jemals daran gedacht, Divs innerhalb von content: „“ zu erstellen, die ihre eigenen :before-Pseudo-Elemente haben könnten?
Das Erstellen tatsächlicher Elemente mit dem content-Attribut wäre wahrscheinlich wieder ein Vermischen der Ströme, da es den DOM etwas zu sehr beeinflusst, als nur die guten alten Pseudo-Elemente mit Text, der über ein Attribut hinzugefügt wird.
Das ist eine interessante Idee. Durch das Hinzufügen des Selektors für das Div zum Stil würde man effektiv eine Endlosschleife erzeugen. Das kann aber unmöglich funktionieren. Ich muss es ausprobieren. Der Versuch, einen praktischen Nutzen dafür zu finden, bringt mein Gehirn zum Rauchen.
Ich bevorzuge die ::after::after-Syntax, da sie für mich mehr Sinn ergibt.
Eine der möglichen Verwendungen, auf die ich gestoßen bin, ist
was in einem einfachen CSS-Layout durchaus Sinn ergeben würde, aber derzeit nur mit JavaScript erreichbar ist.
Während wir dabei sind, holen wir auch den ::outside Pseudo-Wrapper zurück, für den bereits ein Vorschlag für Vielfache vorliegt (mit einer Syntax in der Form ::outside(2)/::outside(3) usw.). Nicht, dass ich an dieser Klammer-nummerierten Syntax für das Multiple-Format hänge, aber sie funktioniert – sie ist sinnvoll, sauber und erlaubt uns, semantische Ordnung/Organisation für die multiplen Pseudo-Elemente zu geben, egal ob sie ::outside oder ::before oder ::after oder ::wasauchimmer sind, und wäre etwas sauberer (weniger Code) als das von derylius beschriebene Syntaxformat (::after::after), obwohl man denken könnte, dass letzteres bereits existiert und funktioniert.
Diese Idee wurde übrigens im CSS3 Working Draft von 2003 vorgeschlagen
http://www.w3.org/TR/css3-content/#wrapping
Ich vermute, William Malo wusste nicht, dass dies bereits spezifiziert war, aber ich bin froh zu sehen, dass ich nicht der Einzige bin, der das will oder darüber nachgedacht hat! Ein weiterer Anwendungsfall zu den von Herrn Malo erwähnten hinzu
„würde vertikales Zentrieren vereinfachen, ohne zusätzliche nicht-semantische Elemente zu verwenden (ich hasse sie!). Oder die Mächtigen könnten einfach vertical-align: middle für Divs erlauben. Das wäre auch großartig.
Auf jeden Fall, auf die Reduzierung der nicht-semantischen Verschmutzung in unseren HTML-Gewässern!
Was ist der Status hiervon? Mehr Pseudo-Elemente für CSS wären wie fliegende Autos im wirklichen Leben.
In meinem Fall musste ich eine Sprechblase mit einer doppelten Umrandung erstellen. Das könnte sehr einfach mit einem zusätzlichen ::before / ::after Pseudo-Element funktionieren.
Ich würde gerne mehrere Pseudo-Elemente verwenden, um (komplexere) Ladeanimationen zu erstellen. So könnte ich einfach eine
loading-Klasse auf die Komponente meiner Benutzeroberfläche setzen, die auf Daten wartet, und alles andere im Stylesheet belassen.Seph Coster schrieb: