Modern Web Guidance-handleidingen

De zichtbaarheid van de scrollbalk verbeteren voor gebruikers die de voorkeur geven aan interfaces met een hoog contrast

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

Kleurrichtlijnen voor het web, waaronder contrastvereisten, lichte en donkere kleurenschema's, de modus voor geforceerde kleuren en het genereren van tinten en schaduwen op basis van een basiskleur.

Knip elementen en hun content bij tot een vrije vorm, zoals een symbool, penseelstreek of organische textuur voor expressievere ontwerpen.

Voeg tekstversieringen toe, zoals onderstrepingen, bovenstrepingen, doorhalingen of volledig aangepaste vormen, met onthullingsanimaties, aangepaste offsets en eindinsets, en flexibele inktoverslag.

De kleur of dikte van een scrollbalk aanpassen

Implementeer ondersteuning voor de donkere modus op een manier die de voorkeur van de gebruiker voor een licht/donker thema respecteert en de UI van de browser aanpast (bijv.scrollbalken, formulierbediening, enzovoort).

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

Selecteer een leesbare tekstkleur met voldoende contrast op een dynamische achtergrondkleur.

Zorg dat elke regel van een kop of lock-up met meerdere regels dezelfde breedte heeft, zoals bij typografie in posterstijl of met gestapelde koppen. In tegenstelling tot uitgevulde tekst wordt de tekst zelf aangepast aan de breedte in plaats van dat de afstand wordt uitgerekt

Dynamische HTML-content vastleggen en exporteren als afbeeldingen of videoframes vanuit het canvas.

Content die in een canvas wordt weergegeven, beschikbaar maken voor browserfuncties zoals ondersteunende technologieën, vertaling of de leesmodus.

Verbeter de vormgeving en leesbaarheid van korte, zelfstandige tekstcontent, zoals koppen van maximaal een paar regels, door de browser toe te staan gelijkmatig verdeelde regeleinden toe te passen bij het teruglopen van tekst.

Zorg voor een nauwkeurige verticale uitlijning met tekst in elk lettertype. Bijvoorbeeld exact gelijke visuele opvulling boven en onder de tekst, of tekst die perfect is uitgelijnd met aangrenzende iconen of afbeeldingen.

Combineer meerdere vormen om complexe uitsneden of 'knock-out'-effecten in elementen te maken, zoals een inkeping toevoegen aan een element.

Pas een transparantieverloop toe op de randen van content om aan te geven dat er meer scrollbare gebieden zijn of om tekst achter een betaalmuur te verbergen.

Maak een thema voor door de browser gegenereerde UI, zoals tekstselectie, scrollbalken, formulierbedieningselementen en kiezers met CSS in plaats van deze opnieuw te maken met aangepaste elementen.

Best practices voor typografie voor het web, waaronder eenheden voor lettergrootte, regelhoogte, tekstterugloop en -balancering, en vloeiende typografie die schaalt met de viewport.

Visuele effecten met CSS, zoals gelaagde schaduwen, overvloeimodi, verlopen met voorspelbare kleurinterpolatie en patronen zoals strepen, schaakborden, stippen en cirkeldiagrammen die alleen uit verlopen zijn opgebouwd.

Definieer lettertypestijlen zodat de tekst leesbaar en visueel consistent blijft als er wordt gewisseld tussen het voorkeurslettertype en een van de alternatieven (of omgekeerd).

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

Pas realistische verwerings- en textuurpatronen toe op elementen om ze een organische, verouderde of fysieke materiaaluitstraling te geven.

Maak een voortgangsbalk voor scrollen, een voortgangstracker met stappen of een visuele indicator die aangeeft hoe ver de gebruiker door een pagina of gedeelte heeft gescrolld.

Maak een carrousel van dia's met afbeeldingen of andere visuele elementen, waarbij elke dia wordt geanimeerd als deze de scroller binnenkomt, centreert of verlaat. De dia's kunnen bijvoorbeeld in- of uitfaden, draaien, groter of kleiner worden, enzovoort.

Bepaalde elementen dwingen om in de lichte of donkere modus te staan (bijvoorbeeld codeblokken, mediaspelers, enzovoort), onafhankelijk van het kleurenschema van de pagina.

Maak tooltips en pop-overs met richtingspijlen (of andere visuele stijlen) die automatisch de juiste richting op wijzen als het element naar een reservepositie wordt gedraaid.

