Neues in der Web-Benutzeroberfläche

Bramus
Una Kravets

Veröffentlicht: 1. Juli 2026

Auf der Google I/O 2026 haben wir eine Vielzahl von Updates für die Web-UI-Plattform vorgestellt. Das moderne Web bietet Entwicklern unglaublich leistungsstarke Tools, um hochwertige, taktile Nutzererlebnisse zu schaffen – von der Berücksichtigung von Nutzereinstellungen über die Implementierung natürlicher Interaktionen, die Führung der Navigation, die Reduzierung von Unordnung bis hin zur Anpassung an verschiedene Formfaktoren.

Hier finden Sie eine umfassende Zusammenfassung aller Funktionen, die in der Sitzung „Neues in der Web-Benutzeroberfläche“ erwähnt wurden, strukturiert nach unseren wichtigsten UX-Grundsätzen.

Teil 1: Nutzereinstellungen respektieren

Personalisierung ist für die Nutzerfreundlichkeit von Websites von grundlegender Bedeutung. Moderne Web-APIs erleichtern die automatische Anpassung an die Entscheidungen der Nutzer auf Systemebene. Auch wenn diese Konzepte grundlegend sind und wir schon seit Jahren darüber sprechen, gibt es tatsächlich einige neue APIs und Muster, die die Entwicklung dieser dynamischen Personalisierung erleichtern.

1. contrast-color()

Die CSS-Funktion contrast-color() verwendet eine Eingabefarbe und gibt automatisch entweder black oder white zurück, je nachdem, welche Farbe gemäß dem WCAG AA-Algorithmus für Mindestkontrast den höheren Kontrast zur Eingabefarbe aufweist. So wird die Lesbarkeit gewährleistet, ohne dass Text-Hintergrundfarbenpaare manuell verwaltet werden müssen.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Weitere Informationen zu contrast-color()

2. light-dark()

Mit der CSS-Funktion light-dark() können Sie in einer einzigen Deklaration zwei verschiedene Werte (Farben oder Bilder) für eine Eigenschaft angeben, einen für den hellen Modus und einen für den dunklen Modus. Der Browser wählt automatisch die richtige Kontrastfarbe basierend auf dem aktiven color-scheme aus, das auf :root oder einem übergeordneten Element auf light, dark oder light dark festgelegt sein muss.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Neu bei light-dark() ist, dass es nicht mehr nur auf Farbwerte beschränkt ist. Ab Chrome 150 werden auch zwei Bildwerte akzeptiert.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Benutzerdefinierte CSS-Funktionen (@function)

Mit der @function-Regel können Sie benutzerdefinierte, wiederverwendbare Funktionen direkt in nativem CSS definieren. Sie kann lokal begrenzte benutzerdefinierte Properties als Argumente akzeptieren, Berechnungen durchführen und Werte mit dem Deskriptor result zurückgeben. So sind weniger Präprozessoren erforderlich.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

In Kombination mit Container-Stil-Abfragen und der CSS-Funktion if() können Sie eine benutzerdefinierte --light-dark()-Funktion erstellen, die mit beliebigen Werttypen funktioniert, wie in dieser Demo gezeigt:

4. Containerstilabfragen

Stilabfragen sind Teil von CSS Container Queries und ermöglichen es Entwicklern, Stile auf untergeordnete Elemente anzuwenden, die auf den berechneten benutzerdefinierten Eigenschaftswerten eines übergeordneten Containers basieren. So können dynamische Komponenten ohne explizite Größenbegrenzung erstellt werden.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

In dieser Demo werden Stilabfragen verwendet, um die Farben basierend auf einer benutzerdefinierten --theme-Eigenschaft festzulegen.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Weitere Informationen zu Stilabfragen

5. CSS-if()-Funktion

Mit der CSS-Funktion if() lässt sich Inline-Bedingungslogik direkt auf CSS-Property-Werte anwenden. Sie wertet eine Reihe von durch Semikolons getrennten Bedingungen (Stil-, Media- oder Feature-Abfragen) aus und ermöglicht es Ihnen, verschiedene Werte festzulegen, die mit der ersten zutreffenden Bedingung verknüpft sind. Außerdem können Sie einen optionalen else-Fallback festlegen.

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

