Wat is er nieuw in de web-UI?

Bramus
Una Kravets

Gepubliceerd: 1 juli 2026

Tijdens Google I/O 2026 presenteerden we een stortvloed aan updates voor het web-UI-platform. Van het respecteren van gebruikersvoorkeuren tot het implementeren van natuurlijke interacties, het begeleiden van navigatie, het verminderen van rommel en het aanpassen aan verschillende schermformaten: het moderne web biedt ontwikkelaars ongelooflijk krachtige tools om hoogwaardige, intuïtieve gebruikerservaringen te creëren.

Hier volgt een uitgebreid overzicht van alle functies die in de sessie "Wat is er nieuw in web-UI" aan bod kwamen, gestructureerd volgens onze kernprincipes voor UX.

Deel 1: Gebruikersvoorkeuren respecteren

Personalisatie is essentieel voor de gebruiksvriendelijkheid van websites. Moderne web-API's maken het eenvoudiger om automatisch in te spelen op de systeemkeuzes van de gebruiker. Hoewel deze concepten vanzelfsprekend lijken en we er al jaren over praten, zijn er een aantal nieuwe API's en patronen die het bouwen van deze dynamische personalisatie vereenvoudigen.

1. contrast-color()

De CSS-functie ` contrast-color() neemt een kleur als invoer en retourneert automatisch black of white , afhankelijk van welke kleur het hoogste contrast heeft ten opzichte van de invoerkleur, gebaseerd op het WCAG AA-algoritme voor minimaal contrast. Dit zorgt voor leesbaarheid zonder dat handmatig tekst-achtergrondkleurparen hoeven te worden bijgehouden.

Browser Support

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

Source

Leer meer over contrast-color()

2. light-dark()

Met de CSS-functie ` light-dark() kun je binnen één declaratie twee verschillende waarden (kleuren of afbeeldingen) voor een eigenschap opgeven: één voor de lichte modus en één voor de donkere modus. De browser selecteert automatisch de juiste contrastkleur op basis van het actieve color-scheme (dat moet zijn ingesteld op light , dark of light dark op het :root of een ouder element).

Browser Support

  • Chrome: 123.
  • Rand: 123.
  • Firefox: 120.
  • Safari: 17,5.

Source

Nieuw bij light-dark() is dat het niet langer beperkt is tot alleen kleurwaarden. Vanaf Chrome 150 accepteert het nu ook twee afbeeldingswaarden.

Browser Support

  • Chrome: achter een vlag.
  • Rand: achter een vlag.
  • Firefox: 150.
  • Safari: niet ondersteund.

3. Aangepaste CSS-functies ( @function )

Met de @function at-regel kun je aangepaste, herbruikbare functies rechtstreeks in native CSS definiëren. Deze regel kan lokaal gedefinieerde aangepaste eigenschappen als argumenten accepteren, berekeningen uitvoeren en waarden retourneren met behulp van de result , waardoor de behoefte aan preprocessors afneemt.

Browser Support

  • Chrome: 139.
  • Rand: 139.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

In combinatie met query's voor containerstijlen en de CSS-functie if() ` kunt u een aangepaste --light-dark() -functie maken die werkt met elk type waarde, zoals in deze demo wordt getoond:

4. Query's in containerstijl

Stijlqueries , onderdeel van CSS Container Queries, stellen ontwikkelaars in staat stijlen toe te passen op afstammende elementen op basis van de berekende aangepaste eigenschapswaarden van een bovenliggende container. Dit maakt dynamische componenten mogelijk zonder dat expliciete groottebeperking nodig is.

Browser Support

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

In deze demo worden stijlquery's gebruikt om de kleuren in te stellen op basis van een aangepaste eigenschap --theme . 

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

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

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

Leer meer over stijlquery's

5. CSS if() -functie

