CSS -Sachen I ' Ich bin nach dem letzten CSSWG -Treffen aufgeregt

Von 11 bis 13. Juni 2024 hielt die CSS Working Group (CSSWG) ihr zweites persönliches Treffen des Jahres in Cruña, Spanien, ab, wobei die Agenda viele neue Funktionen und Verbesserungen der CSS-Sprache abdeckt. Nach den bemerkenswerten Fortschritten wie Verschachtelung, Containerabfrage und Stilabfrage und has: Selektoren im Jahr 2023 werden im Jahr 2024 weitere Durchbruchsaktualisierungen empfangen. Unabhängig davon, ob neue Funktionen wie Inline-bedingte Aussagen gerade erst anfangen oder langfristige Projekte enden, ist 2024 bereits voller aufregender Entwicklungen-und wir treten gerade im Juli ein!

Dieser Artikel wird einige der interessantesten und wichtigsten neuen Funktionen von CSS teilen, von denen ich denke, dass sie auf dieser Konferenz diskutiert werden. Es ist zu beachten, dass dies keine genaue Aufzeichnung der Diskussionen der Konferenz ist, sondern ein Überblick über die wichtigsten CSS -Themen, auf die sich auf der Konferenz konzentriert. Tatsächlich sind diese Funktionen seit Jahren gebraut, und die Diskussionen konzentrieren sich auf bestimmte Fälle und neue Verbesserungen, anstatt eine vollständige Spezifikation zu definieren.

Sie können bestimmte Themen anzeigen, die auf der Tagesordnung des CSSWG -Meetings diskutiert werden.

Merkmal 1: if() Aussicht auf die Funktion

