Modern Web Guidance-Leitfäden

Sichtbarkeit der Bildlaufleiste für Nutzer verbessern, die Oberflächen mit hohem Kontrast bevorzugen

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

Farbleitfaden für das Web, einschließlich Kontrastanforderungen, helle und dunkle Farbschemas, Modus für erzwungene Farben und Generieren von Farbtönen und Schattierungen aus einer Grundfarbe.

Elemente und ihre Inhalte lassen sich auf jede beliebige Form zuschneiden, z. B. auf ein Symbol, einen Pinselstrich oder eine organische Textur, um ausdrucksstärkere Designs zu erstellen.

Fügen Sie Textdekorationen wie Unterstreichungen, Überstreichungen, Durchstreichungen oder vollständig benutzerdefinierte Formen hinzu, mit Einblendungsanimationen, benutzerdefinierten Offsets und End-Insets sowie flexiblem Überspringen von Tinte.

Farbe oder Breite einer Bildlaufleiste anpassen

Implementieren Sie die Unterstützung für den dunklen Modus so, dass die Präferenz des Nutzers für das helle oder dunkle Design berücksichtigt wird und die Browser-UI (z. B. Scrollleisten, Formularsteuerelemente usw.) entsprechend angepasst wird.

Interaktive HTML-Elemente in eine 3D-Szene einbinden

Wählen Sie eine gut lesbare Textfarbe mit ausreichendem Kontrast zu einer dynamischen Hintergrundfarbe aus.

Jede Zeile einer mehrzeiligen Überschrift oder eines Lockups sollte dieselbe Breite haben, wie bei der Typografie im Posterstil oder bei gestapelten Überschriften. Im Gegensatz zum Blocksatz wird der Text selbst an die Breite angepasst, anstatt dass die Abstände gestreckt werden.

Dynamische HTML-Inhalte können direkt im Canvas erfasst und als Bilder oder Videoframes exportiert werden.

In einem Canvas gerenderte Inhalte für Browserfunktionen wie Hilfstechnologien, Übersetzung oder Lesemodus verfügbar machen.

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

Präzise vertikale Ausrichtung von Text in beliebiger Schriftart Beispielsweise sollte der visuelle Abstand über und unter dem Text genau gleich sein oder der Text sollte perfekt bündig mit angrenzenden Symbolen oder Bildern ausgerichtet sein.

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

Wenden Sie einen Transparenzverlauf auf die Inhaltsränder an, um weitere scrollbare Bereiche anzuzeigen oder Text hinter einer Paywall zu verdecken.

Sie können vom Browser generierte UI-Elemente wie Textauswahl, Scrollleisten, Formularsteuerelemente und Auswahltools mit CSS gestalten, anstatt sie mit benutzerdefinierten Elementen neu zu erstellen.

Best Practices für die Typografie im Web, einschließlich Schriftgrößeneinheiten, Zeilenhöhe, Textumbruch und -ausgleich sowie flüssiger Schrift, die mit dem Darstellungsbereich skaliert wird.

Visuelle Effekte mit CSS wie mehrschichtige Schatten, Mischmodi, Farbverläufe mit vorhersagbarer Farbinterpolation und Muster wie Streifen, Schachbrettmuster, Punkte und Kreisdiagramme, die nur aus Farbverläufen bestehen.

Definieren Sie Schriftstile so, dass der Text lesbar und visuell einheitlich bleibt, falls die bevorzugte Schriftart durch eine der Fallback-Schriftarten ersetzt wird (oder umgekehrt).

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

Wenden Sie realistische Verwitterungs- und Texturmuster auf Elemente an, um ihnen ein organisches, gealtertes oder physisches Aussehen zu verleihen.

Erstellen Sie eine Fortschrittsanzeige für das Scrollen, eine schrittweise Fortschrittsanzeige oder eine andere visuelle Darstellung, die zeigt, wie weit der Nutzer auf einer Seite oder in einem Abschnitt gescrollt hat.

Erstellen Sie ein Karussell mit Folien, die Bilder oder andere visuelle Elemente enthalten. Jede Folie wird animiert, wenn sie in den Scroller eintritt, sich in der Mitte befindet oder ihn verlässt. Die Folien können beispielsweise ein- oder ausgeblendet, gedreht, vergrößert oder verkleinert werden.

Bestimmte Elemente (z. B. Codeblöcke, Mediaplayer usw.) unabhängig vom Farbschema der Seite im hellen oder dunklen Modus anzeigen lassen.

