Die wasser Maschine: die 'ige' Zukunft von CSS in die Gegenwart bringen

Die CSS -Arbeitsgruppe entschied sich für die Entwicklung von Inline -bedingten Aussagen, die im Kommentarbereich erhitzte Diskussionen auslösten. Einige Entwickler sind darüber begeistert, während andere besorgt sind, dass dies die Zukunft von CSS unsicher machen wird. Wird dieser in eine höllische Situation mit Entwicklern gefüllt, die CSS missbrauchen, die zu viel Logik implementieren, wo es eine Stilsprache sein sollte? Gewohnheit. Auch wenn manche Leute das tun, veröffentlicht kein Mainstream -Blog den Unsinn des hypothetischen Verrückten, der CSS für ihre eigenen Zwecke verrückte Logik hinzufügt. Daher wissen wir, dass die Zukunft von CSS sicher ist.

Das Ende der Welt? Es ist schon lange her

Die Argumente in diesem Artikel bestätigen ferner, dass Inline -bedingte Aussagen möglicherweise kein Vorbote des Endes der Zivilisation sind: Ich denke, wir können jetzt Stilanfragen verwenden, um die gleiche Funktionalität zu erreichen, die einen ziemlich guten Browserunterstützung erhalten.

Der Vorschlag von

Lea ähnelt eher syntaktischer Zucker, manchmal praktisch und ermöglicht ein saubereres Markup. Alle Panikbemerkungen zu Inline -Bedingungsaussagen, die CSS ruinieren, entsprechen der Übertreibung der Hinzufügung von ternären Operatoren zu Sprachen, die bereits bei Aussagen stützen.

In der Tat sagte Lea über die Syntax, die sie vorschlug: "Genau wie der ternäre Operator in JS kann es auch für Situationen ergonomischer sein, in denen nur ein kleiner Teil des Wertes ändert." Es ist nicht so, dass die bedingten Aussagen in CSS verboten sind, aber CSS ist nicht immer gut darin, es zu umgehen.

Ich möchte eine bedingte Oompa Loompa!

Also auch. Es gibt viele andere, wie die sorgfältig organisierte Liste erstaunlicher komplexer Tricks von Lea belegt, wie die Menschen mithilfe aktueller CSS in den Bedingung in den Inline -Bedingungen simulieren. Einige dieser Tipps sind so kompliziert, dass ich mich immer noch nicht sicher bin, ob ich sie verstehe, aber ihre Namen sind wirklich cool. Lea schloss: "Wenn Sie andere Techniken kennen, lassen Sie es mich bitte wissen, damit ich sie hinzufügen kann."

hmm ... ich habe definitiv einige Fragen zu diesen Tipps verpasst, um zu lösen. Ich bemerkte, dass Lea einen Doktortitel hatte und ich war ein Idiot. Also scrolle ich nach oben und lese noch einmal, aber ich kann nicht aufhören zu denken:

Versuchen diese Leute, nicht mehr Divs um ihre Teile hinzuzufügen und Stilfragen zu verwenden?

Es ist fair, wenn die Leute unnötige Elemente im DOM vermeiden möchten, aber Lea's Liste der Tipps zeigt, dass die Alternativen sehr komplex sind. Es lohnt sich also zu versuchen, wie weit eine Stilabfrage mit Wickeln von Divs voneinander entfernt ist.

Überzeugende Beispiele

Das Beispiel

Lea dreht sich darum, eine "Variante" -Mobilie auf dem Eingabeaufforderung zu setzen, und weist darauf hin, dass wir mit Style -Abfrage fast das implementieren können, was sie will, aber die Syntax dieser Annahme ist leider ungültig

:

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

Sie möchte den Container selbst und seine Kinderelemente nach -Variant stylen. In diesem konkreten Beispiel kann ich nun Z-Index verwenden, um das :: nach pseudoelement zu ändern, um die Illusion zu erstellen, dass es sich um einen Container handelt. Dann kann ich seine Grenzen und den Hintergrund einstellen. Leider ist diese Lösung so zerbrechlich wie ich. In diesem anderen Beispiel möchte Lea den Flex-Fluss des Behälters basierend auf der Variante festlegen. Meine Pseudo-Element-Lösung ist in diesem Fall nicht gut genug.

Denken Sie daran, Leas Vorschlag wurde in die CSS -Norm aufgenommen, genau wie die Geburtstagsgeschenke, die das Universum ihr gegeben hat, wäre es unfair, ihre Geschenke durch die billigen gefälschten Behälter zu ersetzen, die ich auf Temu gekauft habe. Sie verdient einen echten Behälter.

Versuchen wir es erneut.

Verwenden Sie die Wrapper

Der Kommentar des LEA -Vorschlags erwähnt das Schleifen vom Typ, nennt es jedoch "eine sehr (ich noch einmal, sehr) komplexe, aber effektive" Weg, um das Problem zu lösen, das inline -bedingte Aussagen für die Lösung von Inline -Aussagen konzipiert sind. Das ist nicht fair. Das Schleifen des Typs brauchte eine Weile, um zu verstehen, aber ich denke, es ist einfacher zu verstehen als andere Tipps und hat weniger Nachteile. Trotzdem kann diese Art von Code in der Produktion langweilig sein, wenn Sie sich die Beispiele ansehen. Lassen Sie uns also unsere Zähne unterteilen und versuchen, eine alternative Version des Flexbox -Varianten -Beispiels von Lea zu erstellen. Meine Version verwendet keine Typ-Schleifen oder irgendwelche Tricks, sondern verwendet "altmodische" (nicht so altmodische) Style-Abfragen sowie Wickeln von Divs, um das Problem zu lösen, dass wir den Container selbst nicht mit Style-Abfragen stylen können.

