Anwendungsfälle für Modern Web Guidance

Veröffentlicht: 19. Mai 2026

Hier finden Sie eine automatisch generierte Liste aller Anwendungsfälle, die jetzt in Modern Web Guidance verfügbar sind.

accessibility

accessible-error-announcement

Synchronisieren Sie programmatische Barrierefreiheitsstatus (wie „aria-invalid“) mit dem visuellen Status „:user-invalid“, damit Nutzer von Screenreadern erst nach der Interaktion eine Fehlermeldung erhalten.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

built-in-ai

language-detection

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

language-model

Führen Sie die Verarbeitung natürlicher Sprache auf dem Gerät im Browser mit der Prompt API aus. Sie bietet Streaming-Ausgabe, strukturierte JSON-Antworten und die Verwaltung von Sitzungen mit mehreren Durchgängen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

summarizer

Textinhalte mit der Summarizer API auf dem Gerät zusammenfassen

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

translator

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

css

highlight-text-ranges

Beliebige Textbereiche auf einer Seite hervorheben, z. B. Suchergebnisse, Rechtschreibfehler oder Cursors für die gemeinsame Bearbeitung.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

forms

animated-select-picker

Erstellen Sie eine benutzerdefinierte Select-Komponente, deren Drop-down-Menü animiert ist. Das Menü wird beispielsweise ein- oder ausgeblendet oder die Optionen werden bei der Auswahl animiert.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

autofill-address-form

Erstellen Sie ein Adressformular mit den richtigen Attributen für die automatische Vervollständigung und Unterstützung für das automatische Ausfüllen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

autofill-highlight-inputs

Mit CSS können Sie Formularfelder hervorheben, die vom Browser automatisch ausgefüllt und nicht vom Nutzer bearbeitet wurden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

autofill-payment-form

Erstellen Sie ein Zahlungsformular, in dem Kartendetails mit korrekten Werten für die automatische Vervollständigung und Unterstützung für AutoFill erfasst werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

autofill-sign-in-form

Erstellen Sie ein Anmeldeformular mit korrekten Werten für die automatische Vervollständigung und Unterstützung für AutoFill.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

autofill-sign-up-form

Erstellen Sie ein Registrierungsformular mit korrekten Werten für die automatische Vervollständigung und Unterstützung für die automatische Vervollständigung.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

brand-consistent-forms

Passen Sie Checkboxen, Optionsfelder, Bereichsschieberegler und Fortschrittsbalken an die Farbpalette Ihrer Website an, ohne sie durch benutzerdefinierte Komponenten zu ersetzen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

branded-select-styling

Erstellen Sie benutzerdefinierte Auswahlelemente, deren Schaltfläche, Auswahlfeld, Pfeilsymbol und Häkchen nahtlos zur Typografie, den Farben, dem Abstand und den Rahmen Ihres Marken- oder Designsystems passen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

custom-select-picker-layouts

Erstellen Sie benutzerdefinierte Auswahlfelder, deren Optionen auf einzigartige oder interessante Weise positioniert sind, anstatt in der herkömmlichen gestapelten Liste von Optionen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

form-fields-automatically-fit-contents

Formularfelder können je nach Nutzereingabe vergrößert oder verkleinert werden, z. B. wenn der Nutzer etwas eingibt oder eine andere Option auswählt. Sie können maximale und minimale Größenbeschränkungen anwenden, um dynamische und responsive Formularfelder zu erstellen, die dem Seitendesign entsprechen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

required-field-feedback

Geben Sie Fehlermeldungen für erforderliche Formularfelder, die übersprungen oder leer gelassen wurden, erst nach der Nutzerinteraktion an, um vorzeitige Fehler zu vermeiden und sicherzustellen, dass das Feedback zeitnah und kontextbezogen für den Nutzerfluss ist.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

rich-media-picker

Erstellen Sie eine benutzerdefinierte Auswahlkomponente, deren Optionen komplexe HTML-Formatierungen (z.B. Bilder, Symbole und andere Rich-Formatierungen) anstelle von Nur-Text enthalten können.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