Erstellen Sie Kurzinfos und Popovers mit Richtungspfeilen (oder anderen visuellen Elementen), die automatisch in die richtige Richtung zeigen, wenn das Element in eine Fallback-Position wechselt.

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

Erstellen Sie eine Datentabelle, die tabellarische Daten mit der richtigen Header-Semantik darstellt und auf kleinen Bildschirmen und mit Hilfstechnologien lesbar und navigierbar bleibt.

Erstellen Sie schwebende Schaltflächen oder Widgets (z. B. „Nach oben“, „Nach unten“, Chat-Launcher), die je nachdem, ob der Nutzer gescrollt hat, ein- oder ausgeblendet werden.

Erstellen Sie Scroll-Schatten-Overlays, Farbverläufe oder Richtungspfeile, die nur dann angezeigt werden, wenn es in dieser Richtung tatsächlich mehr Inhalte gibt, zu denen gescrollt werden kann.

Sie können eine fixierte Kopfzeile oder ein ganzseitiges Cover beim Scrollen flüssig animieren, sodass sie bzw. es dynamisch verkleinert wird, Schatten erhält und das Layout über eine vordefinierte Scroll-Distanz ändert.

Erstellen Sie fixierte Abschnittsüberschriften oder Navigationsleisten, die sich visuell verändern, wenn sie oben fixiert sind, indem sie ihr Farbschema ändern oder einen Schatten erhalten.

Symbole anzeigen und verwalten, die über CSS festgelegt und parametrisiert werden können, schnell geladen werden, bei jeder Auflösung scharf sind und für Hilfstechnologien richtig dargestellt (oder ausgeblendet) werden.

Positionieren Sie Drop-down-Menüs, Flyouts oder Kontextaktionsbereiche, die an einen Trigger-Button gebunden sind, so, dass sie an den Rändern des Darstellungsbereichs automatisch die Achsen wechseln, anstatt abgeschnitten zu werden.

Erstellen Sie eine Kartenkomponente, die ihre Darstellung an den verfügbaren Platz und Inhalt anpasst.

Erstellen Sie eine Menükomponente, die eine Liste von Optionen oder Aktionen anzeigt und verschachtelte Untermenüs unterstützt.

Den aktuell sichtbaren Abschnitt einer Seite in einem Navigationsmenü hervorheben

Erstellen Sie eine gestaltete Fortschrittsanzeige, die den Abschluss einer Aufgabe oder eines Prozesses sowohl im bestimmten als auch im unbestimmten Zustand anzeigt.

Erstellen Sie eine Hovercard-Komponente, die eine interaktive strukturierte Vorschau der Seite anzeigt, zu der ein bestimmter Linktyp (z.B. ein Nutzerprofil) führt, wenn der Mauszeiger darauf bewegt wird.

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

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

Erstellen Sie eine Komponente zum Umschalten in den dunklen Modus, mit der Nutzer die Farbschema-Einstellung ihres Systems für die aktuelle Website überschreiben können.

Erstellen Sie eine modale oder nicht modale Dialogkomponente, die barrierefrei ist, den Fokus angemessen verwaltet und auf jeder Plattform so geschlossen werden kann, wie Nutzer es erwarten.

Erstellen Sie einen Lade-Spinner, der allen Nutzern den Status „Beschäftigt“ mitteilt, die Einstellungen für reduzierte Bewegung berücksichtigt und effizient animiert wird.

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

Erstellen Sie eine Fortschrittsring-Komponente, die den Abschlussstatus einer Aufgabe oder eines Prozesses visuell darstellt. Sie sollte Inhalte in der Mitte unterstützen und ein markenkonsistentes Design haben.

Erstellen Sie eine hierarchische Vollbildnavigation, mit der Nutzer in verschachtelte Ansichten wechseln und zurückwischen oder zurücknavigieren können, wobei der Browserverlauf synchronisiert bleibt.

Sie können Kästchen gestalten, einschließlich benutzerdefinierter Symbole, Layouts, Farben und Animationen zum Aktivieren/Deaktivieren, während die native Funktionalität und Barrierefreiheit erhalten bleiben.

Sie können Einblend-, Vergrößerungs- oder andere komplexe Aufdeckungseffekte für Elemente erstellen, wenn sie beim Scrollen in den Scrollport (oder Darstellungsbereich) ein- und austreten.

Ein Element nahtlos zwischen zwei Zielpositionen verschieben. Beispiel: Verschieben einer ausgewählten Tab-Unterstreichung zwischen dem zuvor ausgewählten Tab und dem aktuell ausgewählten Tab.

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