Verpackungsvergleichstypen

Vergleichen Sie Leas Beispiel mit meiner Version des Codes, um uns zu helfen, die Unterschiede in der Komplexität zu verstehen.

Folgendes sind zwei Versionen von CSS:

Folgendes sind zwei Versionen des Tags:

einfacheres CSS und etwas mehr Markup. Vielleicht haben wir die Richtung gefunden.

Der Grund, warum ich Style -Abfragen mag, ist, dass Lea's Vorschlag die Style () -Funktion verwendet. Wenn ihr Vorschlag also vom Browser übernommen wird, erscheint es möglich, die Style -Abfrage in eine Inline -Bedingung zu migrieren und die Wrapper zu entfernen. Wenn ich nicht erwähne, dass die Migration dieser Art von Code ein praktikabler Anwendungsfall für KI ist, ist dieser Beitrag nicht der Artikel von 2025. Vielleicht wird die KI nicht so schlimm sein, wenn wir Inline -Bedingungsaussagen erhalten.

Aber wir waren ein wenig off -Thema. Haben Sie versucht, einige coole JavaScript-Frameworks zu übernehmen, die im Aufgabenbei elegant aussehen? Wenn überhaupt, wissen Sie, dass eine Lösung, die in einfachen Beispielen überzeugend aussieht, Ihren Willen herausfordern kann, in realen Beispielen zu überleben. Lassen Sie uns also sehen, wie effektiv es mit Stilanfragen in realistischeren Beispielen funktioniert.

Suche nach Überprüfung

Kombinieren Sie mein obiges Beispiel mit dem Beispiel von MDN zur HTML5 -Validierung und der coolen Demonstration von Seth Jeffery, reine CSS -Symbole zu transformieren, und geben Sie sie dann alle in die Maschine "Was wenn" für die folgende Demonstration ein.

Wenn Sie das Formular gültig vornehmen, basieren alle Änderungen an der Eingabeaufforderung auf einer benutzerdefinierten Eigenschaft. Diese Eigenschaft wird nie direkt im CSS -Eigenschaftswert des Eingabeaufforderungsfelds verwendet, steuert jedoch die Style -Abfrage, die die Randfarbe, das Symbol, die Hintergrundfarbe und den Inhalt der Eingabeaufforderung festlegt. Wir setzen die Varianteigenschaft auf der Ebene .Callout-Wrapper. Ich habe es mit CSS wie folgt eingerichtet:

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

Diese Variable kann jedoch durch Inline -Stile in JavaScript oder HTML festgelegt werden, genau wie das Beispiel von Lea. Die Formularvalidierung ist nur meine Art, die Demo interaktiver zu gestalten, um das Eingabeaufforderung zu zeigen, das dynamisch basierend auf -Variant geändert werden kann.

Zusammenfassung

Ich schreibe einen Artikel gegen die Techniken des Biegens von CSS zu unserem Willen, der nicht zu meinem Stil passt, und ich bin völlig für die "Täuschung" -Gesprache, um das zu tun, was wir tun wollen. Die Verwendung von Wrappern und Stilanfragen kann jedoch der einfachste Weg sein, um die inline -bedingten Aussagen zu unterstützen. Wenn wir uns eher wie in Zukunft fühlen möchten, können wir den obigen Ansatz als Grundlage für Polyfills von Inline -Bedingungsanweisungen oder die Verwendung von Präprozessormagie wie Paket -Plugin oder Postcss -Plugin verwenden - für diesen Kompromiss scrt mein Triggerfinger jedoch immer nach dem Löschen der Taste. Lea gibt zu: „Wenn Sie mit Stilfragen etwas tun können, verwenden Sie Stilanfragen so viel wie Sie möchten - sie sind mit ziemlicher Sicherheit eine bessere Lösung.“

Während der Experimente in diesem Artikel habe ich mich selbst davon überzeugt, dass Style -Query auch in Lees Fall immer noch eine gute Wahl ist - aber ich freue mich immer noch auf Inline -Bedingungsaussagen. In der Zwischenzeit sind Stilfragen zumindest im Vergleich zu anderen bekannten Lösungen leichter zu verstehen. Ironischerweise stimme ich den Kommentaren zu, die das Erfordernis von Inline -Bedingungsaussagen in Frage stellen, nicht weil es CSS ruinieren wird, sondern weil ich glaube, dass wir jetzt ohne Tricks Lea mit modernen CSS implementieren können. Daher benötigen wir möglicherweise keine Inline -bedingten Aussagen, aber sie ermöglichen es uns, lesbarere und prägnantere Code zu schreiben. Wenn Sie sich einige Beispiele für Komplexitätsbarrieren vorstellen können, denen Sie mit Style -Abfragen anstelle von Inline -Bedingungsaussagen begegnen können, teilen Sie mir bitte im Kommentarbereich mit.

Das obige ist der detaillierte Inhalt vonDie wasser Maschine: die 'ige' Zukunft von CSS in die Gegenwart bringen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!