Maak een functie waarmee de gebruiker omlaag kan swipen op het scherm om meer content te tonen, zoals een zoekbalk.

Maak een gegevenstabel die tabelgegevens presenteert met de juiste semantiek voor koppen en die leesbaar en navigeerbaar blijft op kleine schermen en met ondersteunende technologieën.

Maak zwevende knoppen of widgets (terug naar boven, scrollen naar beneden, chatstarters, enzovoort) die verschijnen en verdwijnen op basis van of de gebruiker heeft gescrold.

Maak scrollschaduwoverlays, vervagende kleurverlopen of richtingspijlen die alleen verschijnen als er daadwerkelijk meer content is om naartoe te scrollen in die richting.

Animeer een vaste kop of omslag op volledige pagina soepel tijdens het scrollen om deze dynamisch te verkleinen, schaduwen te geven en de indeling te transformeren over een vooraf gedefinieerde scrollafstand.

Maak vastgezette sectiekoppen of navigatiebalken die visueel veranderen als ze bovenaan zijn vastgezet, bijvoorbeeld door het kleurenschema te wijzigen of een schaduw te krijgen.

Toon en beheer iconen die kunnen worden ingesteld en geparametriseerd vanuit CSS, snel laden, scherp zijn bij elke resolutie en op de juiste manier worden getoond aan (of verborgen voor) ondersteunende technologieën.

Plaats dropdownmenu's, fly-outs of contextuele actievensters die aan een triggerknop zijn gekoppeld, zodat ze automatisch van as wisselen aan de randen van de viewport in plaats van te worden afgekapt.

Maak een kaartcomponent die de presentatie aanpast aan de eigen beschikbare ruimte en content.

Maak een menucomponent die een lijst met opties of acties toont, met ondersteuning voor geneste submenu's.

Het momenteel zichtbare gedeelte van een pagina markeren in een navigatiemenu

Maak een gestileerde voortgangsbalk die de voltooiing van een taak of proces aangeeft, zowel in bepaalde als onbepaalde statussen.

Maak een hovercard-component die een interactief gestructureerd voorbeeld toont van de pagina waarnaar een bepaald type link (bijvoorbeeld een gebruikersprofiel) navigeert als je de cursor erop plaatst.

Maak permanente introductie-overzichten met gekoppelde native overlays die open blijven tijdens gebruikersinteractie.

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

Maak een schakelcomponent voor de donkere modus waarmee gebruikers hun voorkeur voor het kleurenschema van het systeem voor de huidige site kunnen overschrijven.

Maak een modale of niet-modale dialoogvenstercomponent die toegankelijk is, de focus op de juiste manier beheert en kan worden gesloten op de manier die gebruikers verwachten op elk platform.

Maak een laadspinner die de status Bezig doorgeeft aan alle gebruikers, rekening houdt met voorkeuren voor minder beweging en efficiënt animeert.

Maak een zijmenu-component die, wanneer deze wordt geactiveerd via een menuknop, vanaf de zijkant naar binnen schuift over de bestaande paginacontent en weer naar buiten schuift wanneer deze wordt gesloten (door weg te swipen, buiten het menu te tikken of op Escape te drukken).

Maak een voortgangsringcomponent die de voltooiingsstatus van een taak of proces visueel weergeeft, met ondersteuning voor content in het midden en een merkconsistente stijl.

Maak hiërarchische navigatie op volledig scherm waarmee gebruikers kunnen inzoomen op geneste weergaven en terug kunnen swipen of navigeren om terug te keren, terwijl de browsergeschiedenis gesynchroniseerd blijft.

Stijl selectievakjes, waaronder aangepaste iconen, lay-out, kleuren, animaties voor aanvinken/uitvinken, met behoud van de native functionaliteit en toegankelijkheid.

Maak fade-in-, scale-up- of andere complexe onthullingseffecten voor elementen wanneer ze de scrollport (of viewport) binnenkomen en verlaten terwijl de gebruiker scrollt.

Een element naadloos overzetten tussen 2 doelelementposities. Bijvoorbeeld een geselecteerde tabbladonderstreping verplaatsen tussen het eerder geselecteerde tabblad en het geselecteerde tabblad.

Verberg/toon elementen soepel als ze worden toegevoegd aan/verwijderd uit de DOM of als hun weergavewaarden worden aan-/uitgezet.

Animeren van elementen zoals dialoogvensters, pop-overs en tooltips wanneer ze de bovenste laag binnenkomen of verlaten.

