Wenn ich die CSS-Entwicklungen in Kategorien einteilen würde, wären wir weit über die Zeiten hinausgegangen, in denen wir einfach nach dem Grenzradius gefragt haben, um das Gefühl zu haben, in der Zukunft zu leben. Wir leben derzeit in einer Zeit, in der uns die Plattform Werkzeuge an die Hand gibt, die nicht nur die visuelle Ebene optimieren, sondern die Art und Weise, wie wir Schnittstellen entwerfen, grundlegend neu definieren. Ich dachte, die Zahl der im Jahr 2024 angekündigten Features sei nicht zu überbieten. Ich habe mich noch nie so glücklich geirrt.
„CSS Wrapped 2025“ des Chrome-Teams ist nicht nur eine Liste von Funktionen; Es ist ein Manifest für ein dynamisches, natives Web. Als jemand, der einige Jahre damit verbracht hat, diese Entwicklungen zu dokumentieren – von der Definition der „CSS5“-Ära bis hin zu den Feinheiten moderner Layout-Dienstprogramme – blicke ich mit großer Spannung auf die Zusammenfassung dieses Jahres. Wir sehen einen Wandel hin zu „optimierter Ergonomie“ und „Interaktionen der nächsten Generation“, der es uns ermöglicht, nicht mehr gegen den Code zu kämpfen, sondern mit der Gestaltung von Schnittstellen in ihrem natürlichen Zustand zu beginnen.
In diesem Artikel finden Sie einen umfassenden Überblick über die herausragenden Funktionen des Chrome-Berichts, betrachtet durch die Linse meiner jüngsten Experimente und Hoffnungen für die Zukunft der Plattform.
Die Komponentenrevolution: Endlich eine nativ anpassbare Auswahl
Seit Jahren verlassen wir uns bei der Formatierung von Dropdowns auf umfangreiche JavaScript-Bibliotheken, ein „Jahrzehnte altes Problem“, das die Plattform endlich gelöst hat. Wie ich in meinem ausführlichen Einblick in die Geschichte des anpassbaren Select (und verwandter Artikel) ausführlich dargelegt habe, war dies ein langer Weg, der Open UI, das Entfernen von Namen wie
Die fantastische Ergänzung, reichhaltige Inhalte in Optionen wie Bildern oder Flaggen zu ermöglichen, macht viel Spaß. Heutzutage können wir alle möglichen Auswahlmöglichkeiten erstellen:
Demo: Ich habe eine Poké-Adventure-Demo erstellt, die zeigt, wie das neue
Sehen Sie sich den Stift an. Eine anpassbare Auswahl mit Bildern in den Optionen und den ausgewählten Inhalten [gegabelt] von Utilitybend.
Demo: Ein umfassender Blick auf die Gestaltung der Auswahl nur mit Pseudoelementen.
Siehe den Stift Eine anpassbare Auswahl mit nur Pseudoelementen [gegabelt] von Utilitybend.
Demo: Oder Sie können mit dieser Menüauswahl-Demo mit optgroups noch einen Schritt weiter gehen.
Siehe den Stift Ein aktuelles Auswahlmenü mit optgroups [gegabelt] von Utilitybend. Allein diese Funktion signalisiert einen massiven Wandel in der Art und Weise, wie wir Formulare erstellen, wodurch Abhängigkeiten und technische Schulden reduziert werden. Scroll-Marker und der Tod des JavaScript-Karussells Die Erstellung von Karussells war in der Vergangenheit ein Reibungspunkt zwischen Entwicklern und Kunden. Kunden lieben sie, Entwickler fürchten sich vor dem JavaScript, das erforderlich ist, um sie zugänglich und leistungsfähig zu machen. Die Einführung der Pseudoelemente ::scroll-marker und ::scroll-button() ändert diese Dynamik völlig. Diese Funktionen ermöglichen es uns, Navigationspunkte und Scroll-Buttons rein mit CSS zu erstellen, die nativ mit dem Scroll-Container verknüpft sind. Wie ich in meinem Blog schrieb, war dies „Liebe auf den ersten Blick“. Die Möglichkeit, einen voll funktionsfähigen, zugänglichen Slider ohne eine einzige Zeile JavaScript zu erstellen, ist nicht nur praktisch; es ist ein Triumph der Leistung. Es gibt einige Bedenken hinsichtlich der Barrierefreiheit dieser Funktion, und auch wenn diese berechtigt sind, gibt es für uns Entwickler möglicherweise eine Möglichkeit, sie zum Laufen zu bringen. Das Gute daran ist, dass all diese Änderungen an der Benutzeroberfläche es viel einfacher machen als die benutzerdefinierte DOM-Manipulation und das Herumschleppen von Aria-Tags, aber ich schweife ab ... Wir können Markierungen jetzt mithilfe von scroll-marker-group automatisch gruppieren und die Schaltflächen mithilfe der Ankerpositionierung so gestalten, dass sie genau dort platziert werden, wo wir möchten.
.karussell { Überlauf-x: auto; Scroll-Marker-Gruppe: danach; /* Erstellt den Container für Punkte */
/* Schaltflächen erstellen */ &::scroll-button(inline-end),&::scroll-button(inline-start) { Inhalt: " "; Position: absolut; /* Ankerpositionierung verwenden, um sie zu zentrieren */ Positionsanker: --carousel; oben: Anker (Mitte); }
/* Erstelle die Markierungen für die Kinder */ div { &::scroll-marker { Inhalt: " "; Breite: 24px; Randradius: 50 %; Cursor: Zeiger; } /* Markiert den aktiven Marker */ &::scroll-marker:target-current { Hintergrund: weiß; } } }
Demo: Mein Experiment zum Erstellen eines Karussells ausschließlich aus HTML und CSS, wobei die Ankerpositionierung zum Platzieren der Schaltflächen verwendet wird.
Sehen Sie sich das Pen Carousel Pure HTML and CSS [forked] von Utilitybend an.
Demo: Ein schickes Webshop-Slider-Remake mit attr(), um Hintergrundbilder dynamisch in die Markierungen zu ziehen.
Sehen Sie sich das schicke Slider-Remake von Pen Webshop in CSS [forked] von Utilitybend an. Statusabfragen: Klebriges Ding steckt fest? Bissiges Ding ist geschnappt? Lange Zeit fehlte uns die Fähigkeit, ohne Rückgriff auf IntersectionObserver-Hacks zu erkennen, ob ein „klebriges Ding feststeckt“ oder ob ein „zackiger Gegenstand zerbrochen ist“. Chrome 133 führte Scroll-State-Abfragen ein, die es uns ermöglichen, diese Zustände deklarativ abzufragen. Durch Festlegen von „container-type: scroll-state“ können wir nun untergeordnete Elemente danach formatieren, ob sie hängen bleiben, eingerastet sind oder überlaufen. Das ist eine massive Verbesserung der „Lebensqualität“, auf die ich seit dem CSS-Tag 2023 sehnsüchtig gewartet habe. Es hat sich sogar stark weiterentwickelt, da wir auch die Richtung der Schriftrolle sehen können, herrlich! Ein einfaches Beispiel: Wir können schließlich nur dann einen Schatten auf eine Kopfzeile anwenden, wenn diese tatsächlich am oberen Rand des Ansichtsfensters haftet: .header-container { Containertyp: Scroll-Status; Position: klebrig; oben: 0;
Kopfzeile { Übergang: Box-Shadow 0,5 s Ease-Out; /* Die Abfrage prüft den Zustand des Containers */ @container scroll-state(stuck: top) { Box-Shadow: rgba(0, 0, 0, 0,6) 0px 12px 28px 0px; } } }
Demo: Ein Sticky-Header, der nur dann einen Schatten anwendet, wenn er tatsächlich hängen bleibt.
Sehen Sie sich die Pen Sticky-Header mit Scroll-State-Abfrage an und prüfen Sie, ob das Sticky-Element durch Utilitybend hängen bleibt [gegabelt].
Demo: Eine Pokémon-Themenliste, die Scroll-State-Abfragen in Kombination mit Ankerpositionierung verwendet, um einen Rahmen über den aktuell erfassten Charakter zu verschieben.
Sehen Sie sich die Pen Scroll-State-Abfrage an, um zu überprüfen, welches Element mit CSS gefangen wird, Pokemon-Version [geforkt] von Utilitybend. Optimierte Ergonomie: Logik in CSS Der Abschnitt „Optimierte Ergonomie“ von CSS Wrapped hebt Funktionen hervor, die unsere Arbeitsabläufe intuitiver machen. Drei Merkmale sind für die Art und Weise, wie wir Logik schreiben, von entscheidender Bedeutung:
if()-AnweisungenWir erhalten endlich Bedingungen in CSS. Die Funktion if() verhält sich wie ein ternärer Operator für Stylesheets und ermöglicht es uns, Werte basierend auf Medien-, Support- oder Stilabfragen inline anzuwenden. Dies reduziert den Bedarf an ausführlichen @media-Blöcken für einzelne Eigenschaftsänderungen. @function-FunktionenWir können endlich etwas Logik an einen anderen Ort verschieben, was zu saubereren Dateien führt, einer echten Lebensqualitätsfunktion. sibling-index() und sibling-count()Diese Baumzählfunktionen lösen das Problem der Staffelung von Animationen oder der Gestaltung von Elementen basierend auf der Listengröße. Wie ich in „Geschwister mit CSS gestalten“ erläutert habe, war es noch nie einfacher. Dadurch entfällt die Notwendigkeit, benutzerdefinierte Eigenschaften (wie --index: 1) in unserem HTML fest zu codieren.
Beispiel: Layouts berechnen Wir können jetzt prägnante mathematische Formeln schreiben. Beispielsweise wird die Staffelung einer Animation für Karten, die auf dem Bildschirm erscheinen, trivial: .card-container > * { Animation: 0,6 Sekunden Ease-Out nach vorne anzeigen; /* Keine manuellen --index-Variablen mehr! */ Animationsverzögerung: calc(sibling-index() * 0,1s); }
Ich habe sogar damit experimentiert, diese Funktionen zusammen mit der Trigonometrie zu verwenden, um Gegenstände ohne JavaScript in einem perfekten Kreis zu platzieren.
Demo: Dynamische atemberaubende Kartenanimationen.
Sehen Sie sich die Pen Stagger-Karten mit sibling-index() [forked] von Utilitybend an.
Demo: Elemente in einem perfekten Kreis platzieren, indem man „sibling-index“, „sibling-count“ und die neue CSS-Funktion „@function“ verwendet.
Siehe den Stift Der Kreis mit Sibling-Index, Sibling-Count und Funktionen [geforkt] von Utilitybend. Meine CSS-To-Do-Liste: Funktionen, die ich unbedingt ausprobieren möchte Während ich damit beschäftigt war, Auswahlen und Übergänge zu gestalten, ist der Bericht „CSS Wrapped 2025“ vollgepackt mit anderen Extras, die ich in CodePen noch nicht nutzen konnte. Diese stehen ganz oben auf meiner Liste für meine nächsten Experimente: Verankerte Containerabfragen Ich habe CSS-Ankerpositionierung für die Schaltflächen in meiner Karussell-Demo verwendet, aber „CSS Wrapped“ hebt eine hervorWeiterentwicklung davon: Verankerte Containerabfragen. Dies löst ein Problem, das wir alle mit Tooltips hatten: Wenn der Browser den Tooltip aus Platzgründen von oben nach unten dreht, bleibt der „Pfeil“ oft in die falsche Richtung zeigen. Mit verankerten Containerabfragen (@container verankert(fallback: flip-block)) können wir das Element basierend auf der vom Browser tatsächlich gewählten Fallback-Position formatieren. Verschachtelte Ansichtsübergangsgruppen Ansichtsübergänge waren eine Revolution, hatten aber einen besonderen Nachteil: Sie haben den Elementbaum abgeflacht, was häufig 3D-Transformationen oder einen Überlauf verursacht hat: Clip. Ich hatte immer das Gefühl, dass etwas fehlte, und das könnte die Antwort sein. Durch die Verwendung von view-transition-group: near können wir endlich Übergangsgruppen ineinander verschachteln. Dadurch können wir Clipping-Effekte oder 3D-Rotationen während eines Übergangs beibehalten – etwas, das bisher unmöglich war, da die Elemente auf die oberste Ebene gehoben wurden. .card img { Ansichtsübergangsname: Foto; Ansichtsübergangsgruppe: am nächsten; /* Verschachtelt bleiben! */ }
Typografie und Formen Schließlich brennt der Ergonom in mir darauf, „Text Box Trim“ auszuprobieren, das verspricht, den lästigen zusätzlichen Leerraum über und unter dem Textinhalt (dem Anfang) zu entfernen, um endlich eine perfekte vertikale Ausrichtung zu erreichen. Und für die kreative Seite eröffnen Corner-Shape und die Funktion shape() nicht-rechteckige Layouts, die „Quadrate“ und komplexe Pfade ermöglichen, die auf CSS-Variablen reagieren. Abgesehen davon kann ich es kaum erwarten, ein Design voller Kreise zu haben! Eine hoffnungsvolle Zukunft Wir erleben eine Welt, in der CSS in der Lage wird, Logik, Zustände und komplexe Interaktionen zu verarbeiten, die zuvor zu JavaScript gehörten. Funktionen wie moveBefore (Beibehaltung des DOM-Status für Iframes/Videos) und attr() (Verwendung von Typen außerhalb von Strings für Farben und Raster) untermauern diese Realität zusätzlich. Während einige dieser Funktionen derzeit experimentell oder spezifisch für Chrome sind, ist die Dynamik unbestreitbar. Wir müssen auf eine kontinuierliche Unterstützung aller Browser durch Initiativen wie Interop hoffen, um sicherzustellen, dass diese Funktionen zur Grundlage werden. Allerdings sind Browser-Engines genauso wichtig wie all diese großartigen Funktionen in „Chrome first“. Diese neuen Funktionen müssen besprochen, herumgebastelt und getestet werden, bevor sie überhaupt in Browsern landen. Es ist ein fantastischer Moment, in CSS einzusteigen. Wir gestalten nicht mehr nur Dokumente; Wir erstellen dynamische, ergonomische und robuste Anwendungen mit einem nativen Toolkit, das leistungsfähiger ist als je zuvor. Lassen Sie uns mit dieser neuen Ära beginnen und die Botschaft verbreiten. Das ist CSS Wrapped!