In der vorherigen Demo wird die Funktion if() verwendet, um eine thematische Kontrastfarbe basierend auf der Ausgabe der Funktion contrast-color() zu erstellen.

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

Mit der CSS-Funktion at-rule() für die Verwendung mit @supports können Entwickler erkennen, ob ein Browser eine bestimmte @-Regel wie @starting-style oder @view-transition erkennt.

So prüfen Sie beispielsweise, ob @function unterstützt wird:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Mit at-rule() lässt sich nur die grundlegende Unterstützung der Regel prüfen. Sie kann nicht verwendet werden, um bestimmte Deskriptoren, Präludien oder vollständige at-rule-Blöcke zu testen. Es gibt Problemumgehungen, um Funktionen wie verankerte Anfragen oder Stilanfragen zu erkennen.

Weitere Informationen zu @supports at-rule

7. <meta name="text-scale">

Mit dem HTML-Meta-Tag text-scale wird festgelegt, dass die anfängliche Schriftgröße des Stammelements <html> auf der Seite proportional zu den Einstellungen für die Textskalierung auf Betriebssystem- und Browserebene skaliert wird. Das ist besonders wichtig für mobile Plattformen.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

Wenn die Änderung angewendet wird, wird die Schriftgröße für das html-Element vom Betriebssystem bestimmt. Sie müssen also keine Basis-font-size festlegen. Wenn Sie dann Längen mit relativen Einheiten wie em und rem verwenden, basieren die berechneten Pixelwerte auf dieser Schriftgröße.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Auf dem Rendering-Tab in den Entwicklertools können Sie die bevorzugte Schriftgröße emulieren. Verwenden Sie das Drop-down-Menü, um den Wert zu ändern.

Weitere Informationen zu <meta name=text-scale>

Teil 2: Natürliche Interaktionen implementieren

Intuitive, physische Bewegungen und natürliche Gesten sind entscheidend, damit sich Webanwendungen so taktil anfühlen wie native Apps. Mit modernem CSS ist das einfacher zu erreichen.

8. linear()-Easing-Funktion

Mit der Easing-Funktion linear() können Sie komplexe, benutzerdefinierte Übergangskurven (z. B. Sprünge, Federn oder elastische Überschwinger) erstellen, indem Sie linear zwischen einer unbegrenzten Anzahl von angegebenen Fortschrittspunkten interpolieren.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

In der folgenden Demo wird linear() verwendet, um dem Dialog beim Ein- und Ausblenden eine natürliche Ein- und Ausblendung zu geben.

Weitere Informationen zu linear()

9. @starting-style

Mit der CSS-At-Regel @starting-style werden die Startwerte für Eigenschaften eines Elements definiert, von denen aus Sie einen Übergang erstellen möchten, wenn das Element zum ersten Mal im DOM gerendert wird oder wenn sich seine display von none in einen sichtbaren Wert ändert. So lassen sich sanfte Einblendübergänge ermöglichen.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

In der vorherigen Demo wird dies verwendet, um das <dialog> beim ersten Erscheinen einzublenden.

10. transition-behavior: allow-discrete

Mit der Eigenschaft transition-behavior (oft als allow-discrete in der Kurzschreibweise transition verwendet) können Sie diskrete Eigenschaften wie display oder overlay überblenden. So bleiben Elemente während der Übergangsanimationen sichtbar, bevor sie ausgeblendet werden.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() und sibling-count()

Die CSS-Funktionen sibling-index() und sibling-count() geben Ganzzahlen zurück, die die 1-basierte Position eines Elements unter seinen gleichgeordneten Elementen bzw. die Gesamtzahl der gleichgeordneten Elemente darstellen. Sie eignen sich hervorragend, um gestaffelte Animationsverzögerungen dynamisch in CSS ohne JavaScript zu berechnen.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