Ondersteuning voor slepen om een zwevend element op de pagina te verplaatsen.

Maak op scrollen gebaseerde effecten (zoals parallax) waarbij de voor- en achtergrondlagen met verschillende snelheden bewegen, waardoor een gevoel van diepte ontstaat terwijl de gebruiker scrollt.

Markeer visueel het momenteel vastgezette niet-interactieve item in carrousels, galerijen of swipe-ervaringen op volledige pagina's met scrolluitlijning. Bijvoorbeeld een kaart uitvouwen als deze is vastgezet of verborgen content onthullen.

Zorg dat de kritieke paginastatus is geladen en stabiel is voordat je een weergaveovergang tussen documenten start. Dit betekent dat essentiële CSS-stijlen worden geladen en toegepast, essentiële JavaScript wordt geladen en uitgevoerd en de HTML die zichtbaar is voor de eerste weergave van de pagina door de gebruiker, is geparseerd voordat de overgang wordt uitgevoerd.

Spreid de timing van animaties of overgangen over onderliggende elementen, zodat elk element begint na een berekende vertraging op basis van de positie in de lijst met onderliggende elementen.

Maak soepele, naadloze overgangen tussen paginanavigaties, zoals crossfades, aangepaste onthullingseffecten of content die van de ene pagina naar de andere overgaat.

Koppel een knop declaratief aan een element om aangepaste, toepassingsspecifieke acties te activeren met behulp van declaratieve knopopdrachten, aanroeperopdrachten, knopopdrachten, aangepaste opdrachten of declaratieve schakelacties.

De zichtbaarheid van een dialoogvenster of popover aan- of uitzetten via een knop zonder JavaScript te schrijven.

Animeren van wijzigingen in de visuele status om de richting van de navigatiestroom van een gebruiker weer te geven, zoals nieuwe content die van rechts naar binnen schuift als de gebruiker vooruitgaat of van links als de gebruiker terugkeert naar een vorig scherm.

Laat een groep vergelijkbare elementen tegelijk overgaan met dezelfde overgangslogica, zoals een product uit een winkelwagen verwijderen en alle andere producten naar hun nieuwe posities laten bewegen.

Willekeurige tekstbereiken op een pagina markeren, zoals zoekresultaten, spelfouten of cursors voor samenwerking.

Maak interactieve onthullingseffecten, zoals een spotlight die de muisaanwijzer van de gebruiker volgt om details in een afbeelding of UI-gedeelte te onthullen.

Toon een live voorbeeld van het effect van een knop als een gebruiker interesse toont (bijvoorbeeld door de cursor erop te plaatsen, de focus erop te leggen of de knop lang ingedrukt te houden), maar voordat de gebruiker op de knop klikt.

Maak een modaal dialoogvenster dat kan worden gesloten via een lichte afwijzing (bijvoorbeeld door buiten het dialoogvenster te klikken of te tikken)

Animeer de UI met CSS-overgangen, animaties, scrollgestuurde animaties en weergaveovergangen terwijl je de beweging in de samensteller behoudt en de voorkeuren voor minder beweging respecteert.

Verplaats een DOM-element of wijs een nieuw bovenliggend element toe zonder de belangrijke elementstatus te verliezen, zoals interactiviteitsstatussen (:focus/:active), de laadstatus van <iframe>, de animatie-/overgangsstatus, enzovoort

Houd een modaal dialoogvenster, een element op volledig scherm of een systeemeigen popover zichtbaar open en functioneel actief wanneer de onderliggende DOM-node wordt verplaatst of opnieuw wordt bovenliggend in de DOM.

Maak aangepaste, op fysica gebaseerde animatie- en overgangseffecten, zoals stuiteren en springen, die natuurlijker en aantrekkelijker aanvoelen dan traditionele easing-curves.

Maak een modaal dialoogvenster dat kan worden gesloten via standaard platformspecifieke gebruikersacties, zoals op de Esc-toets drukken op desktopplatforms of een gebaar voor Terug of Sluiten op mobiele platforms.

Voorkom dat de onderliggende pagina scrollt terwijl een modaal dialoogvenster is geopend.

Verbind blijvende elementen visueel tussen verschillende paginastatussen of navigaties in een app met één pagina (bijvoorbeeld door een productthumbnail uit te vouwen tot een hero-afbeelding die de hele pagina vult) door het formaat, de positie of andere stijleigenschappen soepel te veranderen.