select-menu-interaction

Prüfen Sie, ob in einem Auswahlmenü eine nicht standardmäßige Option ausgewählt wurde, erst nachdem der Nutzer mit dem Steuerelement interagiert hat.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

validate-input-after-interaction

Feedback zur Validierung von Formularfeldern (z. B. Anforderungen an die Passwortkomplexität oder das E-Mail-Format) sollte erst angezeigt werden, nachdem der Nutzer die erste Interaktion abgeschlossen hat. So werden vorzeitige Fehler beim Seitenaufbau oder während der Eingabe vermieden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

passkeys

passkey-authentication

Einen wiederkehrenden Nutzer mit einem Passkey für die primäre Anmeldung authentifizieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

passkey-conditional-create

Einen Passkey für einen vorhandenen Nutzer nach einer erfolgreichen Anmeldung mit Passwort im Hintergrund registrieren

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

passkey-management

Nutzer können die in ihrem Konto registrierten Passkeys ansehen und verwalten.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

passkey-reauthentication

Bestätigen Sie die Identität eines angemeldeten Nutzers anhand seiner vorhandenen Passkeys, bevor Sie eine sensible Aktion ausführen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

passkey-registration

Registrieren Sie einen Passkey für ein vorhandenes Nutzerkonto.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

performance

batch-analytics-events

Mehrere Analyseereignisse werden in einem einzelnen Beacon zusammengefasst, um Netzwerkkonflikte zu minimieren und die Serverlast zu reduzieren. Gleichzeitig werden weiterhin Echtzeitupdates bereitgestellt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

break-up-long-tasks

Teilen Sie umfangreiche synchrone Verarbeitungsvorgänge (komplexe Berechnungen und/oder lange Schleifen) oder DOM-Aktualisierungen auf, damit der Browser Nutzereingaben verarbeiten und den Bildschirm neu rendern kann.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

calculate-total-foreground-time

Die Gesamtzeit, die ein Nutzer tatsächlich mit dem Ansehen einer Seite verbracht hat, ohne Berücksichtigung von Zeiträumen, in denen der Tab im Hintergrund war.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

conditional-async-dependencies

Asynchrone Abhängigkeiten (z. B. das Importieren von Polyfills für fehlende Webfunktionen) können bedingt geladen oder initialisiert werden, ohne dass eine komplexe Orchestrierung für alle Scriptabhängigkeiten einer Seite erforderlich ist.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

defer-rendering-heavy-content

Reduzieren Sie die Rendering-Zeiten auf inhaltsreichen Webseiten (z.B. Seiten mit langen Feeds, vielen Artikeln oder komplexen Dashboards), indem Sie das Rendering für alle Inhalte verzögern, die für den Nutzer nicht sofort sichtbar sind.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

defer-work-until-scroll-ends

Verschieben Sie rechenintensive Vorgänge wie DOM-Updates, Datenabruf, Analysetool-Tracking oder Layout-Neuberechnung auf die Zeit nach dem Scrollen, um eine reibungslose Scrollleistung zu gewährleisten.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

deprioritize-background-fetches

Hintergrunddatenabrufe, die mit der Fetch API erfolgen, werden weniger priorisiert, um Netzwerkkonflikte mit vom Nutzer initiierten Anfragen zu vermeiden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

detect-initial-visibility-state

Zuverlässig ermitteln, ob eine Seite ursprünglich im Hintergrund geladen wurde, auch wenn das Script asynchron geladen wird, nachdem der Nutzer die Seite in den Vordergrund geholt hat.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

efficient-background-processing

Sie können Systemressourcen und Akkulaufzeit schonen, indem Sie die Ausführung von JavaScript im Hintergrund (z. B. <canvas>-Animationen, WebGL-Rendering oder das Abrufen von WebSocket-Daten mit hoher Frequenz) pausieren, wenn die Komponente nicht auf dem Bildschirm zu sehen ist, und sie dann rechtzeitig fortsetzen, wenn sie wieder in den sichtbaren Bereich gescrollt wird.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

faster-spa-view-transitions

