Gebruiksvoorbeelden van moderne webbegeleiding

Gepubliceerd: 19 mei 2026

Dit is een gegenereerde lijst van alle gebruiksscenario's die nu beschikbaar zijn in Modern Web Guidance.

accessibility

accessible-error-announcement

Synchroniseer programmatische toegankelijkheidsstatussen (zoals aria-invalid) met de visuele status :user-invalid om ervoor te zorgen dat gebruikers van schermlezers alleen foutmeldingen ontvangen na interactie, wat de visuele ervaring weerspiegelt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

built-in-ai

language-detection

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

language-model

Voer in de browser op het apparaat zelf natuurlijke taalinferentie uit met behulp van de Prompt API, met streaming uitvoer, gestructureerde JSON-reacties en sessiebeheer over meerdere beurten.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

summarizer

Vat tekstinhoud samen met behulp van de Summarizer API op het apparaat.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

translator

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

css

highlight-text-ranges

Markeer willekeurige tekstgedeelten op een pagina, zoals zoekresultaten, spelfouten of cursors voor gezamenlijk bewerken.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

forms

animated-select-picker

Maak een aangepast selectiecomponent met een geanimeerd dropdownmenu. Het menu kan bijvoorbeeld vervagen of in beeld schuiven, of de opties kunnen animeren na selectie.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

autofill-address-form

Maak een adresformulier met de juiste autocomplete-attributen en ondersteuning voor automatisch invullen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

autofill-highlight-inputs

Gebruik CSS om formuliervelden te markeren die automatisch door de browser zijn ingevuld en niet door de gebruiker zijn bewerkt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

autofill-payment-form

Ontwerp een betaalformulier dat kaartgegevens verzamelt met correcte autocomplete-waarden en autofill-ondersteuning.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

autofill-sign-in-form

Maak een aanmeldformulier met de juiste waarden voor automatisch aanvullen en ondersteuning voor automatisch invullen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

autofill-sign-up-form

Maak een aanmeldingsformulier met de juiste waarden voor automatisch aanvullen en ondersteuning voor automatisch invullen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

brand-consistent-forms

Zorg ervoor dat selectievakjes, keuzerondjes, schuifregelaars en voortgangsbalken aansluiten bij het kleurenpalet van uw website, zonder ze te vervangen door aangepaste componenten.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

branded-select-styling

Maak aangepaste selectie-elementen waarvan de knop, kiezer, pijlpictogram en vinkje naadloos aansluiten op de typografie, kleuren, afstand en randafwerking van uw merk of ontwerpsysteem.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

custom-select-picker-layouts

Maak aangepaste selectievelden waarvan de opties op een unieke of interessante manier zijn geplaatst, in plaats van de traditionele gestapelde lijst met opties.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

form-fields-automatically-fit-contents

Laat formuliervelden meegroeien en krimpen met de invoer van de gebruiker, bijvoorbeeld wanneer de gebruiker typt of een andere optie selecteert. Stel maximale en minimale groottelimieten in om dynamische en responsieve formuliervelden te creëren die aansluiten bij het paginaontwerp.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

required-field-feedback

Geef pas na interactie van de gebruiker een foutmelding weer voor verplichte formuliervelden die zijn overgeslagen of leeggelaten. Dit voorkomt fouten vooraf en zorgt ervoor dat de feedback tijdig en contextueel relevant is voor het gebruikersproces.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

rich-media-picker

Maak een aangepast selectiecomponent waarvan de opties complexe HTML-opmaak kunnen bevatten (bijvoorbeeld afbeeldingen, pictogrammen en andere rijke opmaak) in plaats van alleen platte tekst.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

select-menu-interaction

Controleer of er in een selectiemenu een andere optie is gekozen dan de standaardoptie, maar pas nadat de gebruiker interactie met het besturingselement heeft gehad.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

validate-input-after-interaction

Toon feedback over de validatie van formuliervelden (bijvoorbeeld wachtwoordcomplexiteit of vereisten voor het e-mailformaat) pas nadat de gebruiker de eerste interactie heeft voltooid. Dit voorkomt voortijdige fouten bij het laden van de pagina of tijdens het typen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

passkeys