Animate state changes inside a single component (a card, list, panel, or other subtree) while the rest of the page remains interactive, and other transitions run concurrently.

Realtime visuele feedback geven in gekoppelde UI-elementen terwijl een gebruiker door content scrollt die is uitgelijnd met uitlijnen, voordat het scrollgebaar is afgerond.

Synchroniseer navigatie-indicatoren, gekoppelde contentvensters en analytische tracking met het actief vastgezette item in een scrollbare container.

Animeer visuele eigenschappen van een doelelement, zoals een achtergrond vervagen, een achtergrondkleur verschuiven of scrollytelling-ervaringen maken, volledig aangestuurd door de scrollport-positie van een heel ander element.

Verberg content met patronen zoals accordeons, tabbladen en Lees meer-secties, terwijl je ervoor zorgt dat de verborgen tekst wordt getoond tijdens systeemeigen zoekopdrachten op de pagina, indexering door zoekmachines mogelijk maakt, deep links naar URL-fragmenten ondersteunt en ARIA-toegankelijkheid behoudt.

Maak een scrollbare lijst met elementen (bijvoorbeeld een carrousel met afbeeldingen of een chatgespreksthread) die kan worden getoond met een bepaald element dat in beeld wordt gescrold bij de eerste weergave.

Toon een tooltip of aanvullende informatie als een gebruiker de cursor of focus op een interactief element plaatst of het lang indrukt, zonder dat een klik vereist is.

Implementeer toegankelijke ruimtelijke navigatie met de pijltoetsen die correct werkt in verschillende indelingsmodi (raster, enzovoort)

Laat gebruikers acties uitvoeren op items in een lijst (verwijderen, archiveren, markeren als gelezen, enzovoort) met een horizontale swipe, zodat ze items snel kunnen verwerken zonder op een afzonderlijke bediening te tikken.

Laat gebruikers horizontaal swipen op een lijstitem of contentvenster om contextuele actieknoppen of een zijmenu te tonen zonder automatisch een actie te activeren.

Activeer visuele effecten, animaties of focuswijzigingen op een doelelement pas nadat een soepele programmatische scroll naar dat element is afgerond.

Sta gebruikers toe om vrij te pannen of te scrollen over tweedimensionale oppervlakken, zoals kaarten, ingezoomde afbeeldingen, oneindige canvassen of grote gegevensrasters, in beide richtingen (diagonaal of van richting veranderend tijdens het gebaar) zonder dat het gebaar wordt vergrendeld op één horizontale of verticale as.

Maak een aangepaste selectiecomponent met een dropdownmenu met animatie. Het menu vervaagt of schuift bijvoorbeeld in beeld, of de opties worden geanimeerd bij selectie.

Zorg dat selectievakjes, keuzerondjes, schuifregelaars voor bereik en voortgangsbalken overeenkomen met het kleurenpalet van je site zonder ze te vervangen door aangepaste componenten.

Stijl een native bereikschuifregelaar met aangepaste track-, duim-, vul- en focusstatussen, terwijl de native functionaliteit en toegankelijkheid behouden blijven.

Maak aangepaste selectie-elementen waarvan de knop, kiezer, pijl en het vinkje naadloos aansluiten bij de typografie, kleuren, afstand en randen van je merk of ontwerpsysteem.

Maak een betalingsformulier dat kaartgegevens verzamelt met de juiste waarden voor automatisch aanvullen en ondersteuning voor automatisch invullen.

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

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

Maak een toegankelijke schakelaar met het systeemeigen HTML-schakelaarkenmerk en val terug op een gestileerd selectievakje als dit niet wordt ondersteund.

Maak een adresformulier met de juiste kenmerken voor automatisch aanvullen en ondersteuning voor automatisch invullen.

Maak aangepaste selectiekiezers waarvan de opties op unieke of interessante manieren zijn gepositioneerd, in plaats van de traditionele gestapelde lijst met opties.

Zorg dat formuliervelden groter en kleiner kunnen worden om de gebruikersinvoer te laten passen, bijvoorbeeld als de gebruiker typt of een andere optie selecteert. Pas maximale en minimale groottelimieten toe om dynamische en responsieve formuliervelden te maken die overeenkomen met het paginaontwerp.

Best practices voor het maken van toegankelijke, beveiligde en gebruiksvriendelijke webformulieren. Gebruik deze gids als je formulieren, invoer en indieningsprocessen maakt of aanpast.

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