Da CSS -benutzerdefinierte Eigenschaften im Jahr 2016 solide Unterstützung erhalten haben, wurden viele Möglichkeiten versucht, bestimmte Stile auf der Grundlage benutzerdefinierter Eigenschaftswerte anzuwenden, ohne sich auf JavaScript zu verlassen. Eine der frühesten bedingten Stillösungen wurde von Roman Komarov in den "Bedingungen für CSS -Variablen von CSS" 2016 vorgeschlagen. Seitdem wurden viele andere "Fähigkeiten" für bedingte Erklärungen in CSS (einschließlich des extrem cleveren Ansatzes von Ana Tudor auf CSS-Tricks dokumentiert. Tatsächlich enthält das CSSWG -Mitglied Lea Verou in ihrem jüngsten Artikel „Inline -Bedingungsaussagen in CSS jetzt?“ Eine vollständige Liste von Diskussionen und Vergleiche dieser Lösungen.

Natürlich hat sich die Community immer nach einer bedingten Möglichkeit gesehnt, Stile mit benutzerdefinierten Eigenschaften anzuwenden. Heutzutage haben wir eine Style -Abfrage -Spezifikation, die diese Aufgabe erfüllen kann, aber einige Einschränkungen, die nicht mit dem Browserunterstützung zusammenhängen. Was ist die größte Einschränkung? Wir können den Abfragebehälter nicht direkt stylen , daher müssen wir in HTML eine Art Verpackungselement um den Container hinzufügen.

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

… und Stilfragung:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

if() Wie eine Funktion aussehen könnte

In Bezug auf CSSWG wurde die Hinzufügung von if() -Funktionen im Jahr 2018 erörtert. Am 13. Juni dieses Jahres - ja, sechs Jahre später - beschloss CSSWG, if() Funktionen für CSS zu entwickeln. Obwohl es gut aussieht, erwarten Sie nicht, dass Sie mindestens zwei Jahre in Ihrem Browser sehen if()! (Dies ist die inoffizielle Schätzung von Lea.) Möglicherweise müssen wir länger warten, um genügend Browserunterstützung zu erhalten, um sie in der Produktion zuverlässig zu verwenden. Die Entwurfsspezifikation hat gerade begonnen und viele Dinge müssen zuerst getestet werden. Als Referenz begann die CSS -Variablen Work Draft 2012 und erhielt erst 2016 einen umfangreichen Browserunterstützung.

In Bezug auf die Syntax kann if() ternäre Operatoren aus JavaScript und anderen Programmiersprachen ausleihen, und die Struktur lautet wie folgt:

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

… wobei A das benutzerdefinierte Attribut ist, das wir überprüfen, und B und C sind mögliche bedingte Rückgabewerte. Um den Stil zu überprüfen, wird der Inline -Stil style(--my-property: value) verwendet.

<code>if(a ? b : c)</code>

Auch wenn ? in CSS nicht verwendet wird und : anderswo unterschiedliche Bedeutungen hat, denke ich, dass diese Syntax den meisten Menschen am meisten vertraut ist, ganz zu schweigen davon, dass sie auch nahtlose bedingte Links zulässt.

<code>.forecast {
  background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>

Future if() Verbesserung der Funktionen

Obwohl diese möglicherweise nicht in der anfänglichen Version erscheinen, ist es immer noch interessant zu wissen, welche Änderungen zu einem bestimmten Zeitpunkt in der Zukunft auftreten können: if()

• unterstützt andere Inline -bedingte Aussagen. Wir sollten die Abfrage verwenden, um benutzerdefinierte Eigenschaften zu überprüfen. Wir können jedoch auch die Inline -Abfrage verwenden, um die Medieneigenschaften zu überprüfen, oder die Inline style() verwenden, um zu überprüfen, ob der Benutzeragent bestimmte Eigenschaften unterstützt. media() support()

<code>.forecast {
  background-color: if(
    style(--weather: clouds) ? var(--clouds-color): 
    style(--weather: sunny) ? var(--sunny-color);
    style( --weather: rain) ? var(--rain-color): var(--default-color)
  );
}</code>

Verwenden Sie bedingte Aussagen in anderen CSS -Funktionen.
• In zukünftigen Entwürfen können wir ternäre Operatoren in anderen Funktionen verwenden, ohne sie in zu wickeln. Wenn wir beispielsweise in oder if() Funktionen sind, können wir die Berechnungen ohne clamp() durchführen. round() calc()
Merkmal 2: Übergang über Dokumentansicht

Übergang

Letztes Jahr ermöglichte die API der Ansicht Übergangs -API uns, nahtlose Übergänge zwischen den Navigieren von Webseiten und Zuständen zu erstellen. Keine Komponenten oder Frameworks, keine Animationsbibliotheken erforderlich - verwenden Sie einfach eine kleine Menge JavaScript und einfaches HTML und CSS. Die erste Implementierung des View-Übergangs wurde vor langer Zeit in den Browser integriert, basiert jedoch auf experimentellen Funktionen, die durch Chrom definiert wurden, und beschränkt sich auf Übergänge zwischen zwei Zuständen (Übergang mit einseitigen Views), ohne dass Übergänge zwischen verschiedenen Seiten (d. H. Übergangsübergreifende Übergänge) zu unterstützen, was genau das ist, was die meisten unserer Entwickler wünschen. Die Möglichkeit, das native Anwendungsverhalten nachzuahmen, ist aufregend!

Deshalb ist CSS View Transition Modul Level 2 so großartig und warum es die beliebteste aller in diesem Artikel beschriebenen CSS -neuen Funktionen ist. Ja, diese Funktion bringt einen nahtlosen Übergang über Seiten über die Seiten, aber was wirklich wichtig ist, ist, dass die Abhängigkeit von dem Framework, das diese Funktion implementiert, eliminiert. Wir können auf reine CSS und JavaScript zurückkehren, anstatt Bibliotheken zu verwenden - z. B. einige Routing -Bibliotheken.

Natürlich ist die Sichtübergangs -API für eine gewisse Komplexität außer Reichweite, aber sie eignet sich hervorragend für die unzähligen Situationen, in denen wir nur Seitenübergänge durchführen möchten, ohne die Leistungskosten für die Einführung von Frameworks tragen zu müssen.

Meinungsstäbchen, um den Übergang

anzuzeigen

Wenn wir zwischen zwei Seiten von derselben Quelle navigieren, wird der Übergang der Ansicht ausgelöst. In diesem Fall könnte die Navigation auf einen Link klicken, ein Formular einreichen oder mit einer Browser -Schaltfläche hin und her gehen. Im Gegensatz dazu löst die Verwendung einer Suchleiste zwischen denselben Quellseiten keinen Seitenübergang aus.

Beide Seiten-die Seite, die wir verlassen möchten, und auf der Seite, auf die wir navigieren möchten-müssen sowohl @view-transition AT-Rule verwenden und die navigation -Sache auf auto festlegen, um sich in den Übergang zu entscheiden:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Wenn sich beide Seiten für den Übergang anschließen, "Snapshot" auf den beiden Seiten "Snapshot" und verblassen die "vor" -Seite in "After" reibungslos.

Übergang zwischen "Snapshots"

In diesem Video können Sie sehen, wie die alte Seite dank einer vollständigen Reihe neuer Pseudoelemente, die während des Übergangs bestehen, in die neue Seite verblasst und CSS-Animationen verwenden, um Effekte zu erzeugen. Der Browser gruppiert Schnappschüsse von Elementen unter Verwendung einer eindeutigen view-transition-name Eigenschaft, die eine eindeutige Kennung für die Übergänge festlegt, auf die wir uns beziehen können. Diese Kennung wird im ::view-transition pseudoelement mit allen Übergängen auf der Seite erfasst.

Sie können sich ::view-transition als das :root Element aller Seitenübergänge vorstellen, das alle Seitenübergangsteile für die gleiche Standardanimation kombiniert.

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

Beachten Sie, dass sich jeder Übergang in einem ::view-transition-group befindet, die Gruppe ein ::view-transition-image-pair enthält und das Paar sowohl "alte" als auch "neue" Seiten -Schnappschüsse enthält. Wir können so viele Gruppen hinzufügen, wie wir möchten, und sie enthalten alle ein Bildpaar mit zwei Schnappschüssen.

Schnelles Beispiel: Verwenden wir ::view-transition "Root" als Parameter, um alle Übergänge auf der Seite auszuwählen und eine Gleitanimation zwischen den alten und den neuen Schnappschüssen zu erstellen.

<code>if(a ? b : c)</code>

Wenn wir zwischen Seiten navigieren, rutscht die gesamte alte Seite nach links und die gesamte neue Seite wird von rechts eingeschaltet. Vielleicht möchten wir verhindern, dass bestimmte Elemente auf der Seite am Übergang teilnehmen, weil sie zwischen den Seiten bestehen, während sich alles andere vom "alten" Schnappschuss zum "neuen" Schnappschuss bewegt.

Dies ist der Schlüssel zu den view-transition-name -attributen, da wir bestimmte Elemente schnappen und sie in ::view-transition-group von allem anderen trennen können, um sie separat zu verarbeiten.

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Sie können eine lebende Demo auf GitHub finden. Bitte beachten Sie, dass zum Zeitpunkt des Schreibens die Browserunterstützung auf Chrombrowser (d. H. Chrom, Edge, Opera) beschränkt ist.

Wir müssen uns sehr freuen, wenn es darum geht, über Dokumentansichten hinweg zu übergehen. Wenn wir beispielsweise mehrere Elemente mit unterschiedlichem view-transition-name haben, können wir ihnen einen gemeinsam genutzten view-transition-class zur Verfügung stellen, um sie an einem Ort zu stylen - und sogar JavaScript zu verwenden, um den Übergang der Ansicht weiter anzupassen, um zu überprüfen, welche URL die Seite wechselt und entsprechend animieren.

Merkmal 3: Ankerpositionierung

Es scheint eine Brise zu sein, Elemente relativ zu einem anderen Element in CSS zu lokalisieren, erfordert jedoch tatsächlich die Mischung von Margenattributen (oben, unten, links, rechts), die auf einer Reihe von magischen Zahlen basieren, um das richtige Ergebnis zu erzielen. Zum Beispiel könnte eine Widget -Eingabeaufforderung auf der linken Seite eines Elements während des Schwebers in HTML so aussehen:

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

… und CSS unter Verwendung der aktuellen Methode:

<code>if(a ? b : c)</code>

Die Positionierungs- und Randwerte von Elementen ändern, ist nicht das Ende der Welt, aber es fühlt sich so an, als ob es einen einfacheren Weg geben sollte. Zusätzlich sind die Tooltips im letzten Beispiel sehr zerbrechlich.

CSS Anker -Positionierung ist ein weiteres neues Feature, das beim CSSWG -Meeting besprochen wird, und es hofft, solche Dinge viel einfacher zu machen.

Ankerpunkte erstellen

Die Grundidee ist, dass wir zwei Elemente erstellen:

• Man fungiert als Anker,
• ein "Ziel", das an das Element verankert ist.

Auf diese Weise haben wir eine deklarativere Möglichkeit, ein Element zu verbinden und es relativ zum Ankerelement zu positionieren.

Zunächst müssen wir unser anchor-name Ankerpunkt Element mit dem neuen -attribut erstellen.

Ändern Sie unsere Marke geringfügig:

<code>.forecast {
  background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>

Wir geben eine eindeutige gepunktete Eindrücke als Wert an (genau wie eine benutzerdefinierte Eigenschaft):

<code>.forecast {
  background-color: if(
    style(--weather: clouds) ? var(--clouds-color): 
    style(--weather: sunny) ? var(--sunny-color);
    style( --weather: rain) ? var(--rain-color): var(--default-color)
  );
}</code>

Dann verwenden wir das Attribut position-anchor und fixed oder absolute Positionierung, um .tooltip zu assoziieren. .anchor

<code>.my-element {
  width: if(media(width > 1200px) ? var(--size-l): var(--size-m));
}</code>

steht derzeit auf .tooltip, aber wir sollten es an einen anderen Ort verschieben, um dies zu verhindern. Der einfachste Weg, .anchor zu bewegen, besteht darin, das neue .tooltip Attribut zu verwenden. Nehmen wir an, inset-area befindet sich in der Mitte eines 3 × 3 -Gitters, und wir können Tooltips im Raster lokalisieren, indem wir Zeilen und Spalten zuweisen. .anchor

inset-area Die Eigenschaft ist .tooltip nimmt zwei Werte in der Position in einer bestimmten Zeile und Spalte ein. Es zählt mithilfe physischer Werte (wie links, rechts, oben und unten) sowie logische Werte (z. B. Start und Ende) des Schreibmusters des Benutzers und der gemeinsamen Mittelwerte. Es akzeptiert auch Werte, die X- und Y-Koordinaten wie X-Start und Y-End verweisen. Alle diese Werttypen sind Methoden, die Raum auf einem 3 × 3 -Gitter darstellen.

Wenn wir beispielsweise relativ zur oberen rechten Ecke des Ankerpunkts positioniert werden möchten, können wir die Eigenschaft .tooltip wie folgt festlegen: inset-area

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Schließlich können wir das

Präfix verwenden, wenn unser Tooltip zwei Bereiche des Netzes umfasst. Zum Beispiel platziert span- span-top oben und in der Mitte des Netzes. Wenn wir die gesamte Richtung umfassen wollen, können wir den Wert .tooltip verwenden. span-all

Eines der Beispielprobleme, die wir keine Ankerpunkte haben, ist, dass Tooltips den Bildschirm überlaufen können. Wir können dieses Problem mithilfe einer anderen neuen Eigenschaft (diesmal

genannt) lösen, kombiniert mit einer neuen position-try-options -Funktion. inset-area()

(Ja, es gibt eine

-Funktion und eine inset-area -Funktion. Dies ist eine, an die wir uns erinnern müssen!) inset-area() Die Eigenschaft

akzeptiert eine von Kommas getrennte Liste von Fallback-Positionen, wenn position-try-options den Bildschirm überläuft. Wir können eine Reihe von .tooltip -Funktionen bereitstellen, die jeweils den gleichen Attributwert wie das Attribut inset-area() enthalten. Jedes Mal, wenn der Tooltip aus dem Bildschirm ausgeht, wird der nächste deklarierte Ort "versucht" und wenn dieser Ort Überlauf verursacht, wird der nächste deklarierte Ort versucht, und so weiter. inset-area

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

Dies ist ein sehr neuartiges Konzept und es dauert einige Zeit, um zu verstehen. CSSWG -Mitglied Miriam Suzanne setzte sich mit James Stuckey Weber zusammen, um in einem sehr lohnenden Video zu diskutieren und die Ankerpositionierung zu versuchen.

Wenn Sie nach TL; DW suchen, machte sich Geoff Graham Notizen zum Video.

Der Einfachheit halber werden hier nicht viele Aspekte der Ankerpositionierung eingeführt, insbesondere die neuen

-Funktionen und

AT-Rule. Die anchor() -Funktion gibt die berechnete Position der Ankerkante zurück, die mehr Kontrolle über die Tooltip -Margeneigenschaften bietet. @try-position AT-RULE wird verwendet, um die benutzerdefinierte Position zu definieren, die in der Eigenschaft anchor() festgelegt werden soll. @try-position position-try-options Meine Intuition ist, dass für die überwiegende Mehrheit der Anwendungsfälle

leistungsstark genug sein wird.

inset-area csswg ist eine kollektive Anstrengung

Ich habe früher gesagt, dass dieser Artikel keine genaue Zusammenfassung der Diskussionen bei CSSWG -Sitzungen enthält, sondern nur eine breite Einführung in die neuen Spezifikationen von CSS sein wird, die aufgrund ihrer Neuheit bei diesen Treffen zu sehen sind. Es gibt sogar einige Funktionen, die wir in dieser Überprüfung einfach keine Zeit haben, die noch diskutiert werden (

husten

, Mauerwerk).

Eines der Dinge, die sicher sind, dass die Spezifikation in ein oder zwei Treffen in einer Vakuumumgebung nicht formuliert ist.

Ich hatte auch die Gelegenheit, mit einigen der großen Entwickler von CSSWG zu sprechen, und fand die meisten, die sie von den Meetings interessant bekamen. Sie könnten erwarten, dass if() ganz oben auf der Liste steht, da dies in den sozialen Medien diskutiert wird. Das CSSWG -Mitglied Emilio Cobos sagt mir jedoch, dass das letter-spacing -attribut beispielsweise inhärent fehlerhaft ist und es keine einfache Lösung gibt, um das Problem zu lösen, dass es mit der aktuellen Definition von letter-spacing übereinstimmt und wie es im Browser verwendet wird. Dies schließt die Tatsache ein, dass die Umwandlung normaler Eigenschaften in abgekürzte Eigenschaften für die Codebasis gefährlich sein kann.

Wir können denken, dass jedes Detail der Bedeutungslosigkeit sorgfältig analysiert wird, um dem Internet und der Liebe zum Internet zu helfen. Und wie ich bereits erwähnt habe, passieren diese Dinge nicht in einer geschlossenen Vakuumumgebung. Wenn Sie ein Interesse an der Zukunft von CSS haben - ob es sich um einen Schritt an CSS oder aktiv beteiligt ist -, sollten Sie eine der folgenden Ressourcen berücksichtigen.

• CSSWG Homepage
• CSSWG Blog
• CSSWG Draft (GitHub)
• CSSWG News RSS -Feed (Atom)
• CSS -Spezifikationstabelle
• öffentliche Bewertung Ankündigung Mailingliste und Archive (und RSS -Feed)

Das obige ist der detaillierte Inhalt vonCSS -Sachen I ' Ich bin nach dem letzten CSSWG -Treffen aufgeregt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!