Schnellere Übergänge zurück zu zuvor besuchten Ansichten in einer Single-Page-Anwendung (SPA) ermöglichen, indem der strukturelle DOM-Zustand beibehalten wird, anstatt ihn bei jeder Navigation zu zerstören und neu zu erstellen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

full-session-analytics

Analyse-, Fehler- und Telemetriedaten während des gesamten Seitenbesuchs des Nutzers zuverlässig erfassen und das Senden der Daten aufschieben, bis der Nutzer die Seite verlässt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

identify-heavy-scripts

Skripts ermitteln, die am ehesten für lange Animations-Frames verantwortlich sind

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

identify-inp-causes

Langsam ausgeführten JavaScript-Code ermitteln, der sich auf den INP-Messwert auswirkt

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

improve-next-page-load-performance

Sie können die Seitenaufbauleistung verbessern, indem Sie Seiten, die der Nutzer wahrscheinlich als Nächstes aufrufen wird, vorabrufen oder vorab rendern.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

interactions-in-complex-layouts

Interaktionen schneller und reaktionsfähiger gestalten (INP-Werte (Interaction to Next Paint) senken), indem Sie Layout-Neuberechnungen in komplexen Layouts wie datenlastigen Dashboards oder tabellenartigen Rastern vermeiden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

optimize-image-priority

Optimieren Sie die Ladepriorität von Bildern, die für Largest Contentful Paint (LCP) infrage kommen, und verringern Sie die Priorität nicht kritischer Bilder, um Verzögerungen beim Laden kritischer Ressourcen zu reduzieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

optimize-preload-priority

Optimieren Sie die relative Priorität von vorab geladenen Inhalten, um Verzögerungen beim Laden kritischer Ressourcen zu verringern.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

optimize-script-priority

Optimieren Sie die Ladepriorität von Skripts, indem Sie kritische asynchrone Skripts priorisieren und nicht benötigte oder späte Body-Skripts herabstufen, um die Reihenfolge zu verbessern und Verzögerungen zu reduzieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

resolution-optimized-pseudo-elements

Verwenden Sie auflösungsoptimierte Bilder in CSS-Pseudoelementen wie ::before und ::after, um die Anzahl der DOM-Knoten zu reduzieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

schedule-tasks-by-priority

Planen Sie Aufgaben mit unterschiedlichen Prioritäten, damit kritische Aufgaben zuerst ausgeführt werden, während Hintergrundaufgaben aufgeschoben werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

sequence-distributed-events

Vorgänge in verteilten Mikrodiensten oder Tracing-Umgebungen mit hohem Durchsatz protokollieren und sequenzieren, indem Zeitstempel mit Nanosekundenauflösung aufgezeichnet werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

user-experience

adapt-scrollbar-to-contrast-preferences

Sichtbarkeit der Bildlaufleiste für Nutzer mit Vorliebe für Benutzeroberflächen mit hohem Kontrast verbessern

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

anchor-positioning-tab-underline

Ein Element nahtlos zwischen zwei Zielpositionen verschieben Wenn Sie beispielsweise die Unterstreichung eines ausgewählten Tabs zwischen dem zuvor ausgewählten und dem aktuell ausgewählten Tab verschieben.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

animate-element-entry-exit

Elemente werden beim Hinzufügen oder Entfernen aus dem DOM oder beim Umschalten ihrer Anzeigewerte ein- oder ausgeblendet.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

animate-to-from-top-layer

Animieren Sie Elemente wie Dialogfelder, Pop-overs und Tooltips, wenn sie in die oberste Ebene ein- oder aus ihr ausblenden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

animate-to-intrinsic-sizes

Animieren Sie interaktive Komponenten (z. B. Akkordeons, Menüs und maximierte Karten) flüssig in ihre natürlichen Abmessungen und zurück.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

apply-webgl-shaders

Benutzerdefinierte visuelle Effekte mit WebGL-Shadern auf HTML-Inhalte anwenden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

calculate-event-differentials

Dauer und verbleibende Zeit zwischen Datums- und Zeitangaben berechnen

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

calculate-with-intrinsic-sizes