In dieser Demo werden die Inhalte des Dialogfelds durch die Verwendung von sibling-index() in animation-delay gestaffelt.

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Dialogfeld „Leicht schließen“ (closedby-Attribut)

Mit dem Attribut closedby für das <dialog>-Element (mit dem Wert any) können Sie das deklarative Verhalten „Light Dismiss“ verwenden. Dadurch werden modale Dialogfelder automatisch geschlossen, wenn Sie außerhalb des Dialogfelds klicken oder die ESC-Taste drücken. Dazu ist kein benutzerdefiniertes JavaScript erforderlich.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Sie können es in der vorherigen Demo ausprobieren.

13. corner-shape

Mit der experimentellen Kurzform-Eigenschaft corner-shape können Entwickler abgerundete Ecken (ab border-radius) ändern, um benutzerdefinierte visuelle Formen wie bevel, scoop, notch oder squircle (über superellipse()) zu erstellen. Rahmen, Schatten und Fokusumrisse passen sich automatisch an die Form an.

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

Teil 3: Geführte Navigation bereitstellen

Wenn Sie den Nutzerfluss steuern, bleibt der Kontext erhalten und der Ablauf der Anwendung wird nachvollziehbar. So werden verwirrende Neuladevorgänge vermieden. Dazu gibt es mehrere Möglichkeiten, z. B. mit Ansichtsübergängen, die vor Kurzem einige Updates erhalten haben.

14. Ansichtsübergänge im selben Dokument

Same-Document-Übergänge sind Teil der View Transition API und bieten einen Mechanismus zum Animieren zwischen DOM-Zuständen in Single-Page-Anwendungen (SPAs). Dazu werden Snapshots aufgenommen und mit CSS überblendet.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Weitere Informationen zu Ansichtsübergängen im selben Dokument

15. Dokumentübergreifende Ansichtsübergänge

Erweitert die View Transition API auf Anwendungen mit mehreren Seiten (Multi-Page Applications, MPAs). So können Sie nahtlose, animierte Übergänge erstellen, wenn Sie zwischen verschiedenen Dokumenten wechseln. Dazu werden Elemente mit derselben view-transition-name auf verschiedenen Seiten abgeglichen.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Weitere Informationen zu dokumentübergreifenden Ansichtsübergängen

16. View-Übergänge mit Elementbereich

Mit View Transitions mit Elementbereich, die in Chrome 147 eingeführt wurden, können Sie eine View Transition nur für einen bestimmten DOM-Teilbaum (mit element.startViewTransition()) ausführen, während der Rest der Seite aktiv und interaktiv bleibt.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

Wenn Sie einen elementbezogenen Ansichtsübergang starten, wird er isoliert ausgeführt: Es wird nur dieser Teilbaum nach Elementen mit einem view-transition-name gescannt und das Pseudoelement ::view-transition wird in das Stammverzeichnis des Bereichs eingefügt. Die Isolation ist dank der automatischen Anwendung von view-transition-scope: all möglich.

So können mehrere Ansichtsübergänge gleichzeitig ausgeführt und Ansichtsübergänge verschachtelt werden: Während die Elemente in diesen Listen neu angeordnet werden, können Sie auch die Listen selbst tauschen.

Außerdem werden die Gruppen-Pseudoklassen automatisch verschachtelt und der Überlauf der umschließenden Pseudoklasse „group-children“ wird bei Bedarf abgeschnitten.

Übergänge mit eingeschränktem Bereich eignen sich hervorragend für Mikrointeraktionen und statusbezogene Transformationen auf der Seite. Sie bieten dem Nutzer mehr Kontext, wenn es eine visuelle Änderung gibt. So können Sie die Nutzerfreundlichkeit Ihrer Anwendung verbessern und gleichzeitig das Erscheinungsbild optimieren. Diese Kleinigkeiten machen einen großen Unterschied!

Weitere Informationen zu Ansichtsübergängen mit Elementbereich

17. Zweiphasige Ansichtsübergänge