Elemente wie Dialogfelder, Pop-over und Kurzinfos animieren, wenn sie in die oberste Ebene ein- oder ausgeblendet werden.

Unterstützung für das Ziehen, um ein schwebendes Element auf der Seite zu verschieben.

Sie können scrollbasierte Effekte wie Parallaxen erstellen, bei denen sich Vorder- und Hintergrundebenen unterschiedlich schnell bewegen, um beim Scrollen einen Tiefeneffekt zu erzeugen.

Das aktuell eingerastete nicht interaktive Element in Scroll-Snap-Karussells, Galerien oder ganzseitigen Wischfunktionen visuell hervorheben. Beispielsweise das Maximieren einer Karte, wenn sie angedockt ist, oder das Einblenden ausgeblendeter Inhalte.

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

Staffeln Sie das Timing von Animationen oder Übergängen für gleichgeordnete Elemente, sodass jedes Element nach einer berechneten Verzögerung basierend auf seiner Position in der Liste der gleichgeordneten Elemente beginnt.

Erstellen Sie flüssige, nahtlose Übergänge zwischen vollständigen Seitennavigationen, z. B. Überblendungen, benutzerdefinierte Enthüllungseffekte oder Morphing von Inhalten von einer Seite zur nächsten.

Sie können einen Button deklarativ mit einem beliebigen Element verbinden, um benutzerdefinierte, anwendungsspezifische Aktionen auszulösen. Dazu können Sie deklarative Buttonbefehle, Aufrufbefehle, Buttonbefehle, benutzerdefinierte Befehle oder deklarative Umschaltaktionen verwenden.

Die Sichtbarkeit eines Dialogfelds oder Popovers über eine Schaltfläche ein- oder ausschalten, ohne JavaScript schreiben zu müssen.

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

Eine Gruppe ähnlicher Elemente wird gleichzeitig mit derselben Übergangslogik umgestellt, z. B. wenn ein Produkt aus einem Einkaufswagen entfernt wird und alle anderen Produkte in ihre neuen Positionen animiert werden.

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

Erstellen Sie interaktive Aufdeckungseffekte, z. B. einen Spotlight-Effekt, der dem Mauszeiger des Nutzers folgt, um Details in einem Bild oder UI-Bereich aufzudecken.

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

Erstelle ein modales Dialogfeld, das durch einfaches Schließen (z. B. durch Klicken oder Tippen außerhalb des Dialogfelds) geschlossen werden kann.

UI mit CSS-Übergängen, Animationen, scrollgesteuerten Animationen und Ansichtsübergängen animieren, während die Bewegung auf dem Compositor beibehalten und die Einstellungen für reduzierte Bewegung berücksichtigt werden.

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

Ein modales Dialogfeld, ein Vollbildelement oder ein natives Popover bleibt sichtbar und funktionsfähig, wenn der zugrunde liegende DOM-Knoten im DOM verschoben oder neu übergeordnet wird.

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

Erstellen Sie ein modales Dialogfeld, das über standardmäßige plattformspezifische Nutzeraktionen geschlossen werden kann, z. B. durch Drücken der Taste Esc auf Desktop-Plattformen oder durch eine „Zurück“- oder „Schließen“-Geste auf Mobilplattformen.

Verhindern, dass die zugrunde liegende Seite gescrollt wird, während ein modales Dialogfeld geöffnet ist.

Visuelle Verbindung von Elementen, die über verschiedene Seitenstatus oder Navigationsschritte in einer Single-Page-Anwendung (SPA) hinweg bestehen bleiben (z.B. Vergrößern eines Produkt-Thumbnails zu einem randlosen Hero-Image), indem ihre Größe, Position oder andere Stileigenschaften fließend verändert werden.

Zustandsänderungen innerhalb einer einzelnen Komponente (Karte, Liste, Bereich oder anderer Unterbaum) animieren, während der Rest der Seite interaktiv bleibt und andere Übergänge gleichzeitig ausgeführt werden.

In verknüpften UI-Elementen wird visuelles Feedback in Echtzeit angezeigt, während ein Nutzer durch am Raster ausgerichtete Inhalte scrollt, bevor die Scroll-Geste abgeschlossen ist.

Synchronisieren Sie Navigationsanzeigen, verknüpfte Inhaltsbereiche und das Analysetracking mit dem aktiv angedockten Element in einem scrollbaren Container.