Berechnen Sie die Größe eines Elements basierend auf seiner intrinsischen Größe und achten Sie darauf, dass es in die vorgegebenen Designbeschränkungen passt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

capture-location-agnostic-data

Erfassen Sie chronologische Daten, die sich nicht je nach Standort des Nutzers ändern sollten, z. B. Geburtstage, wiederkehrende Weckrufe oder Feiertage.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

Erstellen Sie ein Karussell mit Folien, die Bilder oder andere visuelle Elemente enthalten. Jede Folie wird animiert, wenn sie in den Scroller einläuft, zentriert wird oder ihn verlässt. Die Folien können beispielsweise ein- und ausgeblendet werden, sich drehen oder größer oder kleiner werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

Das aktuell eingerastete, nicht interaktive Element in Scroll-Snap-Karussells, Galerien oder ganzseitigen Wischfunktionen visuell hervorheben. Beispiele sind das Maximieren einer Karte im angedockten Modus oder das Einblenden versteckter Inhalte.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

child-state-based-styling

Erstellen Sie eine Komponente, deren Stil sich je nach Status eines ihrer untergeordneten Elemente ändert. Beispiel: Eine Komponente, die im hellen oder dunklen Modus gerendert wird, je nachdem, ob ein Theme-Schalter aktiviert ist.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

complex-shapes

Sie können Elemente und deren Inhalt in beliebige Freiformen wie Symbole, Pinselstriche oder organische Texturen einfügen, um ausdrucksstärkere Designs zu erstellen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

component-specific-light-dark-theme

Bestimmte Elemente (z.B. Codeblöcke oder Mediaplayer) können unabhängig vom Farbschema der Seite in den hellen oder dunklen Modus gezwungen werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

consistent-cross-document-transitions

Achten Sie darauf, dass der kritische Seitenstatus geladen und stabil ist, bevor Sie einen dokumentenübergreifenden Ansichtsübergang initiieren. Das bedeutet, dass kritische CSS-Stile geladen und angewendet, kritisches JavaScript geladen und ausgeführt und das HTML, das für die erste Ansicht der Seite durch den Nutzer sichtbar ist, vor dem Übergang geparst wurde.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

content-based-styling

Erstellen Sie eine Komponente, deren Layout sich ändert, je nachdem, ob sie bestimmte untergeordnete Elemente enthält oder nicht. Wenn die Komponente beispielsweise ein Bild enthält, verwenden Sie ein mehrspaltiges Layout. Andernfalls verwenden Sie standardmäßig ein einspaltiges Layout.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

coordinate-global-events

Planen Sie zukünftige Besprechungen oder Termine, indem Sie sie explizit an eine geografische IANA-Zeitzone binden. So bleiben die Terminzeiten unabhängig von Sommerzeitumstellungen und „übersprungenen“ oder „wiederholten“ Stunden bei Zeitumstellungen korrekt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

cross-document-transitions

Sorgen Sie für reibungslose Übergänge zwischen Vollbildnavigationen, z. B. durch Überblendungen, benutzerdefinierte Einblendungseffekte oder das Morphen von Inhalten von einer Seite zur nächsten.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

customize-scrollbar-color-and-thickness

Farbe oder Stärke einer Scrollleiste anpassen

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

dark-mode

Implementieren Sie die Unterstützung für den dunklen Modus so, dass die Einstellung des Nutzers für das helle/dunkle Design berücksichtigt und die Browser-UI (z. B. Scrollbalken, Formularsteuerelemente usw.) angepasst wird.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

declarative-button-actions

Sie können eine Schaltfläche deklarativ mit einem beliebigen Element verbinden, um benutzerdefinierte, anwendungsspezifische Aktionen auszulösen. Dazu verwenden Sie deklarative Schaltflächenbefehle, Aufrufbefehle, Schaltflächenbefehle, benutzerdefinierte Befehle oder deklarative Umschaltaktionen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

declarative-dialog-popover-control

Die Sichtbarkeit eines Dialogfelds oder Pop-overs über einen Button umschalten, ohne JavaScript zu schreiben

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