Dies ist eine experimentelle Funktion, die sofort einen Übergang zwischen Dokumenten startet, ohne darauf zu warten, dass das neue DOM bereit ist. Zuerst wird ein Zwischenbildschirm mit einem Skelett oder einer Lade-UI angezeigt, bevor der Übergang zwischen Dokumenten fortgesetzt wird.

Weitere Informationen zu zweiphasigen Ansichtsübergängen

18. Scrollgesteuerte Animationen

Bei scrollgesteuerten Animationen wird der Fortschritt einer CSS-Animation direkt mit der Scrollposition eines Scrollcontainers verknüpft. So können Entwickler scrollbasierte Benutzeroberflächen wie effiziente Parallaxeneffekte und Scrollindikatoren erstellen.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Durch Scrollen ausgelöste Animationen

Neu in Chrome sind Animationen, die durch Scrollen ausgelöst werden. Scroll-basierte Animationen lösen eine standardmäßige zeitbasierte CSS-Animation aus, wenn eine Scrollgrenze überschritten wird. Dabei wird timeline-trigger verwendet, um den Trigger zu definieren, und animation-trigger, um die Animation abzuspielen. Das ist eine deklarative Alternative zu IntersectionObserver.

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Der zugrunde liegende Mechanismus für scroll-getriggerte Animationen sind Zeitachsentrigger, die entweder aktiv oder inaktiv sind.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Aktivieren Sie in der folgenden Demo den Visualizer, um zu sehen, was passiert: Der erste Bereich ist der Aktivierungsbereich. Er bestimmt, wann der Trigger aktiv wird. Der zweite Bereich ist der aktive Bereich, der bestimmt, wie lange er aktiv bleiben soll.

Weitere Informationen zu scrollbasierten Animationen

20. scroll-target-group: auto

Sie können jetzt einen nativen CSS-Scroll-Spy erstellen, der Navigationslinks basierend auf der Scrollposition des Nutzers automatisch hervorhebt. Wenn Sie scroll-target-group: auto in einer Navigationsliste festlegen, legt der Browser automatisch aria-current="true" fest und wendet die Pseudoklasse :target-current auf den aktiven Link an. :target-current kann dann verwendet werden, um die aktiven Links weiter zu gestalten.

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Weitere Informationen zum CSS-Scroll-Spy mit scroll-target-group

21. Containeroption scrollIntoView()

Die Methode scrollIntoView() erhält die Option container. Durch das Festlegen von target.scrollIntoView({container: 'nearest'}) wird das Scrollen auf den nächstgelegenen übergeordneten Scroller beschränkt, anstatt dass es bis ganz nach oben weitergeleitet wird. So wird ein verwirrendes Scrollen auf Seitenebene verhindert.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Mit dem Kästchen in dieser Demo können Sie die Option aktivieren und deaktivieren:

Weitere Informationen zu container: "nearest"

22. Programmatisches Scrollen mit Wartefunktion

Alle programmatischen Scrollmethoden (z. B. scroll(), scrollTo() und scrollIntoView()) geben jetzt ein Promise zurück. So können Entwickler await, dass die Animationen für das sanfte Scrollen abgeschlossen sind, bevor sie die nachfolgende Logik ausführen (z. B. das Hinzufügen eines Hervorhebungseffekts).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

In der folgenden Demo sehen Sie, wie das funktioniert: Das Element wird zuerst in den sichtbaren Bereich gescrollt und dann hervorgehoben.

Teil 4: Inhalte maximieren, Rauschen reduzieren

Eines der frustrierendsten Web-Erlebnisse ist, wenn man erwartet, Inhalte zu sehen, aber durch aufdringliche Pop-ups oder Banner blockiert wird. Priorisieren Sie den Inhaltsbereich, indem Sie visuelle Unordnung und Anwendungsränder entfernen und sekundäre Aktionen hinter einer mehrschichtigen Benutzeroberfläche platzieren.

23. Abfragen zum Scrollstatus (scrolled)