Visuelle Eigenschaften eines Zielelements animieren, z. B. einen Hintergrund ausblenden, eine Hintergrundfarbe ändern oder Scrollytelling-Effekte erstellen, die vollständig von der Scrollport-Position eines völlig anderen Elements gesteuert werden.

Inhalte mithilfe von Mustern wie Akkordeons, Tabs und „Mehr lesen“-Abschnitten ausblenden, wobei der ausgeblendete Text bei nativen „Auf Seite suchen“-Suchen angezeigt wird, die Indexierung durch Suchmaschinen ermöglicht, Deeplinks mit URL-Fragmenten unterstützt und die ARIA-Barrierefreiheit beibehalten wird.

Erstellen Sie eine scrollbare Liste von Elementen (z.B. ein Karussell mit Bildern oder einen Chat-Unterhaltungsthread), die so angezeigt werden kann, dass ein bestimmtes Element beim ersten Rendern in die Ansicht gescrollt wird.

Eine Kurzinfo oder zusätzliche Informationen einblenden, wenn ein Nutzer den Mauszeiger über ein interaktives Element bewegt, es fokussiert oder lange darauf drückt, ohne dass ein Klick erforderlich ist.

Implementieren Sie eine barrierefreie räumliche Navigation mit Pfeiltasten, die in verschiedenen Layoutmodi (Raster usw.) korrekt funktioniert.

Ermögliche Nutzern, mit einer horizontalen Wischgeste Aktionen für Elemente in einer Liste auszuführen (entfernen, archivieren, als gelesen markieren usw.), damit sie Einträge schnell bearbeiten können, ohne auf ein separates Steuerelement tippen zu müssen.

Ermöglichen Sie Nutzern, horizontal über ein Listenelement oder einen Inhaltsbereich zu wischen, um Kontextaktionsschaltflächen oder ein Seitenmenü einzublenden, ohne dass automatisch eine Aktion ausgelöst wird.

Visuelle Effekte, Animationen oder Fokusänderungen für ein Zielelement erst auslösen, nachdem ein flüssiges programmatisches Scrollen zu diesem Element abgeschlossen ist.

Nutzer können zweidimensionale Oberflächen wie Karten, vergrößerte Bilder, unendliche Leinwände oder große Datenraster frei in beide Richtungen schwenken oder scrollen (entweder diagonal oder mit Richtungswechsel während der Geste), ohne dass die Geste auf eine einzelne horizontale oder vertikale Achse beschränkt ist.

Erstellen Sie eine benutzerdefinierte Auswahlkomponente, deren Drop-down-Menü animiert ist. Beispielsweise wird das Menü ein- oder ausgeblendet oder die Optionen werden bei der Auswahl animiert.

Sie können Kästchen, Optionsfelder, Schieberegler und Fortschrittsanzeigen an die Farbpalette Ihrer Website anpassen, ohne sie durch benutzerdefinierte Komponenten ersetzen zu müssen.

Gestalten Sie einen nativen Schieberegler mit benutzerdefinierten Zuständen für Spur, Ziehpunkt, Füllung und Fokus, ohne die native Funktionalität und Barrierefreiheit zu beeinträchtigen.

Sie können benutzerdefinierte Auswahlelemente erstellen, deren Schaltfläche, Auswahl, Pfeilsymbol und Häkchen nahtlos zur Typografie, zu den Farben, Abständen und Rahmen Ihres Marken- oder Designsystems passen.

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

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

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

Erstellen Sie einen barrierefreien Schalter mit dem nativen HTML-Attribut „switch“ und verwenden Sie ein gestaltetes Kästchen, wenn das Attribut nicht unterstützt wird.

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

Erstellen Sie benutzerdefinierte Auswahlfelder, deren Optionen auf einzigartige oder interessante Weise positioniert sind, anstatt die herkömmliche gestapelte Liste von Optionen zu verwenden.

Formularfelder sollten sich vergrößern und verkleinern lassen, um sich an die Nutzereingabe anzupassen, z.B. wenn der Nutzer etwas eingibt oder eine andere Option auswählt. Wenden Sie maximale und minimale Größenbeschränkungen an, um dynamische und responsive Formularfelder zu erstellen, die dem Seitendesign entsprechen.

Best Practices für die Erstellung barrierefreier, sicherer und nutzerfreundlicher Webformulare. Verwenden Sie diesen Leitfaden, wenn Sie Formulare, Eingaben und Abläufe für die Einreichung erstellen oder ändern.

Verwenden Sie CSS, um Formularfelder hervorzuheben, die vom Browser automatisch ausgefüllt und nicht vom Nutzer bearbeitet wurden.