deliver-optimized-decorative-images

Stellen Sie optimierte dekorative Bilder (z. B. Hintergründe, UI-Symbole oder komplexe Masken) bereit, indem Sie gleichzeitig Bildformate der nächsten Generation (z. B. AVIF oder WebP) zusammen mit mehreren Pixeldichten (z. B. 1x und 2x) bereitstellen. So kann der Browser dynamisch die beste Kombination aus Dateigröße und visueller Qualität für die Gerätefunktionen des Nutzers aushandeln.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

design-token-reactivity

Definieren Sie Design-Tokens höherer Ordnung, z. B. Kompaktheitsgrade (kompakt, normal, geräumig) oder Themes, und lassen Sie untergeordnete Komponenten direkt und komponentenbezogen auf Änderungen reagieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

directional-navigation-transitions

Animieren Sie Änderungen des visuellen Status, um die Richtung des Navigationsflusses eines Nutzers widerzuspiegeln. Schieben Sie beispielsweise neue Inhalte von rechts ein, wenn der Nutzer vorwärts geht, oder von links, wenn er zu einem vorherigen Bildschirm zurückkehrt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

dynamic-sibling-animations

Sie können die Animation oder den Übergang von untergeordneten Elementen zeitlich staffeln, sodass jedes Element nach einer berechneten Verzögerung beginnt, die auf seiner Position in der Liste der untergeordneten Elemente basiert.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

dynamic-sibling-styling

Erstellen Sie dynamische visuelle Spektren oder Layoutanordnungen, die sich automatisch an die Anzahl der Elemente in einer Gruppe anpassen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

export-html-media-from-canvas

Dynamische HTML-Inhalte können als Bilder oder Videoframes in einem Canvas-Element erfasst und exportiert werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

expose-canvas-content-to-browser-features

Inhalte, die in einem Canvas gerendert werden, für Browserfunktionen wie Bedienungshilfen, Übersetzung oder Lesemodus verfügbar machen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

flicker-free-client-side-ab-testing

A/B-Tests, multivariate Tests oder andere Tests werden mit clientseitigem JavaScript bereitgestellt und gerendert, um HTML, CSS und JavaScript zu ändern oder einzufügen, ohne dass der ursprüngliche Inhalt zuerst angezeigt wird, bevor er flackert oder blinkt, um den Testinhalt anzuzeigen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

fluid-scaling

Skalieren Sie Elemente wie Schriftgröße, Abstände und Mediengrößen basierend auf der Größe des übergeordneten Containers anstatt mit festen Breakpoints.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

format-human-readable-durations

Stellen Sie die verstrichene Zeit oder Zeiträume in einem lesbaren, lokalisierten Format dar. Je nach Kontext können Sie entweder detaillierte Einheitenaufschlüsselungen (z. B. „1 Stunde und 30 Minuten“) oder Gesamteinheiten (z. B. „90 Minuten“) anzeigen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

group-element-transitions

Eine Gruppe ähnlicher Elemente gleichzeitig mit derselben Übergangslogik überblenden, z. B. ein Produkt aus einem Einkaufswagen entfernen und alle anderen Produkte an ihre neuen Positionen animieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

improve-text-layout-and-legibility

Verbessern Sie das Layout und die Lesbarkeit von kurzen, eigenständigen Textinhalten wie Überschriften, die nicht länger als ein paar Zeilen sind, indem Sie dem Browser erlauben, beim Umbrechen von Text gleichmäßig verteilte Zeilenumbrüche anzuwenden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

individual-transform-properties

Einzelne CSS-Transformationseigenschaften (z.B. „translate“, „rotate“, „scale“) unabhängig von anderen Transformationseigenschaften eines einzelnen Elements animieren oder überschreiben.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

interactive-content-in-3d-scenes

Interaktive HTML-Elemente in eine 3D-Szene einfügen

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

interactive-content-reveal

Erstellen Sie interaktive Enthüllungseffekte, z. B. einen Scheinwerfer, der dem Mauszeiger des Nutzers folgt, um Details in einem Bild oder UI-Abschnitt aufzudecken.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