passkey-authentication

Authenticeer een terugkerende gebruiker met een toegangscode voor de primaire aanmelding.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

passkey-conditional-create

Registreer op de achtergrond een toegangscode voor een bestaande gebruiker na een succesvolle wachtwoordaanmelding.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

passkey-management

Gebruikers kunnen de aan hun account gekoppelde toegangscodes bekijken en beheren.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

passkey-reauthentication

Verifieer de identiteit van een ingelogde gebruiker met behulp van hun bestaande wachtwoorden voordat u een gevoelige actie uitvoert.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

passkey-registration

Registreer een toegangscode voor een bestaand gebruikersaccount.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

performance

batch-analytics-events

Meerdere analysegebeurtenissen worden gebundeld en verwerkt in één beacon om netwerkcongestie te minimaliseren en de serverbelasting te verlagen, terwijl er toch realtime updates worden geleverd.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

break-up-long-tasks

Splits zware synchrone processen (complexe berekeningen en/of lange lussen) of DOM-updates op, zodat de browser de gebruikersinvoer kan verwerken en het scherm opnieuw kan tekenen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

calculate-total-foreground-time

Bereken de totale tijd die een gebruiker daadwerkelijk heeft besteed aan het bekijken van een pagina, exclusief de perioden waarin het tabblad op de achtergrond actief was.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

conditional-async-dependencies

Laad of initialiseer asynchrone afhankelijkheden voorwaardelijk (zoals het importeren van polyfills voor ontbrekende webfunctionaliteiten) zonder dat complexe coördinatie tussen alle scriptafhankelijkheden van een pagina nodig is.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

defer-rendering-heavy-content

Verkort de laadtijden van webpagina's met veel content (bijvoorbeeld pagina's met lange feeds, veel artikelen of complexe dashboards) door het laden van content die niet direct zichtbaar is voor de gebruiker uit te stellen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

defer-work-until-scroll-ends

Stel kostbare bewerkingen zoals DOM-updates, het ophalen van gegevens, het bijhouden van analyses of het opnieuw berekenen van de lay-out uit tot na het scrollen om een ​​soepele scrollprestatie te garanderen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

deprioritize-background-fetches

Geef achtergronddata-ophalingen via de Fetch API minder prioriteit om netwerkcongestie met door gebruikers geïnitieerde verzoeken te voorkomen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

detect-initial-visibility-state

Bepaal op betrouwbare wijze of een pagina in eerste instantie op de achtergrond is geladen, zelfs in gevallen waarin het script asynchroon wordt geladen nadat de gebruiker de pagina naar de voorgrond heeft gebracht.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

efficient-background-processing

Bespaar systeembronnen en batterijduur door de uitvoering van JavaScript op de achtergrond (zoals <canvas> -animaties, WebGL-rendering of het frequent opvragen van WebSocket-gegevens) te pauzeren wanneer het component niet op het scherm te zien is, en deze vervolgens net op tijd te hervatten wanneer het component weer in beeld komt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

faster-spa-view-transitions

Maak snellere overgangen terug naar eerder bezochte pagina's in een Single-Page Application (SPA) mogelijk door hun structurele DOM-status te behouden in plaats van ze bij elke navigatie te vernietigen en opnieuw op te bouwen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

full-session-analytics

Houd op betrouwbare wijze analyse-, fout- en telemetriegegevens bij gedurende het volledige paginabezoek van de gebruiker en stel het verzenden van de gegevens uit tot het moment dat de gebruiker de pagina verlaat.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

identify-heavy-scripts

Identificeer de scripts die het meest verantwoordelijk zijn voor de lange animatieframes.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

identify-inp-causes

Identificeer traag werkende JavaScript-code die de INP-score beïnvloedt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

improve-next-page-load-performance

Verbeter de laadsnelheid van pagina's door pagina's die de gebruiker waarschijnlijk als volgende zal bezoeken, vooraf op te halen of te renderen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

interactions-in-complex-layouts

Maak interacties sneller en responsiever (en verlaag de Interaction to Next Paint (INP)-scores) door lay-outherberekeningen in complexe lay-outs, zoals data-intensieve dashboards of spreadsheetachtige tabellen, te vermijden.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