De CSS-functie if() voegt inline voorwaardelijke logica rechtstreeks toe aan CSS-eigenschapswaarden. Het evalueert een reeks door puntkomma's gescheiden voorwaarden (stijlquery's, mediaquery's of featurequery's) en stelt je in staat om verschillende waarden toe te wijzen aan de eerste voorwaarde die waar is, met een optionele else terugvaloptie.

Browser Support

  • Chrome: 137.
  • Rand: 137.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

In de vorige demo werd de if() functie gebruikt om een ​​thematische contrastkleur te creëren op basis van de uitvoer van de contrast-color() functie.

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

6. @supports at-rule()

De CSS-functie at-rule() voor gebruik met @supports stelt ontwikkelaars in staat om te detecteren of een browser een specifieke `at-rule` herkent, zoals @starting-style of @view-transition .

Om bijvoorbeeld te controleren of @function wordt ondersteund, kunt u het als volgt gebruiken:

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

Met at-rule() ` kunt u alleen controleren of de `at-rule` zelf wordt ondersteund en kunt u niet testen op specifieke descriptors, preludes of volledige `at-rule`-blokken. Er zijn alternatieve methoden beschikbaar om zaken als verankerde query's of stijlquery's te detecteren.

Leer meer over @supports at-rule

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

De HTML-metatag text-scale zorgt ervoor dat de initiële lettergrootte van het <html> -hoofdelement van de pagina wordt aangepast aan de tekstschaalinstellingen van het besturingssysteem en de browser. Dit is met name belangrijk voor mobiele platforms.

Browser Support

  • Chrome: 146.
  • Rand: 146.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Wanneer deze instelling wordt toegepast, wordt de lettergrootte van het html element nu bepaald door het besturingssysteem, waardoor het niet nodig is om een font-size in te stellen. Als u vervolgens lengtes met relatieve eenheden zoals em en rem gebruikt, zijn de berekende pixelwaarden gebaseerd op die basislettergrootte.

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

Via het tabblad 'Rendering' in de ontwikkelaarstools kunt u de gewenste lettergrootte emuleren. Gebruik het keuzemenu om de waarde te wijzigen.

Leer meer over <meta name=text-scale>

Deel 2: Implementeer natuurlijke interacties

Intuïtieve, fysieke bewegingen en natuurlijke gebaren zijn essentieel om webervaringen net zo tastbaar te laten aanvoelen als native applicaties. En moderne CSS maakt dit een stuk eenvoudiger.

8. linear() vereenvoudigingsfunctie

Met de easingfunctie linear() kunt u complexe, aangepaste overgangscurves creëren (zoals bounces, springs of elastische overshoots) door lineair te interpoleren tussen een onbeperkt aantal opgegeven voortgangspunten.

Browser Support

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

Source

In de volgende demo wordt linear() gebruikt om het dialoogvenster een natuurlijke overgang te geven wanneer het wordt weergegeven of verborgen.

Leer meer over linear()

9. @starting-style

De CSS-at-regel @starting-style definieert de beginwaarden voor eigenschappen van een element waarnaar je wilt overgaan wanneer het element voor het eerst in de DOM wordt weergegeven of wanneer display ervan verandert van none naar `visible`, om vloeiende overgangen bij het verschijnen mogelijk te maken.

Browser Support

  • Chrome: 117.
  • Rand: 117.
  • Firefox: 129.
  • Safari: 17,5.

Source

In de vorige demo werd dit gebruikt om het <dialog> te animeren zodra het voor het eerst zichtbaar werd.

10. transition-behavior: allow-discrete

De eigenschap transition-behavior (vaak gebruikt als allow-discrete in de transition afkorting) maakt het mogelijk om discrete eigenschappen zoals display of overlay te laten overgaan, zodat elementen zichtbaar blijven tijdens exit-animaties voordat ze worden verborgen.

Browser Support

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

Source

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

De CSS-functies sibling-index() en sibling-count() retourneren respectievelijk gehele getallen die de 1-gebaseerde positie van een element ten opzichte van zijn sibling-elementen en het totale aantal sibling-elementen weergeven. Ze zijn perfect voor het dynamisch berekenen van gespreide animatievertragingen in CSS zonder JavaScript.

Browser Support

  • Chrome: 138.
  • Rand: 138.
  • Firefox: niet ondersteund.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Rand: 138.
  • Firefox: niet ondersteund.
  • Safari: 26.2.

Source

In deze demo worden de inhoud van het dialoogvenster gespreid weergegeven door gebruik te maken van sibling-index() in de animation-delay

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

12. Dialoogvenster sluiten ( closedby attribuut)

Het closedby attribuut op het <dialog> `-element (met de waarde any ) maakt declaratief "licht sluiten"-gedrag mogelijk, waarbij modale dialoogvensters automatisch worden gesloten wanneer er buiten het dialoogvenster wordt geklikt of wanneer op ESC wordt gedrukt, zonder dat hiervoor aangepaste JavaScript nodig is.