interest-triggered-action-previews

Eine Live-Vorschau der Wirkung einer Schaltfläche anzeigen, wenn ein Nutzer Interesse signalisiert (z.B. durch Hovern, Fokussieren oder langes Drücken), aber bevor er auf die Schaltfläche klickt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

interest-triggered-tooltips

Zeigen Sie eine Kurzinfo oder zusätzliche Informationen an, wenn ein Nutzer den Mauszeiger auf ein interaktives Element bewegt, den Fokus darauf legt oder es lange drückt, ohne dass ein Klick erforderlich ist.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

light-dismiss-a-dialog

Erstellen Sie ein modales Dialogfeld, das durch Klicken oder Tippen außerhalb des Dialogfelds geschlossen werden kann.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

manage-recurring-intervals

Wiederkehrende Intervalle für Aboabrechnungen oder Gehaltsabrechnungszyklen berechnen und dabei automatisch Grenzfälle wie Monatsendeübergänge (z. B. einen Monat zum 31. Januar hinzufügen) berücksichtigen, um genaue Zeitraumangaben zu erhalten.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

model-partial-time-concepts

Modellieren Sie Datums- und Zeitkonzepte, denen von Natur aus eine Standardkomponente fehlt (z. B. ein bestimmtes Jahr, ein bestimmter Tag oder ein bestimmtes Datum), ohne beliebige Platzhalterwerte zu verwenden, die zu Berechnungsfehlern führen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

move-dom-element-without-losing-state

DOM-Elemente verschieben oder neu zuordnen, ohne wichtigen Elementstatus zu verlieren, z. B. Interaktivitätsstatus (:focus/:active), <iframe>-Ladestatus, Animations-/Übergangsstatus usw.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

Erstellen Sie eine Navigationsleiste, die, wenn sie über eine Menüschaltfläche ausgelöst wird, von der Seite über den vorhandenen Seiteninhalten eingeblendet und beim Schließen (durch Wischen, Tippen außerhalb oder Drücken der Esc-Taste) wieder ausgeblendet wird.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

overflow-clipping-control

Sie können die sichtbare Beschneidungsgrenze eines Elements an den Inhaltsrand, den Innenabstand oder den Rahmenrand anpassen oder einen bestimmten Versatz von diesen Rändern festlegen. So haben Sie mehr Kontrolle darüber, wie Inhalte beschnitten werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

parallax-scroll-effects

Sie können scrollbasierte Effekte wie Parallaxe erstellen, bei denen sich Vorder- und Hintergrundebenen unterschiedlich schnell bewegen. So entsteht beim Scrollen ein Tiefeneffekt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

persistent-app-tours

Erstellen Sie dauerhafte Onboarding-Anleitungen mit angehängten nativen Overlays, die während der Nutzerinteraktion geöffnet bleiben.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

persistent-toast-notifications

Erstellen Sie unaufdringliche Toast- und Overlay-Benachrichtigungen für dauerhafte, stapelbare Nachrichten und Statuskommunikation.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

persistent-top-layer-ui

Ein modaler Dialog, ein Vollbildelement oder ein natives Pop-over muss sichtbar geöffnet und funktional aktiv bleiben, wenn der zugrunde liegende DOM-Knoten im DOM verschoben oder neu zugeordnet wird.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

physics-based-easing

Erstellen Sie benutzerdefinierte, physikbasierte Animations- und Übergangseffekte wie „Bounce“ und „Spring“, die sich natürlicher und ansprechender anfühlen als herkömmliche Easing-Kurven.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

platform-controls-dismiss-dialog

Erstellen Sie einen modalen Dialog, der mit standardmäßigen plattformspezifischen Nutzeraktionen geschlossen werden kann, z. B. durch Drücken der Esc-Taste auf Desktop-Plattformen oder durch eine „Zurück“- oder „Schließen“-Geste auf mobilen Plattformen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

position-aware-tooltips

Erstellen Sie Tooltips und Pop-overs mit Richtungspfeilen (oder anderen visuellen Stilen), die automatisch in die richtige Richtung zeigen, wenn das Element in eine Fallback-Position wechselt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