Implementeer Enter-to-submit in tekstgebieden en invoer op één regel (chat, zoeken, inline naam wijzigen) op een veilige manier voor gebruikers van IME (Input Method Editor) om te voorkomen dat onvolledige tekst wordt ingediend.

Geef een foutmelding voor vereiste formuliervelden die zijn overgeslagen of leeg zijn gelaten, maar alleen na gebruikersinteractie. Zo voorkom je preventieve fouten en zorg je dat feedback op tijd en contextueel relevant is voor de gebruikersstroom.

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

Valideer dat er een niet-standaard optie is gekozen in een selectiemenu nadat de gebruiker interactie heeft gehad met het bedieningselement.

Laat telefoonnummers van gebruikers en eenmalige toegangscodes die via sms worden geleverd, verifiëren met automatische code-extractie en toegankelijke formulierinvoer.

Toon feedback over de validatie van formuliervelden (bijvoorbeeld vereisten voor wachtwoordcomplexiteit of e-mailindeling) pas nadat de gebruiker de eerste interactie heeft afgerond. Zo voorkom je voortijdige fouten bij het laden van de pagina of terwijl de gebruiker typt.

Maak aangepaste elementen standaard toegankelijk door rollen en de ARIA-status in te stellen via de ElementInternals ARIA-mixin, de focus te beheren met delegatesFocus en ARIA-relaties binnen één shadow root te houden.

Definieer, registreer en beheer de levenscyclus van autonome aangepaste elementen, waaronder constructorregels, levenscyclus-callbacks, upgradetiming, kenmerk-/eigenschapsreflectie en naamgevingsconventies.

Zorg dat een aangepast bedieningselement native deelneemt aan formulieren met formAssociated en ElementInternals, de eigen waarde indient, integreert met beperkingsvalidatie en reageert op resetten, uitzetten en statusherstel.

Actiegerichte richtlijnen voor moderne HTML-architectuur, semantiek, native interactieve API's (dialoogvenster, popover, details), focusbeheer en prioriteitstelling van bronnen. Gebruik deze handleiding als je webdocumenten structureert, native overlays implementeert of de laadvolgorde van bronnen optimaliseert.

Render een aangepast element op de server en hydrateer het op de juiste plek zonder opnieuw te renderen of een flits van niet-opgemaakte content.

Kapsel de DOM en stijlen van een component in met Shadow DOM, bouw de boomstructuur efficiënt op met HTML-templates en projecteer consumentencontent met slots.

Stijl over de schaduwgrens met :host-selectors, overgenomen en aangepaste eigenschappen voor thema's, ::slotted en ::part, en trapsgewijze lagen en containerquery's in componenten.

Oriëntatie en overkoepelende principes voor het schrijven en gebruiken van webcomponenten, waaronder aangepaste elementen, Shadow DOM, templates en slots, Declarative Shadow DOM, styling over de schaduwgrens, aan formulieren gekoppelde aangepaste elementen en toegankelijkheidsvereisten. Gebruik deze handleiding als je herbruikbare UI-componenten, ontwerpsystemen of door de server gerenderde aangepaste elementen maakt.