Browser Support

  • Chrome: 134.
  • Rand: 134.
  • Firefox: 141.
  • Safari: niet ondersteund.

Source

Je kunt het uitproberen in de vorige demo.

13. corner-shape

De experimentele eigenschap corner-shape stelt ontwikkelaars in staat om afgeronde hoeken (via border-radius ) aan te passen om aangepaste visuele vormen te creëren, zoals bevel , scoop , notch of squircle (via superellipse() `). Randen, schaduwen en focuscontouren passen zich automatisch aan de vorm aan.

Browser Support

  • Chrome: 139.
  • Rand: 139.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Deel 3: Begeleide navigatie aanbieden

Het begeleiden van de gebruikerservaring helpt de context te behouden en de workflow van de applicatie te begrijpen, waardoor verwarrende herlaadmomenten worden voorkomen. Dit kan op verschillende manieren, onder andere met behulp van weergaveovergangen, die onlangs een aantal updates hebben gekregen.

14. Overgangen tussen weergaven van hetzelfde document

Same-document transitions maken deel uit van de View Transition API en bieden een mechanisme voor het animeren tussen DOM-staten in single-page applicaties (SPA's) door momentopnamen vast te leggen en deze met behulp van CSS te laten overgaan.

Browser Support

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

Source

Leer meer over overgangen tussen weergaven van hetzelfde document.

15. Overgangen tussen documentweergaven

Breidt de View Transition API uit naar applicaties met meerdere pagina's (MPA's), waardoor u naadloze, geanimeerde overgangen kunt creëren bij het navigeren tussen verschillende documenten door elementen met dezelfde view-transition-name op verschillende pagina's te matchen.

Browser Support

  • Chrome: 126.
  • Rand: 126.
  • Firefox: niet ondersteund.
  • Safari: 18.2.

Source

Leer meer over overgangen tussen verschillende documentweergaven.

16. Weergaveovergangen op elementniveau

Element-scoped view transitions, geïntroduceerd in Chrome 147, stellen je in staat om een ​​view transition alleen op een specifiek DOM-subgebied uit te voeren (met behulp van element.startViewTransition() ), terwijl de rest van de pagina actief en interactief blijft.

Browser Support

  • Chrome: 147.
  • Rand: 147.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Bij het starten van een element-scoped view transition wordt deze geïsoleerd uitgevoerd: er wordt alleen in die subboom gezocht naar elementen met een view-transition-name en de ::view-transition pseudo wordt in de scope root zelf geïnjecteerd. Deze isolatie is mogelijk dankzij de automatische toepassing van view-transition-scope: all .

Dit maakt het mogelijk om meerdere weergaveovergangen tegelijkertijd uit te voeren, evenals het nesten van weergaveovergangen: terwijl de items in deze lijsten worden herschikt, kunt u ook de lijsten zelf verwisselen.

Bovendien worden de pseudo-groepen automatisch genest en wordt de overloop van de omringende pseudo-groepskinderen indien nodig afgeknipt.

Scoped view transitions zijn perfect voor micro-interacties en stateful morphing binnen een pagina, waardoor de gebruiker meer context krijgt bij een visuele verandering. Dit is een geweldige manier om de gebruiksvriendelijkheid van je applicatie te verbeteren en tegelijkertijd de uitstraling te versterken. Deze kleine details maken een groot verschil!

Leer meer over weergaveovergangen op elementniveau.

17. Tweefasige weergaveovergangen

Dit is een experimentele functie die direct een overgang tussen documentweergaven start zonder te wachten tot de nieuwe DOM gereed is. Eerst wordt overgeschakeld naar een tussenliggend skeletscherm of laadscherm van de gebruikersinterface, voordat de overgang tussen documentweergaven wordt voortgezet.

Leer meer over tweefasenweergaveovergangen.

18. Scrollgestuurde animaties

Scrollgestuurde animaties koppelen de voortgang van een CSS-animatie direct aan de scrollpositie van een scrollcontainer, waardoor ontwikkelaars scrollgebaseerde interfaces kunnen bouwen, zoals efficiënte parallax-effecten en scrollindicatoren.

Browser Support

  • Chrome: 115.
  • Rand: 115.
  • Firefox: achter een vlag.
  • Safari: 26.

Source

19. Door scrollen geactiveerde animaties

Nieuw in Chrome zijn scroll- geactiveerde animaties. Scroll-geactiveerde animaties activeren een standaard, op tijd gebaseerde CSS-animatie wanneer een scrollgrens wordt overschreden (waarbij timeline-trigger wordt gebruikt om de trigger te definiëren en animation-trigger om deze af te spelen). Dit biedt een declaratief alternatief voor IntersectionObserver .

Browser Support

  • Chrome: 146.
  • Rand: 146.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Het onderliggende mechanisme voor scroll-geactiveerde animaties zijn tijdlijntriggers die actief of inactief kunnen zijn.

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

Schakel de visualisatie in de volgende demo in om te zien wat er gebeurt: het eerste bereik is het activeringsbereik en bepaalt wanneer de trigger actief wordt. Het tweede bereik is het actieve bereik, dat bepaalt hoe lang de trigger actief moet blijven.

Leer meer over animaties die worden geactiveerd door scrollen.

20. scroll-target-group: auto

Je kunt nu een native CSS-scroll-spy bouwen die navigatielinks automatisch markeert op basis van de scrollpositie van de gebruiker. Door scroll-target-group: auto in te stellen op een navigatielijst, stelt de browser automatisch aria-current="true" in en past de pseudo-klasse :target-current toe op de actieve link. :target-current kan vervolgens worden gebruikt om de actieve links verder te stylen.

Browser Support

  • Chrome: 140.
  • Rand: 140.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Browser Support

  • Chrome: 135.
  • Rand: 135.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Leer meer over de CSS-scroll-spy met scroll-target-group

21. scrollIntoView() containeroptie

De methode scrollIntoView() krijgt een optie container . Door target.scrollIntoView({container: 'nearest'}) in te stellen, wordt het scrollen beperkt tot de dichtstbijzijnde scrollbalk in plaats van dat het scrollen helemaal naar boven gaat. Dit voorkomt desoriënterend scrollen op paginaniveau.

Browser Support

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

Source

Gebruik het selectievakje in deze demo om de optie in en uit te schakelen:

Leer meer over container: "nearest"

22. Programmatisch scrollen dat op een bepaalde tijd kan worden uitgevoerd

Alle programmatische scrollmethoden (zoals scroll() , scrollTo() en scrollIntoView() ) retourneren nu een Promise. Hierdoor kunnen ontwikkelaars await tot de vloeiende scrollanimaties zijn voltooid voordat ze de daaropvolgende logica uitvoeren (zoals het toevoegen van een highlight-effect).

Browser Support

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

Source

In de volgende demo kunt u het in actie zien: het element wordt eerst in beeld gescrolld, waarna er een highlight-effect aan wordt toegevoegd.

Deel 4: Maximaliseer de inhoud, verminder de ruis.

Een van de meest frustrerende webervaringen is het verwachten van content, maar vervolgens geblokkeerd worden door opdringerige pop-ups of banners. Geef prioriteit aan het contentgebied door visuele rommel en applicatieranden te verwijderen en secundaire acties achter gelaagde gebruikersinterfaces te plaatsen.

23. Scroll-state queries ( scrolled )

scroll-state queries maken deel uit van CSS Container Queries en stellen je in staat om afstammelingen te stylen op basis van de scrollstatus van een container (met container-type: scroll-state ). De scrolled query (bijvoorbeeld scroll-state(scrolled: bottom) ) detecteert de richting van de meest recente relatieve scrollbeweging, waardoor patronen zoals de "Hidey Bar" mogelijk worden.

Browser Support

  • Chrome: 133.
  • Rand: 133.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Leer meer over het "Hidey Bar"-patroon.

24. Query's van verankerde containers

CSS Anchor Positioning bevat query's voor verankerde containers , waarmee je kunt controleren welke fallback-positie (bijvoorbeeld fallback: bottom of fallback: flip-block ) momenteel actief is op een element met een ankerpositie. Dit maakt dynamische updates van de styling van een element met een ankerpositie mogelijk (zoals tooltip-pijlen).

Browser Support

  • Chrome: 143.
  • Rand: 143.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

In de volgende demo herpositioneert een popover met anker zich op basis van zijn fallback-positie en positie in de viewport met behulp van query's voor verankerde containers. Wanneer de tooltip boven het aanroepende element wordt geopend, beweegt deze van onder naar boven, vanaf de bron. Wanneer deze zich onder het aanroepende element bevindt, beweegt deze van boven naar beneden.

25. CSS border-shape

Met de eigenschap border-shape kunt u niet-rechthoekige randen definiëren met dezelfde vormsyntaxis als clip-path . In tegenstelling tot `clipping` zorgt border-shape ervoor dat randen, contouren en schaduwen visueel uitgelijnd blijven met de aangepaste vorm. Het biedt ook meer mogelijkheden dan corner-shape , omdat border-shape veel flexibeler is.

Browser Support

  • Chrome: 147.
  • Rand: 147.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

26. CSS shape() -functie

Met de CSS-functie ` shape() ` kun je complexe geometrische paden direct in CSS definiëren. Je kunt deze functie gebruiken met eigenschappen zoals clip-path , border-shape of shape-outside om organische, niet-rechthoekige vormen te creëren waartegen content kan zweven.

Browser Support

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

Source

27. Sticky positionering per as

Dankzij een recente wijziging in de overflow-specificatie, waardoor containers slechts voor één as als scroller kunnen fungeren, kan sticky positioning nu twee verschillende scrollcontainers (één voor elke as) tegelijk volgen. Hierdoor werken een sticky eerste kolom en bovenste rij in een tabel naar behoren, zelfs binnen scrollcontainers die slechts voor één as scrollen.

Browser Support

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

Deze functie is beschikbaar voor testen in Chrome 148 wanneer de optie 'Experimentele webplatformfuncties' is ingeschakeld.

Leer meer over position: sticky per as

Deel 5: Aanpassen aan de vormfactor

One of the most valuable things about the web is its flexibility. Users can navigate the web from a variety of devices, each with their own interaction mechanisms. Layouts should fundamentally adapt to the device and input method, whether a virtual keyboard is open, or touch targets are active. Keeping the form factor in mind when designing for the web gives your site or web app that extra finesse and aligns user expectations.

28. Overscroll-gebaren (veegbare gebieden)

Een voorbeeld van aanpassing aan de vormfactor is de mogelijkheid om veeg- en gebarengebaseerde interacties te gebruiken op het mobiele web. Je kunt scrollbalken gebruiken om sommige van deze effecten te bereiken, maar het is niet altijd een intuïtieve aanpak.

Het Chrome-team werkt in overleg met de OpenUI-communitygroep aan een voorgestelde declaratieve oplossing waarmee je native, op gebaren gebaseerde, veegbare gebieden kunt creëren (bijvoorbeeld veegbare Gmail-lijsten of zijmenu's die je kunt sluiten door te vegen) met behulp van overscrollcontainer en command invokers, die zowel bij aanraken als scrollen natuurlijk werken.

Leer meer over overscroll-gebaren

29. HTML in canvas

De HTML-in-Canvas API is een belangrijke paradigmaverschuiving, waardoor ontwikkelaars echte DOM-elementen in een <canvas> kunnen plaatsen (met behulp van het layoutsubtree attribuut). Deze elementen blijven volledig doorzoekbaar, toegankelijk en ondersteunen browserfuncties zoals automatisch aanvullen, terwijl WebGL/WebGPU-shaders er native mee kunnen interageren.

Bliksemronde

Een kort overzicht van enkele andere krachtige functies die het web vooruitstuwen.

30. DOM-statusbehoudende verplaatsing ( moveBefore() )

Met de moveBefore() DOM-methode kun je DOM-nodes (bijvoorbeeld afspelende video's, iframes of geselecteerde invoervelden) een andere ouder geven zonder hun status te wissen of een herlaadactie te veroorzaken.

Dit betekent dat video's blijven afspelen, iframes niet opnieuw laden, CSS-animaties niet opnieuw starten en invoervelden hun focus behouden wanneer je ze binnen je lay-out verplaatst.

Browser Support

  • Chrome: 133.
  • Rand: 133.
  • Firefox: 144.
  • Safari: niet ondersteund.

Source

Leer meer over moveBefore()

31. CSS text-fit

text-fit is een experimentele CSS-eigenschap die de lettergrootte dynamisch schaalt, zodat tekstregels precies de breedte van het omringende element aannemen (bijvoorbeeld: text-fit: grow per-line-all ).

Lees meer over text-fit

32. CSS text-box ( text-box-trim en text-box-edge )

De eigenschap text-box (en de bijbehorende lange termen text-box-trim en text-box-edge ) verwijdert de verticale ruimte (leading) boven en onder de tekst, waardoor een perfecte verticale uitlijning en centrering wordt gegarandeerd.

Browser Support

  • Chrome: 133.
  • Rand: 133.
  • Firefox: achter een vlag.
  • Safari: 18.2.

Source

Lees meer over text-trim

33. CSS-spatiedecoraties

CSS gap decorations brengt column-rule naar grid en flexbox, en introduceert een nieuwe row-rule eigenschap waarmee ontwikkelaars de tussenruimte tussen rijen en kolommen kunnen stylen. Het is niet langer nodig om met randen of pseudo-elementen te werken om de tussenruimte tussen rijen en kolommen te stylen.

Browser Support

  • Chrome: 149.
  • Rand: 149.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Leer meer over CSS Gap Decorations

34. Viewport-eenheden die rekening houden met de schuifbalk ( vw , vh , enz.)

Viewport-eenheden zoals vw en vh trekken automatisch de grootte van scrollbalken af ​​(indien gegarandeerd zichtbaar, met behulp van overflow-y: scroll of scrollbar-gutter: stable gedeclareerd op :root ), waardoor onbedoelde horizontale overloop wordt voorkomen wanneer elementen worden ingesteld op 100vw .

Browser Support

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

Lees meer over scrollbalk-compatibele viewport-eenheden.

35. JavaScript-toegang tot pseudo-elementen

Web-API's stellen nu CSS-pseudo-elementen (zoals ::before of ::after ) beschikbaar aan JavaScript.

Je kunt een CSSPseudoElement instantie ophalen met Element.pseudo(type) en controleren welk pseudo-element een gebeurtenis heeft geactiveerd met Event.pseudoTarget .

Browser Support

  • Chrome: 149.
  • Rand: 149.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Leer meer over CSSPseudoElement

Conclusie

Dat was het dan voor ons overzicht van de nieuwste ontwikkelingen in web-UI . We hopen dat u deze functies gebruikt om fantastische interfaces te bouwen. Tot volgend jaar!