precise-text-alignment

Mit Text in beliebiger Schriftart lässt sich eine präzise vertikale Ausrichtung erzielen. Beispiele: Der visuelle Innenabstand über und unter dem Text ist genau gleich oder der Text ist perfekt an angrenzende Symbole oder Bilder ausgerichtet.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

prevent-text-wrapping

Achten Sie darauf, dass der Browser keine Zeilenumbrüche in den Text einfügt und Text über den Container hinausfließen kann.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

pull-to-reveal

Entwickeln Sie eine Funktion, mit der Nutzer durch Herunterziehen des Bildschirms weitere Inhalte wie eine Suchleiste aufrufen können.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

reduce-style-repetition

Reduzieren Sie übermäßige Stilwiederholungen, indem Sie komplexe oder dynamische Stil-Logik in wiederverwendbare Funktionen kapseln, z. B. in eine Funktion, die einen Farbverlauf basierend auf einer Reihe von Eingabeparametern berechnet.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

resilient-context-menus-and-nested-dropdowns

Erstellen Sie zugängliche, responsive Menüs, Tooltips, Drop-downs oder kontextbezogene Overlays, die an bestimmte UI-Elemente gebunden sein müssen. Das Overlay muss sich automatisch neu positionieren (z. B. durch Umkehren der Achsen), wenn es auf Viewport-Ränder trifft, damit es nie abgeschnitten wird.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

same-document-transitions

Sie können Elemente, die über verschiedene Seitenstatus oder Navigationen in einer Single-Page-Anwendung (SPA) hinweg bestehen bleiben, visuell miteinander verbinden, indem Sie ihre Größe, Position oder andere Styling-Eigenschaften sanft ineinander übergehen lassen. Ein Beispiel: Ein Produkt-Thumbnail wird zu einem Hero-Image, das die gesamte Breite einnimmt.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scroll-entry-exit-effects

Sie können Einblend-, Vergrößerungs- oder andere komplexe Einblendeffekte für Elemente erstellen, wenn sie beim Scrollen des Nutzers in den Scrollport (oder Viewport) ein- und aus ihm ausblenden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scroll-position-aware-elements

Erstellen Sie schwebende Schaltflächen oder Widgets (z. B. „Zurück zum Seitenanfang“, „Zum Seitenende scrollen“, Chat-Launcher), die je nachdem, ob der Nutzer gescrollt hat, ein- oder ausgeblendet werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scroll-progress-indicator

Erstellen Sie eine Bildlauf-Fortschrittsanzeige, einen stufenweisen Fortschrittstracker oder eine andere visuelle Unterstützung, die angibt, wie weit der Nutzer auf einer Seite oder in einem Abschnitt gescrollt hat.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scroll-snap-realtime-feedback

Stellen Sie in verknüpften UI-Elementen visuelles Feedback in Echtzeit bereit, während ein Nutzer durch Inhalte scrollt, die an Schnapppunkten ausgerichtet sind, bevor die Scrollbewegung abgeschlossen ist.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scroll-snap-state-sync

Navigationsindikatoren, verknüpfte Inhaltsbereiche und Analysetracking mit dem aktiv eingerasteten Element in einem scrollbaren Container synchronisieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scroll-target-on-load

Erstellen Sie eine scrollbare Liste von Elementen (z.B. ein Karussell von Bildern oder einen Chatunterhaltungs-Thread), die bei der ersten Darstellung mit einem bestimmten Element angezeigt werden kann, das in den sichtbaren Bereich gescrollt wird.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scrollability-affordance-hints

Erstellen Sie Scrollschatten-Overlays, Gradienten-Einblendungen oder Richtungspfeile, die nur angezeigt werden, wenn in der jeweiligen Richtung tatsächlich mehr Inhalte vorhanden sind, zu denen gescrollt werden kann.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

scrollytelling

Sie können visuelle Eigenschaften eines Zielelements animieren, z. B. einen Hintergrund einblenden, eine Hintergrundfarbe ändern oder Scrollytelling-Effekte erstellen. Die Animation wird dabei vollständig durch die Scrollport-Position eines völlig anderen Elements gesteuert.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