scroll-state-Abfragen sind Teil von CSS-Containerabfragen und ermöglichen es Ihnen, untergeordnete Elemente basierend auf dem Scrollstatus eines Containers (mit container-type: scroll-state) zu gestalten. Die scrolled-Abfrage (z. B. scroll-state(scrolled: bottom)) erkennt die Richtung des letzten relativen Scrolls und ermöglicht Muster wie die „Hidey Bar“.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Weitere Informationen zum Muster „Hidey Bar“

24. Verankerte Containerabfragen

CSS Anchor Positioning umfasst anchored container queries (Containerabfragen mit Anker), mit denen Sie prüfen können, welche Fallback-Position (z. B. fallback: bottom oder fallback: flip-block) derzeit für ein ankerpositioniertes Element aktiv ist. So können Sie das Styling eines ankerpositionierten Elements (z. B. Tooltip-Pfeile) dynamisch aktualisieren.

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

Im folgenden Beispiel wird ein Pop-over mit Ankerpositionierung basierend auf seiner Fallback-Position und Position im Darstellungsbereich mithilfe von Containerabfragen mit Anker neu positioniert. Wenn das Kurzinfo über dem Aufrufer geöffnet wird, wird es von unten nach oben animiert, ausgehend von der Quelle. Wenn sie sich unter dem Aufrufer befindet, wird sie von oben nach unten animiert.

25. Preisvergleichsportal border-shape

Mit der Eigenschaft border-shape können Sie nicht rechteckige Rahmen definieren. Dazu verwenden Sie dieselbe Formsyntax wie für clip-path. Im Gegensatz zum Zuschneiden werden bei border-shape Ränder, Umrisslinien und Schatten visuell an die benutzerdefinierte Form angepasst. Außerdem bietet border-shape mehr Möglichkeiten als corner-shape.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. CSS-shape()-Funktion

Mit der CSS-Funktion shape() können Sie komplexe geometrische Pfade inline in CSS definieren. Es kann mit Attributen wie clip-path, border-shape oder shape-outside verwendet werden, um organische, nicht rechteckige Formen zu erstellen, an denen Inhalte ausgerichtet werden können.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Fixierte Positionierung pro Achse

Dank einer kürzlich erfolgten Änderung der Overflow-Spezifikation, die es Containern ermöglicht, nur für eine Achse zu scrollen, kann die fixierte Positionierung jetzt zwei verschiedene Scroll-Container (einen für jede Achse) gleichzeitig verfolgen. Dadurch funktionieren fixierte erste Spalten und obere Zeilen in einer Tabelle auch in Scrollcontainern mit einer Achse wie erwartet.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Diese Funktion kann in Chrome 148 getestet werden, wenn das Flag „Experimental Web Platform Features“ aktiviert ist.

Weitere Informationen zu position: sticky pro Achse

Teil 5: An den Formfaktor anpassen

Einer der größten Vorteile des Webs ist seine Flexibilität. Nutzer können das Web über verschiedene Geräte aufrufen, die jeweils eigene Interaktionsmechanismen haben. Layouts sollten sich grundsätzlich an das Gerät und die Eingabemethode anpassen, unabhängig davon, ob eine Bildschirmtastatur geöffnet ist oder Touch-Ziele aktiv sind. Wenn Sie den Formfaktor beim Webdesign berücksichtigen, erhält Ihre Website oder Web-App den gewissen Feinschliff und entspricht den Erwartungen der Nutzer.

28. Overscroll-Gesten (Bereiche, in denen gewischt werden kann)

Ein Beispiel für die Anpassung an den Formfaktor ist die Möglichkeit, auf Mobilgeräten Wisch- und gestenbasierte Interaktionen zu nutzen. Sie können Scroller verwenden, um einige dieser Effekte zu erzielen, aber das ist nicht immer intuitiv.