Implementieren Sie die Eingabe-zum-Senden-Funktion in Textbereichen und einzeiligen Eingaben (Chat, Suche, Inline-Umbenennung) sicher für Nutzer von Eingabemethoden-Editoren (IME), um das Senden von unvollständigem Text zu verhindern.

Stellen Sie Fehlermeldungen für übersprungene oder leere Pflichtfelder nur nach der Nutzerinteraktion bereit, um vorzeitige Fehler zu vermeiden und dafür zu sorgen, dass das Feedback zeitnah und im Kontext des Nutzerablaufs erfolgt.

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.

Prüfen Sie, ob in einem Auswahlmenü eine andere Option als die Standardoption ausgewählt wurde, nachdem der Nutzer mit dem Steuerelement interagiert hat.

Telefonnummern und einmalige Sicherheitscodes, die per SMS gesendet werden, lassen sich mit automatischer Codeextraktion und barrierefreier Formulareingabe bestätigen.

Zeigen Sie Feedback zur Validierung von Formularfeldern (z. B. Anforderungen an die Passwortkomplexität oder das E‑Mail-Format) erst an, nachdem der Nutzer die erste Interaktion abgeschlossen hat. So vermeiden Sie vorzeitige Fehler beim Seitenaufbau oder während der Nutzer tippt.

Benutzerdefinierte Elemente standardmäßig barrierefrei machen, Rollen und ARIA-Status über das ElementInternals-ARIA-Mixin festlegen, den Fokus mit „delegatesFocus“ verwalten und ARIA-Beziehungen innerhalb eines einzelnen Shadow-Roots beibehalten.

Definieren, registrieren und verwalten Sie den Lebenszyklus autonomer benutzerdefinierter Elemente, einschließlich Konstruktorregeln, Lebenszyklus-Callbacks, Upgrade-Timing, Attribut-/Property-Reflektion und Namenskonventionen.

Mit „formAssociated“ und „ElementInternals“ können Sie ein benutzerdefiniertes Steuerelement nativ in Formulare einbinden, seinen eigenen Wert senden, es in die Einschränkungsvalidierung einbinden und auf Zurücksetzen, Deaktivieren und Wiederherstellen des Status reagieren.

Handlungsorientierte Richtlinien für moderne HTML-Architektur, Semantik, native interaktive APIs (Dialog, Popover, Details), Fokusverwaltung und Ressourcenpriorisierung. Verwenden Sie diesen Leitfaden, wenn Sie Webdokumente strukturieren, native Overlays implementieren oder die Reihenfolge beim Laden von Ressourcen optimieren.

Ein benutzerdefiniertes Element wird serverseitig gerendert und dann direkt hydriert, ohne dass es neu gerendert werden muss oder unformatierte Inhalte kurz aufblitzen.

Kapseln Sie das DOM und die Stile einer Komponente mit Shadow DOM, erstellen Sie den Baum effizient mit HTML-Vorlagen und projizieren Sie Nutzerinhalte mit Slots.

Stile über die Schattengrenze hinweg mit :host-Selektoren, übernommenen und benutzerdefinierten Eigenschaften für das Design, ::slotted und ::part sowie Kaskadenebenen und Containerabfragen innerhalb von Komponenten.

Orientierung und übergreifende Prinzipien für die Erstellung und Verwendung von Webkomponenten, einschließlich benutzerdefinierter Elemente, Shadow DOM, Vorlagen und Slots, deklarativem Shadow DOM, Styling über die Shadow-Grenze hinweg, formularbezogenen benutzerdefinierten Elementen und Anforderungen an die Barrierefreiheit. Verwenden Sie diesen Leitfaden, wenn Sie wiederverwendbare UI-Komponenten, Designsysteme oder serverseitig gerenderte benutzerdefinierte Elemente erstellen.

Interaktive Komponenten wie Akkordeons, Menüs und maximierbare Karten lassen sich flüssig von und zu ihren natürlichen Abmessungen animieren.

Berechnet die Größe eines Elements anhand seiner intrinsischen Größe und sorgt dafür, dass es in die vorgegebenen Designbeschränkungen passt.

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 Design-Umschalter aktiviert ist oder nicht.

Bestimmte CSS-Regeln oder ‑Deklarationen werden nur dann angewendet, wenn eine bestimmte At-Regel vom Browser unterstützt wird.

Erstellen Sie eine Komponente, die ihr Layout ä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 ein einspaltiges Layout.