search-hidden-content

Wenn Sie Inhalte mithilfe von Mustern wie Akkordeons, Tabs und Abschnitten vom Typ „Weiterlesen“ ausblenden und gleichzeitig dafür sorgen, dass der verborgene Text bei nativen „Auf Seite suchen“-Vorgängen angezeigt wird, können Suchmaschinen die Inhalte indexieren, werden Deep-Links mit URL-Fragmenten unterstützt und die ARIA-Barrierefreiheit wird beibehalten.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

shaped-cutouts

Sie können mehrere Formen kombinieren, um komplexe Ausschnitte oder „Knockout“-Effekte in Elementen zu erstellen, z. B. eine Kerbe in ein Element einzufügen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

shrinking-header-on-scroll

Sie können einen fixierten Header oder ein ganzseitiges Cover beim Scrollen animieren, sodass es über eine vordefinierte Scrollstrecke dynamisch verkleinert wird, Schatten erhält und sein Layout ändert.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

size-aware-styling

Erstellen Sie eine Komponente, deren Formatierungen bedingt von ihrer eigenen Breite oder Höhe abhängen können, nicht von der Breite oder Höhe des Darstellungsbereichs. Das kann beispielsweise eine Kartenkomponente sein, deren Layout sich je nach Größe ändert, oder eine Call-to-Action-Schaltfläche, für die je nach Breite bedingt Hilfetext angezeigt werden kann.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

soft-edge-content-fade

Wenden Sie einen Transparenzverlauf auf die Ränder von Inhalten an, um anzuzeigen, dass weitere Bereiche gescrollt werden können, oder um Text hinter einer Paywall zu verdecken.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

stabilize-reactive-state

Aufgabenfristen oder Zeitpläne in datengesteuerten Ansichten verwalten, ohne unerwartete Nebeneffekte durch gemeinsam genutzten veränderlichen Status.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

stack-drill-down

Erstellen Sie eine hierarchische Vollbildnavigation, mit der Nutzer in verschachtelte Ansichten eintauchen und durch Wischen oder Zurückgehen zurückkehren können. Der Browserverlauf wird dabei synchronisiert.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

style-parent-with-has

Übergeordnete Elemente eines Formularfelds (z.B. Labels oder Fieldsets) formatieren, wenn das Feld ungültig ist.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

support-global-calendar-systems

Datumsangaben in nicht gregorianischen Kalendersystemen (z.B. islamisch, hebräisch oder chinesisch) für internationale Nutzer korrekt anzeigen und berechnen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

swipe-to-remove

Ermöglichen Sie Nutzern, Elemente in einer Liste mit einer horizontalen Wischbewegung zu bearbeiten (entfernen, archivieren, als gelesen markieren usw.), damit sie Einträge schnell verarbeiten können, ohne auf ein separates Steuerelement tippen zu müssen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

visually-stable-font-fallbacks

Definieren Sie Schriftartenstile so, dass der Text lesbar und visuell konsistent bleibt, falls die bevorzugte Schriftart und eine der Fallback-Schriftarten getauscht werden (oder umgekehrt).

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

visually-stable-mixed-fonts

Definieren Sie Schriftarten so, dass der Text lesbar und visuell konsistent bleibt, wenn mehrere Schriftarten zum Rendern eines einzelnen Textblocks verwendet werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

visually-texture-content

Wenden Sie realistische Muster für Verwitterung und Textur auf Elemente an, um ihnen ein organisches, gealtertes oder physisches Material zu verleihen.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

webmcp

agentic-forms

Clientseitige Funktionen als Tools für KI-Agents bereitstellen, indem Sie Standard-HTML-Formulare mit WebMCP-Attributen annotieren.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen

agentic-javascript-tools

Clientseitige JavaScript-Funktionen können mithilfe der WebMCP Imperative API programmgesteuert als Tools für KI-Agenten registriert werden.

Verwendete Funktionen:

Anwendungsbeispiel auf GitHub ansehen