Das Chrome-Team arbeitet an einer deklarativen Lösung, die in Zusammenarbeit mit der OpenUI-Community-Gruppe entwickelt wird. Damit können Sie native, gestengesteuerte wischbare Bereiche (z. B. wischbare Gmail-Listen oder Seitenmenüs, die durch Wischen geschlossen werden) mit overscrollcontainer und Befehlsaufrufern erstellen, die sowohl mit Touch- als auch mit Scroll-Gesten funktionieren.

Weitere Informationen zu Overscroll-Gesten

29. HTML-in-Canvas

Die HTML-in-Canvas API stellt einen wichtigen Paradigmenwechsel dar, da Entwickler damit echte DOM-Elemente in einem <canvas> platzieren können (mit dem Attribut layoutsubtree). Diese Elemente bleiben vollständig durchsuchbar und zugänglich und unterstützen Browserfunktionen wie das automatische Ausfüllen. Gleichzeitig können WebGL-/WebGPU-Shader nativ mit ihnen interagieren.

Blitzrunde

Ein kurzer Überblick über einige andere leistungsstarke Funktionen, die das Web vorantreiben.

30. DOM-Status beibehaltender Umzug (moveBefore())

Mit der DOM-Methode moveBefore() können Sie DOM-Knoten (z. B. Videos, iFrames oder fokussierte Eingaben) neu zuordnen, ohne ihren Status zu zerstören oder Neuladevorgänge auszulösen.

Das bedeutet, dass Videos weiter abgespielt werden, iFrames nicht neu geladen werden, CSS-Animationen nicht neu starten und Eingabefelder ihren Fokus behalten, wenn Sie sie in Ihrem Layout neu zuordnen.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Weitere Informationen zu moveBefore()

31. Preisvergleichsportal text-fit

text-fit ist eine experimentelle CSS-Eigenschaft, mit der die Schriftgröße dynamisch skaliert wird, damit Textzeilen genau in die Breite des enthaltenden Elements (z. B. text-fit: grow per-line-all) passen.

Weitere Informationen zu text-fit

32. Preisvergleichsportal text-box (text-box-trim und text-box-edge)

Mit der Eigenschaft text-box (und ihren Langform-Eigenschaften text-box-trim und text-box-edge) wird der vertikale Abstand (Zeilenabstand) über und unter dem Text angepasst, um eine perfekte vertikale Ausrichtung und Zentrierung zu erreichen.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Weitere Informationen zu text-trim

33. CSS-Lückendekorationen

Mit CSS-Lückendekorationen wird column-rule in Grid und Flexbox eingeführt. Außerdem wird eine neue row-rule-Eigenschaft eingeführt, mit der Entwickler die Ränder zwischen Zeilen und Spalten gestalten können. Sie müssen nicht mehr mit Rahmen oder Pseudoelementen arbeiten, um die Linien zwischen den Zeilen und Spalten zu gestalten.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Weitere Informationen zu CSS-Lückendekorationen

34. Bildlaufleistenbezogene Viewport-Einheiten (vw, vh usw.)

Bei Viewport-Einheiten wie vw und vh wird die Größe von Scrollbars automatisch subtrahiert (wenn sie garantiert sichtbar sind, indem overflow-y: scroll oder scrollbar-gutter: stable für :root deklariert wird). So wird ein versehentlicher horizontaler Überlauf verhindert, wenn Elemente auf 100vw gesetzt werden.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Weitere Informationen zu Darstellungsbereichseinheiten, die die Scrollleiste berücksichtigen

35. JavaScript-Zugriff auf Pseudoelemente

Web-APIs machen jetzt CSS-Pseudoelemente (wie ::before oder ::after) für JavaScript verfügbar.

Sie können eine CSSPseudoElement-Instanz mit Element.pseudo(type) abrufen und mit Event.pseudoTarget prüfen, welches Pseudoelement ein Ereignis ausgelöst hat.

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

Weitere Informationen zu CSSPseudoElement

Fazit

Das war unser Überblick über Neues in der Web-UI. Wir hoffen, dass Sie diese Funktionen nutzen und damit tolle Benutzeroberflächen entwickeln. Bis zum nächsten Jahr!