Moderne CSS-Layouts wie Flexbox, Grid, Subgrid, Containerabfragen, Ankerpositionierung und intrinsische Größenanpassung. Nutzen Sie diese Fähigkeit, wenn Sie responsive UI-Komponenten oder Seitenlayouts entwerfen.

Handlungsorientierte Richtlinien für die moderne CSS-Architektur, einschließlich Kaskade, Selektoren, Scoping, Verschachtelung und Design-Tokens. Verwenden Sie diesen Leitfaden, wenn Sie Stile erstellen oder Designsysteme verwalten.

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

Elemente wie Schriftgröße, Abstände und Mediengrößen werden fließend an die Größe des übergeordneten Containers angepasst, anstatt feste Haltepunkte zu verwenden.

Sie können einzelne CSS-Transformations-Properties (z.B. „translate“, „rotate“, „scale“) unabhängig von anderen Transformations-Properties für ein einzelnes Element animieren oder überschreiben.

Sie können die sichtbare Clipping-Grenze eines Elements an der Inhalts-, Padding- oder Rahmenkante oder an einem bestimmten Abstand zu einer dieser Kanten ausrichten. So lässt sich genauer steuern, wie Inhalte abgeschnitten werden.

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

Erstellen Sie eine Benutzeroberfläche, die sich an die Container- und Darstellungsbereichsgröße anpasst, einschließlich Containerabfragen, dynamischen Darstellungsbereichseinheiten, Seitenverhältnissen und responsiver Typografie.

Elemente basierend auf der Schnittmenge oder Vereinigung von Selektoren und bedingten @-Regeln ansprechen und gleichzeitig Wiederholungen minimieren.

Mit CSS-Container-Stilabfragen können Sie Komponenten erstellen, die die visuelle Logik basierend auf dem semantischen Kontext anpassen.

Erstellen Sie eine Komponente, deren Stile bedingt von ihrer eigenen Breite oder Höhe abhängen können, anstatt von der Breite oder Höhe des Darstellungsbereichs. Beispiele sind eine Kartenkomponente, deren Layout sich je nach Größe ändern kann, oder ein Call-to-Action-Button, der je nach Breite Hilfetext anzeigen kann.

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

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

Mit Temporal.Duration und Intl.DurationFormat können Sie die verstrichene oder verbleibende Zeit zwischen Datums- und Uhrzeitangaben berechnen, Dauereinheiten ausgleichen und menschenlesbare lokalisierte Dauern formatieren.

Mit den Temporal Plain-Typen können Sie standortunabhängige Kalenderdaten, Uhrzeiten, Teiltermine (wiederkehrende Geburtstage, Ablaufdaten von Kreditkarten) und wiederkehrende monatliche Intervalle ohne Zeitzonenabweichung modellieren.

Sie können zukünftige Besprechungen oder Termine planen, indem Sie sie explizit an eine geografische IANA-Zeitzone binden. So bleiben die Terminzeiten unabhängig von der Sommerzeitumstellung, „übersprungenen“ oder „wiederholten“ Stunden bei der Zeitumstellung korrekt.

Mit Temporal.Instant können Sie Intervalle zwischen ISO 8601-Zeitstempeln im Submillisekunden- oder Nanosekundenbereich parsen, sortieren und messen, ohne dass es zu Konflikten bei der Datumskürzung kommt.

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

C/C++ mit Emscripten in WebAssembly kompilieren

Teilen Sie rechenintensive synchrone Verarbeitungen (komplexe Berechnungen und/oder lange Schleifen) oder DOM-Updates auf, damit der Browser Nutzereingaben verarbeiten und den Bildschirm neu zeichnen kann.

Berechnen Sie die Gesamtzeit, die ein Nutzer tatsächlich auf einer Seite verbracht hat, ohne die Zeiträume, in denen sich der Tab im Hintergrund befand.

Asynchrone Abhängigkeiten bedingt laden oder initialisieren (z. B. Polyfills für fehlende Webfunktionen importieren), ohne dass eine komplexe Orchestrierung über alle Skriptabhängigkeiten einer Seite hinweg erforderlich ist.

Mehrere Analyse-, Telemetrie- und Core Web Vitals-Ereignisse in einem einzigen Beacon zusammenfassen und bündeln, um Netzwerküberlastungen zu minimieren und die Serverlast zu reduzieren, während gleichzeitig Echtzeit-Updates bereitgestellt werden.