optimize-image-priority

Optimaliseer de laadprioriteit van Largest Contentful Paint (LCP)-kandidaten en geef minder prioriteit aan niet-kritieke afbeeldingen om vertragingen bij het laden van kritieke resources te verminderen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

optimize-preload-priority

Optimaliseer de relatieve prioriteit van vooraf geladen content om vertragingen bij het laden van kritieke bronnen te verminderen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

optimize-script-priority

Optimaliseer de laadprioriteit van scripts door kritieke asynchrone scripts voorrang te geven en niet-essentiële of scripts die later in het script aan bod komen, minder prioriteit te geven. Dit verbetert de volgorde van de scripts en vermindert vertragingen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

resolution-optimized-pseudo-elements

Gebruik resolutie-geoptimaliseerde afbeeldingen in CSS-pseudo-elementen (zoals ::before en ::after ) om het aantal DOM-knooppunten te verminderen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

schedule-tasks-by-priority

Plan taken met verschillende prioriteiten in om ervoor te zorgen dat kritieke taken eerst worden uitgevoerd, terwijl achtergrondtaken worden uitgesteld.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

sequence-distributed-events

Registreer en sequentieer bewerkingen in gedistribueerde microservices of traceeromgevingen met hoge doorvoer door tijdstempels met nanoseconde-resolutie vast te leggen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

user-experience

adapt-scrollbar-to-contrast-preferences

Verbeter de zichtbaarheid van de schuifbalk voor gebruikers die de voorkeur geven aan interfaces met een hoog contrast.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

anchor-positioning-tab-underline

Verplaats een element naadloos tussen twee doelposities. Bijvoorbeeld, verplaats de onderstreping van een geselecteerd tabblad tussen het eerder geselecteerde tabblad en het momenteel geselecteerde tabblad.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

animate-element-entry-exit

Elementen worden soepel verborgen/weergegeven wanneer ze aan de DOM worden toegevoegd/verwijderd of wanneer hun weergavewaarden worden gewijzigd.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

animate-to-from-top-layer

Animeer elementen zoals dialoogvensters, pop-ups en tooltips wanneer ze de bovenste laag binnenkomen of verlaten.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

animate-to-intrinsic-sizes