Animeer interactieve componenten (zoals accordeons, menu's en uitvouwbare kaarten) soepel naar en van hun natuurlijke afmetingen.

Bereken de grootte van een element op basis van de intrinsieke grootte, terwijl je ervoor zorgt dat het binnen de gegeven ontwerpbeperkingen past.

Maak een component waarvan de stijl verandert op basis van de status van een van de onderliggende elementen. Bijvoorbeeld een component die wordt weergegeven in de lichte of donkere modus, afhankelijk van of een themaschakelaar is aangevinkt (of niet).

Pas bepaalde CSS-regels of -declaraties alleen voorwaardelijk toe als een bepaalde at-regel wordt ondersteund door de browser.

Maak een component die de indeling wijzigt op basis van of deze specifieke onderliggende elementen bevat (of niet). Als de component bijvoorbeeld een afbeelding bevat, gebruik je een lay-out met meerdere kolommen. Anders gebruik je standaard een lay-out met 1 kolom.

Moderne CSS-indelingen zoals flexbox, raster, subraster, containervragen, ankerpositionering en intrinsieke grootte. Gebruik deze vaardigheid bij het ontwerpen van responsieve UI-componenten of paginalay-outs.

Actiegerichte richtlijnen voor moderne CSS-architectuur, waaronder de cascade, kiezers, scoping, nesting en designtokens. Gebruik deze gids als je stijlen maakt of ontwerpsystemen beheert.

Definieer ontwerptokens van een hogere orde, zoals dichtheidsmodi (compact, comfortabel, ruim) of thema's, en laat onderliggende componenten rechtstreeks en op een voor de component geschikte manier reageren op wijzigingen.

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

Maak animaties voor afzonderlijke CSS-transformatie-eigenschappen (bijvoorbeeld vertalen, draaien, schalen) of overschrijf deze onafhankelijk van andere transformatie-eigenschappen voor één element.

Pas de zichtbare afkapgrens van een element aan zodat deze wordt uitgelijnd met de contentrand, de opvullingsrand of de rand van de rand, of een opgegeven afstand van een van deze, zodat je meer controle hebt over hoe content wordt afgekapt.

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

Maak een UI die zich aanpast aan het formaat van de container en de viewport, waaronder containerquery's, dynamische viewport-eenheden, beeldverhoudingen en responsieve typografie.

Target elementen op basis van de doorsnede of samenvoeging van kiezers en voorwaardelijke @-regels, terwijl je herhaling minimaliseert.

Maak componenten die de visuele logica aanpassen op basis van de semantische context met behulp van CSS-containerstijlquery's.

Maak een component waarvan de stijlen voorwaardelijk afhankelijk kunnen zijn van de eigen breedte of hoogte, in plaats van de breedte of hoogte van de viewport. Bijvoorbeeld een kaartcomponent waarvan de indeling kan veranderen, afhankelijk van de grootte, of een call-to-action-knop die voorwaardelijk helptekst kan tonen op basis van de breedte.

Stijl bovenliggende elementen van een formulierveld (bijvoorbeeld labels of veldsets) als het veld ongeldig is.

Maak dynamische visuele spectrums of lay-outindelingen die zich automatisch aanpassen aan het aantal elementen in een groep.

Bereken de verstreken of resterende tijd tussen datums en tijden, balanceer duureenheden en maak door mensen leesbare gelokaliseerde duur met Temporal.Duration en Intl.DurationFormat.

Modelleer locatieonafhankelijke kalenderdatums, kloktijden, gedeeltelijke datums (terugkerende verjaardagen, vervaldatums van creditcards) en terugkerende maandelijkse intervallen zonder tijdzoneverschuiving met behulp van Temporal Plain-typen.

Plan toekomstige vergaderingen of afspraken door ze expliciet te koppelen aan een geografische IANA-tijdzone. Zo blijven de afspraaktijden nauwkeurig, ongeacht de overgang naar de zomertijd, overgeslagen of herhaalde uren tijdens klokwijzigingen.

Parseer, sorteer en meet intervallen tussen ISO 8601-tijdstempels van minder dan een milliseconde of nanoseconde zonder botsingen bij het afkappen van datums met Temporal.Instant.

Toon en bereken datums in niet-gregoriaanse kalendersystemen (bijvoorbeeld islamitisch, Hebreeuws of Chinees) nauwkeurig voor internationale gebruikers.

C/C++ compileren naar WebAssembly met Emscripten

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

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

Laad of initialiseer asynchrone afhankelijkheden voorwaardelijk (zoals polyfills importeren voor ontbrekende webfuncties) zonder dat je complexe indelingen nodig hebt voor alle scriptafhankelijkheden van een pagina.

Debounce en batch meerdere analyse-, telemetrie- en Core Web Vitals-gebeurtenissen samen in één baken om netwerkconflicten te minimaliseren en de serverbelasting te verminderen, terwijl je nog steeds realtime updates levert.

Verkort de rendertijden op webpagina's met veel content (bijvoorbeeld pagina's met lange feeds, veel artikelen of complexe dashboards) door de weergave uit te stellen voor content die niet onmiddellijk zichtbaar is voor de gebruiker.

Stel dure bewerkingen zoals DOM-updates, gegevens ophalen, analysetracking of herberekening van de indeling uit tot nadat het scrollen is voltooid om vloeiend scrollen te behouden.

Lever geoptimaliseerde decoratieve afbeeldingen (zoals achtergronden, UI-iconen of complexe maskers) door tegelijkertijd bestandsindelingen van de volgende generatie (zoals AVIF of WebP) en meerdere pixeldichtheden (zoals 1x en 2x) te leveren, zodat de browser dynamisch kan onderhandelen over de beste combinatie van bestandsgrootte en visuele kwaliteit voor de mogelijkheden van het apparaat van de gebruiker.