Reduzieren Sie die Renderingzeiten 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.

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

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) und mehrere Pixeldichten (z. B. 1x und 2x) anbieten. So kann der Browser dynamisch die beste Kombination aus Dateigröße und visueller Qualität für die Gerätefunktionen des Nutzers ermitteln.

Setzen Sie die Priorität von Hintergrunddatenabrufen, die mit der Fetch API durchgeführt werden, herab, um Netzwerkkonflikte mit vom Nutzer initiierten Anfragen zu vermeiden.

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

Sie können Systemressourcen und Akkulaufzeit sparen, indem Sie die Ausführung von JavaScript im Hintergrund (z. B. <canvas>-Animationen, WebGL-Rendering oder hochfrequente WebSocket-Datenabfragen) 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.

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

A/B-Tests, multivariate Tests oder andere Tests mit clientseitigem JavaScript bereitstellen und rendern, um HTML, CSS und JavaScript zu ändern oder einzufügen, ohne dass der Original-Content zuerst angezeigt wird, bevor er flackert oder blinkt, um den Testinhalt anzuzeigen.

Langsam laufendes JavaScript und andere Ursachen für eine schlechte Reaktionsfähigkeit bei Interaction to Next Paint (INP) identifizieren.

Skripts identifizieren, die am meisten für Long Animation Frames verantwortlich sind

Verbessern Sie die Leistung beim Seitenaufbau, indem Sie Seiten, die der Nutzer wahrscheinlich als Nächstes besucht, vorab abrufen oder rendern.

Verschieben Sie das Herunterladen von Video- und Audio-Assets, die nicht auf dem Bildschirm angezeigt werden, einschließlich Videoposterbildern und vorab geladenen Mediendaten, bis sich der Mediaplayer dem Darstellungsbereich nähert. So sparen Sie Bandbreite und reduzieren die Netzwerkkonkurrenz beim ersten Seitenaufbau.

Messen Sie die Zeit, die für Nutzerinteraktionen und clientseitige Navigationen benötigt wird, um neue inhaltsreiche Aktualisierungen auf dem Bildschirm zu rendern.

Optimieren Sie die Ladepriorität von Largest Contentful Paint (LCP)-Kandidatenbildern und stufen Sie nicht kritische Bilder herab, um Verzögerungen beim Laden kritischer Ressourcen zu reduzieren.

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

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

Interaktionen können schneller und reaktionsfreudiger gestaltet werden (was die INP-Werte (Interaction to Next Paint) reduziert), indem Layout-Neuberechnungen in komplexen Layouts wie datenintensiven Dashboards oder Tabellenrastern vermieden werden.

Seiten deklarativ mit Inhalten aktualisieren, die später in dasselbe HTML-Dokument oder über imperative JavaScript APIs gestreamt werden.

Praktische Richtlinien zur Optimierung moderner Webanwendungen. In diesem Leitfaden finden Sie Informationen zum Prüfen der Leistung, zum Optimieren von Lademesswerten, zum Beheben langsamer Interaktionen und zum Optimieren der Core Web Vitals (LCP, INP, CLS).

Analysen, Core Web Vitals, 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.

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

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

Praktische Programmierrichtlinien für die Entwicklung barrierefreier Webanwendungen, einschließlich semantischem HTML, Fokusverwaltung, Formularen, Medien und Tests. Nutzen Sie diese Fähigkeit, wenn Sie Bedienungshilfen, Tastaturnavigation oder ARIA prüfen oder implementieren.

Synchronisieren Sie programmatische Bedienungshilfen-Status (z. B. aria-invalid) mit dem visuellen :user-invalid-Status, damit Nutzer von Screenreadern erst nach der Interaktion eine Fehlermeldung erhalten, die der visuellen Darstellung entspricht.

Verwenden Sie von CSS generierte Inhalte (::before/::after) so, dass sie barrierefrei bleiben, einschließlich Alternativtext für dekorative Inhalte.

Die Einstellungen des Betriebssystems für die Textskalierung einer Seite müssen berücksichtigt werden, damit Schriftgrößen, Layout und rem-basierte Maße den Einstellungen für Bedienungshilfen des Nutzers entsprechen.

Webursprünge und Websites können sicher über dokumentübergreifende Nachrichten und URLs hinweg verglichen und validiert werden, ohne dass eine fehleranfällige String-Analyse erforderlich ist.

Richten Sie gemeinsame Secrets mithilfe von Public-Key-Kapselung oder Schlüsselvereinbarung ein, einschließlich Hybrid- und Post-Quanten-Schutz, und verschlüsseln Sie sensible Daten im Browser mit authentifizierter Verschlüsselung.