Animeer interactieve componenten (zoals accordions, menu's en uitklapbare kaarten) vloeiend naar en van hun natuurlijke afmetingen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

apply-webgl-shaders

Pas aangepaste visuele effecten toe op HTML-content met WebGL-shaders.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

calculate-event-differentials

Bereken de duur en de resterende tijd tussen de datums en tijden.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

calculate-with-intrinsic-sizes

Bereken de grootte van een element op basis van de intrinsieke afmetingen, rekening houdend met de gegeven ontwerpbeperkingen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

capture-location-agnostic-data

Registreer chronologische gegevens die niet mogen veranderen op basis van de locatie van een gebruiker, zoals geboortedata, terugkerende alarmen of nationale feestdagen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

Maak een carrousel met dia's met afbeeldingen of andere visuele elementen, waarbij elke dia een animatie uitvoert wanneer deze in/uit het midden van de carrousel verschijnt/verlaat. De dia's kunnen bijvoorbeeld in- en uitfaden, roteren, groter of kleiner worden, enzovoort.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

Markeer visueel het momenteel vastgeklikte niet-interactieve item in scrollcarrousels, galerijen of paginavullende swipe-ervaringen. Bijvoorbeeld door een kaart uit te vouwen wanneer erop wordt geklikt, of door verborgen inhoud te onthullen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

child-state-based-styling

Ontwikkel een component dat zijn styling aanpast op basis van de status van een van zijn onderliggende elementen. Bijvoorbeeld een component dat in de lichte of donkere modus wordt weergegeven, afhankelijk van of een themaschakelaar is aangevinkt (of niet).

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

complex-shapes

Knip elementen en hun inhoud uit tot elke gewenste vorm, zoals een symbool, penseelstreek of organische textuur, voor expressievere ontwerpen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

component-specific-light-dark-theme

Bepaalde elementen (bijv. codeblokken, mediaspelers, enz.) moeten in de lichte of donkere modus worden weergegeven, onafhankelijk van het kleurenschema van de pagina.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

consistent-cross-document-transitions

Zorg ervoor dat de kritieke paginastatus is geladen en stabiel is voordat een overgang tussen documentweergaven wordt gestart. Dit betekent dat kritieke CSS-stijlen zijn geladen en toegepast, kritieke JavaScript-code is geladen en uitgevoerd, en dat de HTML die zichtbaar is voor de gebruiker bij de eerste weergave van de pagina, is geparseerd voordat de overgang plaatsvindt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

content-based-styling

Ontwikkel een component dat zijn lay-out aanpast op basis van de aanwezigheid (of afwezigheid) van specifieke subelementen. Als het component bijvoorbeeld een afbeelding bevat, gebruik dan een lay-out met meerdere kolommen; anders standaard een lay-out met één kolom.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

coordinate-global-events

Plan toekomstige vergaderingen of evenementen door ze expliciet te koppelen aan een geografische IANA-tijdzone, zodat de aanvangstijden van de evenementen accuraat blijven, ongeacht overgangen naar zomertijd, "overgeslagen" of "herhaalde" uren tijdens de klokwisseling.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

cross-document-transitions

Creëer vloeiende, naadloze overgangen tussen paginanavigaties, zoals crossfades, aangepaste onthullingseffecten of het geleidelijk overgaan van content van de ene pagina naar de andere.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

customize-scrollbar-color-and-thickness

De kleur of dikte van een schuifbalk aanpassen

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

dark-mode

Implementeer ondersteuning voor de donkere modus op een manier die rekening houdt met de voorkeur van de gebruiker voor een licht/donker thema en de gebruikersinterface van de browser aanpast (bijv. scrollbalken, formulierelementen, enz.).

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

declarative-button-actions

Verbind een knop op declaratieve wijze met elk element om aangepaste, toepassingsspecifieke acties te activeren met behulp van declaratieve knopopdrachten, aanroepopdrachten, knopopdrachten, aangepaste opdrachten of declaratieve schakelacties.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

declarative-dialog-popover-control

Schakel de zichtbaarheid van een dialoogvenster of pop-upvenster in of uit met een knop, zonder JavaScript te schrijven.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

deliver-optimized-decorative-images

Lever geoptimaliseerde decoratieve afbeeldingen (zoals achtergronden, UI-pictogrammen of complexe maskers) door tegelijkertijd de nieuwste afbeeldingsformaten (zoals AVIF of WebP) aan te bieden, samen met meerdere pixeldichtheden (zoals 1x en 2x), zodat de browser dynamisch de beste combinatie van bestandsgrootte en beeldkwaliteit kan bepalen die past bij de mogelijkheden van het apparaat van de gebruiker.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

design-token-reactivity

Definieer ontwerpkenmerken van een hoger niveau, zoals dichtheidsmodi (compact, comfortabel, ruim) of thema's, en laat afgeleide componenten direct en op componentgeschikte wijze reageren op wijzigingen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

directional-navigation-transitions

Animeer visuele statuswijzigingen om de navigatierichting van de gebruiker weer te geven, bijvoorbeeld door nieuwe inhoud van rechts naar binnen te schuiven bij het vooruitgaan of van links naar binnen bij het terugkeren naar een vorig scherm.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

dynamic-sibling-animations

Spreid de animatie- of overgangstijd over de afzonderlijke elementen, zodat elk element start na een berekende vertraging op basis van de positie in de lijst met afzonderlijke elementen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

dynamic-sibling-styling

Creëer dynamische visuele spectrums of lay-outarrangementen die zich automatisch aanpassen aan het aantal elementen in een groep.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

export-html-media-from-canvas

Leg dynamische HTML-content vast en exporteer deze als afbeeldingen of videoframes vanuit het canvas.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

expose-canvas-content-to-browser-features

Maak de inhoud die in een canvas wordt weergegeven toegankelijk voor browserfuncties zoals ondersteunende technologieën, vertaling of de leesmodus.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

flicker-free-client-side-ab-testing

Lever en render A/B-tests, multivariate tests of andere experimenten met behulp van client-side JavaScript om HTML, CSS en JavaScript te wijzigen of in te voegen zonder dat de oorspronkelijke inhoud eerst wordt weergegeven, voordat deze flikkert of knippert om de inhoud van het experiment te tonen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

fluid-scaling

Schaal elementen zoals lettergrootte, afstand en mediaformaten soepel op basis van de grootte van de bovenliggende container, in plaats van vaste breekpunten te gebruiken.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

format-human-readable-durations

Presenteer de verstreken tijd of duur aan gebruikers in een leesbaar, gelokaliseerd formaat, met de flexibiliteit om, afhankelijk van de context, gedetailleerde eenheden (bijv. "1 uur en 30 minuten") of totale aantallen eenheden (bijv. "90 minuten") weer te geven.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

group-element-transitions

Voer gelijktijdig een overgang uit tussen een groep vergelijkbare elementen met behulp van dezelfde overgangslogica, bijvoorbeeld door een product uit een winkelwagen te verwijderen en alle andere producten automatisch naar hun nieuwe positie te laten animeren.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

improve-text-layout-and-legibility

Verbeter de lay-out en leesbaarheid van korte, losstaande tekstfragmenten, zoals kopjes van maximaal een paar regels, door de browser in staat te stellen gelijkmatig verdeelde regeleinden toe te passen bij het omwikkelen van tekst.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

individual-transform-properties

Animeer of overschrijf individuele CSS-transformatie-eigenschappen (bijv. vertalen, roteren, schalen) onafhankelijk van andere transformatie-eigenschappen op een enkel element.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

interactive-content-in-3d-scenes

Integreer interactieve HTML-elementen in een 3D-scène.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

interactive-content-reveal

Creëer interactieve onthullingseffecten, zoals een spotlight die de muiswijzer volgt om details in een afbeelding of UI-onderdeel te onthullen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

interest-triggered-action-previews

Toon een live preview van het effect van een knop wanneer een gebruiker interesse toont (bijvoorbeeld door er met de muis overheen te bewegen, de focus erop te leggen of lang ingedrukt te houden), maar voordat hij of zij daadwerkelijk klikt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

interest-triggered-tooltips

Toon een tooltip of aanvullende informatie wanneer een gebruiker met de muis over een interactief element beweegt, erop focust of het lang indrukt, zonder dat een klik vereist is.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

light-dismiss-a-dialog

Maak een modaal dialoogvenster dat kan worden gesloten met een lichte sluitingsactie (bijvoorbeeld door buiten het dialoogvenster te klikken of te tikken).

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

manage-recurring-intervals

Bereken terugkerende intervallen voor abonnementsfacturering of salariscycli, waarbij automatisch rekening wordt gehouden met uitzonderingen zoals maandovergangen (bijvoorbeeld het toevoegen van een maand aan 31 januari) om nauwkeurige periodeberekeningen te garanderen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

model-partial-time-concepts

Modelleer datum- en tijdconcepten die inherent geen standaardcomponent hebben (zoals een specifiek jaar, dag of datum) zonder gebruik te maken van willekeurige plaatsaanduidingen die rekenfouten introduceren.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

move-dom-element-without-losing-state

Verplaats of wijzig de ouder van een DOM-element zonder belangrijke elementstatus te verliezen, zoals interactiestatussen (:focus/:active), laadstatus van <iframe> , animatie-/overgangsstatus, enz.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

Maak een navigatieladecomponent die, wanneer geactiveerd via een menuknop, vanaf de zijkant over de bestaande pagina-inhoud heen schuift en weer naar buiten schuift wanneer deze wordt gesloten (door weg te vegen, buiten de lade te tikken of op Esc te drukken).

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

overflow-clipping-control

Pas de zichtbare kniprand van een element aan zodat deze gelijk loopt met de rand van de inhoud, de opvulrand of de rand van het element, of met een opgegeven afstand daarvan. Dit biedt meer nauwkeurige controle over hoe de inhoud wordt afgesneden.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

parallax-scroll-effects

Creëer scroll-effecten (zoals parallax) waarbij de voorgrond- en achtergrondlagen met verschillende snelheden bewegen, waardoor een gevoel van diepte ontstaat naarmate de gebruiker scrollt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

persistent-app-tours

Maak permanente onboarding-handleidingen met behulp van gekoppelde native overlays die open blijven tijdens de interactie met de gebruiker.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

persistent-toast-notifications

Maak niet-opdringerige toast- en overlay-notificaties voor permanente, stapelbare berichten en statuscommunicatie.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

persistent-top-layer-ui

Zorg ervoor dat een modaal dialoogvenster, een element op volledig scherm of een native popover zichtbaar en functioneel actief blijft wanneer het onderliggende DOM-element wordt verplaatst of een andere ouder krijgt in de DOM.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

physics-based-easing

Maak aangepaste, op fysica gebaseerde animatie- en overgangseffecten, zoals stuiteren en veren, die natuurlijker en boeiender aanvoelen dan traditionele overgangscurves.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

platform-controls-dismiss-dialog

Maak een modaal dialoogvenster dat kan worden gesloten met behulp van standaard, platformspecifieke gebruikersacties, zoals het indrukken van de Esc -toets op desktops of een "terug"- of "sluiten"-beweging op mobiele platforms.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

position-aware-tooltips

Maak tooltips en pop-ups met richtingpijlen (of andere visuele opmaak) die automatisch de juiste kant op wijzen wanneer het element naar een alternatieve positie draait.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

precise-text-alignment

Bereik een nauwkeurige verticale uitlijning met tekst van elk lettertype. Bijvoorbeeld exact gelijke visuele ruimte boven en onder de tekst, of tekst die perfect aansluit op aangrenzende pictogrammen of afbeeldingen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

prevent-text-wrapping

Zorg ervoor dat de browser geen regeleinden in de tekst invoegt en dat tekst buiten de container kan lopen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

pull-to-reveal

Ontwikkel een 'pull-to-reveal'-functie waarmee de gebruiker het scherm naar beneden kan trekken om meer inhoud te tonen, zoals een zoekbalk.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

reduce-style-repetition

Verminder overmatige herhaling van stijlen door complexe of dynamische stylinglogica te verpakken in herbruikbare functies (zoals een functie die een kleurovergang berekent op basis van een reeks invoerparameters).

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

resilient-context-menus-and-nested-dropdowns

Ontwikkel toegankelijke, responsieve menu's, tooltips, dropdownmenu's of contextuele overlays die gekoppeld moeten zijn aan specifieke UI-elementen. Garandeer dat de overlay zichzelf automatisch herpositioneert (bijvoorbeeld door de assen om te draaien) wanneer deze de randen van het scherm raakt, zodat deze nooit wordt afgesneden.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

same-document-transitions

Verbind visueel elementen die behouden blijven in verschillende paginastatussen of navigaties in een Single Page Application (SPA) (bijvoorbeeld een productminiatuur uitbreiden tot een paginavullende hero-afbeelding) door hun grootte, positie of andere stijleigenschappen vloeiend aan te passen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scroll-entry-exit-effects

Creëer fade-in-, schaalvergroting- of andere complexe onthullingseffecten voor elementen wanneer ze in en uit het scrollgebied (of viewport) komen terwijl de gebruiker scrollt.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scroll-position-aware-elements

Ontwikkel zwevende knoppen of widgets (terug naar boven, scrollen naar beneden, chatstarters, enz.) die verschijnen en verdwijnen afhankelijk van of de gebruiker überhaupt heeft gescrold.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scroll-progress-indicator

Maak een voortgangsbalk, een stapsgewijze voortgangsindicator of een andere visuele weergave die aangeeft hoe ver de gebruiker door een pagina of sectie heeft gescrold.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scroll-snap-realtime-feedback

Geef realtime visuele feedback in gekoppelde UI-elementen terwijl een gebruiker door uitgelijnde content scrollt, nog voordat de scrollbeweging is voltooid.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scroll-snap-state-sync

Synchroniseer navigatie-indicatoren, gekoppelde inhoudspanelen en analysetracking met het actief vastgezette item in een scrollbare container.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scroll-target-on-load

Maak een scrollbare lijst met elementen (bijvoorbeeld een carrousel met afbeeldingen of een chatgesprek) die kan worden weergegeven, waarbij een specifiek element in beeld wordt gescrolld bij de eerste weergave.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scrollability-affordance-hints

Maak scroll-schaduwoverlays, verloopvervagingen of richtingpijlen die alleen verschijnen wanneer er daadwerkelijk meer content is om in die richting te scrollen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

scrollytelling

Animeer visuele eigenschappen van een doelelement — zoals het vervagen van een achtergrond, het veranderen van een achtergrondkleur of het creëren van scroll-effecten — volledig aangestuurd door de scrollpositie van een compleet ander element.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

search-hidden-content

Verberg content met behulp van patronen zoals accordions, tabbladen en 'Lees meer'-secties, terwijl ervoor wordt gezorgd dat de verborgen tekst zichtbaar wordt tijdens native 'Zoeken op pagina'-zoekopdrachten, dat indexering door zoekmachines mogelijk is, dat deeplinks naar URL-fragmenten worden ondersteund en dat de ARIA-toegankelijkheidsrichtlijnen worden nageleefd.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

shaped-cutouts

Combineer meerdere vormen om complexe uitsparingen of 'uitbreek'-effecten in elementen te creëren, zoals het toevoegen van een inkeping aan een element.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

shrinking-header-on-scroll

Animeer een vaste koptekst of paginaomslag vloeiend tijdens het scrollen, zodat deze dynamisch kleiner wordt, schaduwen krijgt en de lay-out verandert over een vooraf gedefinieerde scrollafstand.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

size-aware-styling

Ontwikkel een component waarvan de stijl afhankelijk is van de eigen breedte of hoogte, in plaats van de breedte of hoogte van de viewport. Denk bijvoorbeeld aan een kaartcomponent die zijn lay-out aanpast aan de grootte ervan, of een call-to-action-knop die afhankelijk van de breedte helptekst weergeeft.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

soft-edge-content-fade

Pas een transparantiegradiënt toe op de randen van de inhoud om verder scrollbare gebieden aan te geven of om tekst achter een betaalmuur te verbergen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

stabilize-reactive-state

Beheer taakdeadlines of -planningen in datagestuurde weergaven zonder onverwachte neveneffecten van gedeelde, veranderlijke statusinformatie.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

stack-drill-down

Ontwikkel een hiërarchische navigatie op volledig scherm waarmee gebruikers kunnen doorklikken naar geneste weergaven en terug kunnen vegen of navigeren, waarbij de browsergeschiedenis gesynchroniseerd blijft.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

style-parent-with-has

Stijl de bovenliggende elementen van een formulierveld (bijvoorbeeld labels of veldgroepen) wanneer het veld ongeldig is.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

support-global-calendar-systems

Toon en bereken datums in niet-Gregoriaanse kalendersystemen (bijv. islamitische, Hebreeuwse of Chinese) nauwkeurig voor internationale gebruikers.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

swipe-to-remove

Laat gebruikers items in een lijst bewerken (verwijderen, archiveren, markeren als gelezen, enz.) met een horizontale veegbeweging, zodat ze items snel kunnen verwerken zonder een aparte knop aan te raken.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

visually-stable-font-fallbacks

Definieer letterstijlen zodanig dat de tekst leesbaar en visueel consistent blijft, zelfs als er wordt overgeschakeld tussen het voorkeurslettertype en een van de reservelettertypen (of omgekeerd).

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

visually-stable-mixed-fonts

Definieer letterstijlen zodanig dat tekst leesbaar en visueel consistent blijft in situaties waarin meerdere lettertypen worden gebruikt om één tekstblok weer te geven.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

visually-texture-content

Breng realistische verwering- en textuurpatronen aan op elementen om ze een organische, verouderde of fysieke materiaaluitstraling te geven.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

webmcp

agentic-forms

Maak client-side functionaliteit beschikbaar als tools voor AI-agenten door standaard HTML-formulieren te annoteren met WebMCP-attributen.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub

agentic-javascript-tools

Registreer programmatisch client-side JavaScript-functies als tools voor AI-agenten met behulp van de WebMCP Imperative API.

Gebruikte functies:

Bekijk het gebruiksvoorbeeld op GitHub