Geef gegevens die op de achtergrond worden opgehaald met de Fetch API een lagere prioriteit om netwerkconflicten met door de gebruiker gestarte verzoeken te voorkomen.

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

Bespaar systeembronnen en batterijduur door de uitvoering van JavaScript op de achtergrond (zoals <canvas>-animaties, WebGL-rendering of polling van WebSocket-gegevens met hoge frequentie) te onderbreken als de component niet op het scherm staat en deze net op tijd te hervatten als de component weer in beeld wordt gescrold.

Zorg voor snellere overgangen terug naar eerder bezochte weergaven in een app met één pagina (Single-Page Application, SPA) door de structurele DOM-status te behouden in plaats van deze bij elke navigatie te vernietigen en opnieuw op te bouwen.

A/B-tests, multivariate tests of andere experimenten leveren en weergeven met JavaScript aan de clientzijde om HTML, CSS en JavaScript te wijzigen of in te voegen zonder dat de oorspronkelijke content eerst wordt getoond voordat de experimentcontent wordt getoond.

Identificeer traag JavaScript en andere oorzaken van een slechte responsiviteit van Interaction to Next Paint (INP).

De scripts identificeren die het meest verantwoordelijk zijn voor lange animatieframes

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

Stel het downloaden van video- en audio-items buiten het scherm, waaronder video-posterafbeeldingen en vooraf geladen mediagegevens, uit totdat de mediaspeler de viewport nadert om bandbreedte te besparen en netwerkconflicten te verminderen tijdens het laden van de eerste pagina.

Meet de tijd die gebruikersinteracties en navigatie aan de clientzijde nodig hebben om nieuwe contentvolle updates op het scherm weer te geven.

Optimaliseer de laadprioriteit van kandidaatafbeeldingen voor Largest Contentful Paint (LCP) en geef niet-kritieke afbeeldingen een lagere prioriteit om vertragingen bij het laden van kritieke bronnen te verminderen.

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

Optimaliseer de laadprioriteit van scripts door kritieke asynchrone scripts te stimuleren en niet-essentiële scripts of scripts aan het einde van de hoofdtekst een lagere prioriteit te geven om de volgorde te verbeteren en vertragingen te verminderen.

Maak interacties sneller en responsiever (waardoor de INP-scores (Interaction to Next Paint) dalen) door herberekeningen van de indeling te vermijden in complexe indelingen, zoals dashboards met veel gegevens of rasters in spreadsheetstijl.

Een pagina declaratief updaten met content die later naar hetzelfde HTML-document of via imperatieve JavaScript-API's wordt gestreamd.

Praktische richtlijnen voor de optimalisatie van moderne web-apps. Gebruik deze gids om de prestaties te controleren, laadstatistieken te optimaliseren, langzame interacties op te lossen en Core Web Vitals (LCP, INP, CLS) te optimaliseren.

Houd betrouwbaar analyses, Core Web Vitals, fouten en telemetriegegevens bij tijdens het hele paginabezoek van de gebruiker en stel het versturen van de gegevens uit totdat de gebruiker de pagina verlaat.

Gebruik voor resolutie geoptimaliseerde afbeeldingen in CSS-pseudoelementen (zoals ::before en ::after) om het aantal DOM-nodes te verminderen.

Plan taken met verschillende prioriteiten om te zorgen dat kritiek werk eerst wordt uitgevoerd en achtergrondwerk wordt uitgesteld.

Praktische programmeerrichtlijnen voor het bouwen van toegankelijke web-apps, waaronder semantische HTML, focusbeheer, formulieren, media en testen. Gebruik deze vaardigheid bij het controleren of implementeren van toegankelijkheidsfuncties, toetsenbordnavigatie of ARIA.

Synchroniseer programmatische toegankelijkheidsstatussen (zoals aria-invalid) met de visuele status :user-invalid om te zorgen dat gebruikers van schermlezers alleen feedback over fouten krijgen na interactie, net als bij de visuele functionaliteit.

Gebruik door CSS gegenereerde content (::before/::after) op manieren die toegankelijk blijven, waaronder alt-attributen voor decoratieve content.

Respecteer de voorkeur voor tekstschaling van het besturingssysteem voor een pagina, zodat lettergrootten, indeling en op rem gebaseerde metingen de toegankelijkheidsinstellingen van de gebruiker volgen.