Über eine öffentliche Webanwendung auf Ressourcen im lokalen Netzwerk oder auf der Loopback-Schnittstelle eines Nutzers zugreifen.

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

Nach einer erfolgreichen Anmeldung mit Passwort wird im Hintergrund ein Passkey für einen bestehenden Nutzer registriert.

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

Die Identität eines angemeldeten Nutzers vor einer sensiblen Aktion mithilfe seiner vorhandenen Passkeys bestätigen.

Passkey für ein bestehendes Nutzerkonto registrieren

Umfassende Orientierung und übergreifende Prinzipien für die Implementierung von WebAuthn und Passkeys in Webanwendungen. Verwenden Sie diesen Leitfaden, wenn Sie Passkeys registrieren, authentifizieren, verwalten oder noch einmal authentifizieren.

Verhindern Sie DOM-basierte XSS-Angriffe, indem Sie eine Richtlinie für vertrauenswürdige Typen definieren, um nicht vertrauenswürdigen HTML-Code zu bereinigen. Verwenden Sie die Richtlinie, wenn Sie in DOM-Sinks wie innerHTML schreiben, und erzwingen Sie vertrauenswürdige Typen über die Content Security Policy.

Wiederkehrende Nutzer können sich mit ihren gespeicherten Passkeys oder Passwörtern authentifizieren, ohne dass sie zu einer Anmeldeseite weitergeleitet werden oder ihr Workflow unterbrochen wird.

Sie können eine Seite oder einen Worker so einschränken, dass nur mit einer expliziten Zulassungsliste von Netzwerkendpunkten kommuniziert wird, um nicht autorisierte Anfragen von Drittanbietern und clientseitige Daten-Exfiltration zu verhindern.

Nicht vertrauenswürdige HTML-Inhalte aus Nutzereingaben sicher parsen und anzeigen, indem unsichere Elemente und Attribute entfernt werden.

Überprüfen Sie die kryptografische Integrität externer Skripts, Stylesheets, Schriftarten und Bilder, die von Drittanbieterquellen geladen werden, und legen Sie fest, ob diese Anfragen Anmeldedaten oder Referrer-URLs senden.

Signieren und verifizieren Sie Nachrichten, Tokens oder Artefakte im Browser mit klassischen oder quantenresistenten (Post-Quanten-)asymmetrischen Schlüsseln, um die Datenintegrität und ‑authentizität zu gewährleisten.

Sie können prüfen, ob ein Nutzer Inhaber einer E‑Mail-Adresse ist, wenn er ein Konto erstellt, sich anmeldet oder ein Konto wiederherstellt, ohne einen einmaligen Sicherheitscode oder eine E‑Mail mit einem Magic Link zu senden.

Präventive Sicherheitsrichtlinien für Webentwickler (XSS, CSP, Cookies, Cross-Origin-Isolation). Nutzen Sie diese Fähigkeit, um den Prozess der Prüfung, des Testens und der sicheren Bereitstellung von Sicherheitsrichtlinien zu steuern.

Handlungsorientierte Richtlinien für Webentwickler zur Implementierung von Privacy by Design, Datenminimierung, Audits durch Drittanbieter und sicherer Datenverarbeitung. Nutzen Sie diese Fähigkeit, wenn Sie Anwendungen entwerfen, Drittanbieterdienste integrieren, Nutzerdaten verarbeiten oder Sicherheitsheader konfigurieren.

Übertragen Sie eine installierte Web-App an einen neuen Ursprung, wobei die Nutzerkonfiguration und die Verknüpfungen auf Betriebssystemebene beibehalten werden.

Erkennen Sie die Sprache von von Nutzern erstellten Inhalten oder bereits vorhandenen Websiteinhalten.

Mit der Prompt API können Sie im Browser Natural Language Inference auf dem Gerät ausführen, mit Streaming-Ausgabe, strukturierten JSON-Antworten und Sitzungsverwaltung mit mehreren Turns.

Textinhalte mit der On-Device Summarizer API zusammenfassen

Mit der On-Device Translator API Text zwischen Sprachen übersetzen.

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

Clientseitige JavaScript-Funktionen programmatisch als Tools für KI-Agenten mit der WebMCP Imperative API registrieren.

In diesem Leitfaden wird beschrieben, wie Sie WebMCP (Web Model Context Protocol) in Browseranwendungen implementieren, um clientseitige Funktionen über deklarative oder imperative APIs als Tools für KI-Agenten bereitzustellen.