Vergelijk en valideer web-oorsprongen en sites veilig in berichten en URL's tussen documenten zonder foutgevoelige tekenreeksparsering.

Stel gedeelde geheimen vast met behulp van inkapseling van openbare sleutels of sleutelovereenkomsten, waaronder hybride en post-kwantumbescherming, en versleutel gevoelige gegevens in de browser met geverifieerde versleuteling.

Toegang tot bronnen in het lokale netwerk of de loopback-interface van een gebruiker vanuit een openbare web-app.

Een terugkerende gebruiker verifiëren met een toegangssleutel voor primair inloggen.

Registreer op de achtergrond een toegangssleutel voor een bestaande gebruiker nadat deze is ingelogd met een wachtwoord.

Gebruikers de toegangssleutels laten bekijken en beheren die zijn geregistreerd voor hun account.

De identiteit van een ingelogde gebruiker verifiëren met de bestaande toegangssleutels voordat een gevoelige actie wordt uitgevoerd.

Registreer een toegangssleutel voor een bestaand gebruikersaccount.

Uitgebreide oriëntatie en overkoepelende principes voor de implementatie van WebAuthn en toegangssleutels in web-apps. Gebruik deze gids bij de registratie, verificatie, het beheer of de herverificatie van toegangssleutels.

Voorkom DOM-gebaseerde XSS-aanvallen door een beleid voor vertrouwde typen te definiëren om niet-vertrouwde HTML op te schonen, het beleid te gebruiken bij het schrijven naar DOM-sinks zoals innerHTML en vertrouwde typen af te dwingen via Content Security Policy.

Laat terugkerende gebruikers zich verifiëren met hun opgeslagen toegangssleutels of wachtwoorden voordat ze naar een inlogpagina gaan of hun workflow wordt onderbroken.

Beperk een pagina of worker tot communicatie met alleen een expliciete toelatingslijst van netwerkeindpunten om ongeautoriseerde verzoeken van derden en gegevensexfiltratie aan de clientzijde te voorkomen.

Parseer en toon niet-vertrouwde HTML-content van gebruikersinvoer op een veilige manier door onveilige elementen en kenmerken te verwijderen.

Controleer de cryptografische integriteit van externe scripts, stylesheets, lettertypen en afbeeldingen die worden geladen vanuit bronnen van derden en bepaal of die verzoeken inloggegevens of verwijzende URL's sturen.

Onderteken en verifieer berichten, tokens of artefacten in de browser met klassieke of quantumresistente (post-quantum) asymmetrische sleutels om de gegevensintegriteit en -authenticiteit te waarborgen.

Verifieer dat een gebruiker de eigenaar is van een e-mailadres tijdens het maken, inloggen of herstellen van een account zonder een eenmalige toegangscode of magic link te sturen.

Preventieve beveiligingsrichtlijnen voor webontwikkelaars (XSS, CSP, cookies, cross-origin isolatie). Gebruik deze vaardigheid om het proces van controle, testen en implementatie van beveiligingsbeleid veilig te begeleiden.

Actiegerichte richtlijnen voor webontwikkelaars om ontworpen voor privacy, minimale gegevensverwerking, audits door derden en beveiligde gegevensverwerking te implementeren. Gebruik deze vaardigheid bij het ontwerpen van apps, het integreren van services van derden, het verwerken van gebruikersgegevens of het instellen van beveiligingsheaders.

Zet een geïnstalleerde web-app over naar een nieuwe oorsprong, terwijl de gebruikersconfiguratie en snelkoppelingen op OS-niveau behouden blijven.

De taal van content van gebruikers of bestaande sitecontent detecteren.

Voer on-device afleiding van natuurlijke taal uit in de browser met de Prompt API, met streaming uitvoer, gestructureerde JSON-reacties en sessiebeheer met meerdere beurten.

Vat tekstcontent samen met de Summarizer API op het apparaat.

Vertaal tekst tussen talen met de Translator API op het apparaat.

Maak functionaliteit aan de clientzijde beschikbaar als tools voor AI-agents door standaard HTML-formulieren te annoteren met WebMCP-kenmerken.

Registreer programmatisch JavaScript-functies aan de clientzijde als tools voor AI-agents met de WebMCP Imperative API.

Gebruik deze handleiding om WebMCP (Web Model Context Protocol) te implementeren in browser-apps, zodat functionaliteit aan de clientzijde wordt weergegeven als tools voor AI-agents via declaratieve of imperatieve API's.