Wat is er nieuw in CSS en UI: I/O 2023 editie

Una Kravets

Bramus

Adam Argyle

De afgelopen maanden hebben een gouden tijdperk ingeluid voor web-UI's. Nieuwe platformmogelijkheden zijn geïntroduceerd en worden steeds vaker gebruikt in verschillende browsers. Deze bieden meer webmogelijkheden en aanpassingsmogelijkheden dan ooit tevoren.

Hier zijn 20 van de meest opwindende en impactvolle functies die onlangs zijn gelanceerd of binnenkort beschikbaar komen:

• Containerquery's
• Stijlquery's
• :has() selector
• n-de van microsyntaxis
• text-wrap: balance
• initial-letter
• Dynamische viewport-eenheden
• Breedbeeldkleurruimten
• color-mix()
• Nestelen
• Cascadelagen
• Scoped-stijlen
• Trigonometrische functies
• Individuele transformatie-eigenschappen
• popover
• ankerpositionering
• selecteermenu
• Discrete eigenschapsovergangen
• Scroll-gestuurde animaties
• Bekijk overgangen

De nieuwe responsieve

Laten we beginnen met een aantal nieuwe mogelijkheden voor responsief ontwerp. Met nieuwe platformfuncties kunt u logische interfaces bouwen met componenten die over hun eigen responsieve stijlinformatie beschikken, interfaces bouwen die de mogelijkheden van het systeem benutten om gebruikersinterfaces te leveren die meer native aanvoelen, en de gebruiker deel laten uitmaken van het ontwerpproces met query's voor gebruikersvoorkeuren voor volledige aanpasbaarheid.

Containerquery's

Containerquery's zijn sinds kort stabiel in alle moderne browsers. Hiermee kunt u de grootte en stijl van een bovenliggend element opvragen om te bepalen welke stijlen op de onderliggende elementen moeten worden toegepast. Mediaquery's kunnen alleen informatie uit de viewport benaderen en gebruiken, wat betekent dat ze alleen werken op een macroweergave van een paginalay-out. Containerquery's zijn daarentegen een preciezere tool die een willekeurig aantal lay-outs of lay-outs binnen lay-outs ondersteunt.

In het volgende voorbeeld van een inbox zijn de primaire inbox en de zijbalk Favorieten beide containers. De e-mails in deze containers passen hun rasterindeling aan en tonen of verbergen de tijdstempel van de e-mail op basis van de beschikbare ruimte. Dit is exact hetzelfde onderdeel op de pagina, alleen verschijnt het in verschillende weergaven.

Omdat we een containerquery hebben, zijn de stijlen van deze componenten dynamisch. Als u de paginagrootte en lay-out aanpast, reageren de componenten op de ruimte die ze individueel krijgen toegewezen. De zijbalk wordt een bovenste balk met meer ruimte, en de lay-out lijkt meer op de primaire inbox. Wanneer er minder ruimte is, worden ze beide in een verkorte vorm weergegeven.

Lees meer over containerquery's en het bouwen van logische componenten in dit bericht .

Stijlvragen

Met de containerqueryspecificatie kunt u ook de stijlwaarden van een bovenliggende container opvragen. Dit is momenteel gedeeltelijk geïmplementeerd in Chrome 111, waar u aangepaste CSS-eigenschappen kunt gebruiken om containerstijlen toe te passen.

In het volgende voorbeeld worden weerskenmerken die zijn opgeslagen in aangepaste eigenschapswaarden, zoals regen, zonnig en bewolkt, gebruikt om de achtergrond en het indicatorpictogram van de kaart op te maken.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Dit is nog maar het begin voor stijlquery's. In de toekomst zullen we booleaanse query's gebruiken om te bepalen of een aangepaste eigenschapswaarde bestaat en codeherhaling te verminderen. Momenteel worden bereikquery's besproken om stijlen toe te passen op basis van een reeks waarden. Dit zou het mogelijk maken om de hier getoonde stijlen toe te passen met een percentage voor de kans op regen of bewolking.

Meer informatie en demo's vindt u in ons blogbericht over stijlquery's .

:has()

Over krachtige, dynamische functies gesproken: de :has()-selector is een van de krachtigste nieuwe CSS-mogelijkheden in moderne browsers. Met :has() kun je stijlen toepassen door te controleren of een bovenliggend element de aanwezigheid van specifieke onderliggende elementen bevat, of dat die onderliggende elementen zich in een specifieke status bevinden. Dit betekent dat we nu in feite een bovenliggende selector hebben.

Voortbouwend op het voorbeeld van de containerquery, kunt u :has() gebruiken om de componenten nog dynamischer te maken. Hierin krijgt een item met een "ster"-element een grijze achtergrond en een item met een aangevinkt selectievakje een blauwe achtergrond.

Maar deze API is niet beperkt tot de selectie van ouderelementen. Je kunt ook alle onderliggende elementen binnen het bovenliggende element stylen. De titel wordt bijvoorbeeld vetgedrukt wanneer het item het sterelement bevat. Dit wordt bereikt met .item:has(.star) .title . Met de selector :has() krijg je toegang tot bovenliggende elementen, onderliggende elementen en zelfs onderliggende elementen, wat dit een zeer flexibele API maakt, met nieuwe use cases die dagelijks opduiken.

Leer meer en verken nog meer demo's. Bekijk deze blogpost over :has() .

n-de-van-syntaxis

Het webplatform beschikt nu over een geavanceerdere nth-child-selectie. De geavanceerde nth-child-syntaxis biedt een nieuw trefwoord ("of"), waarmee u de bestaande microsyntaxis van An+B kunt gebruiken, met een specifiekere subset om binnen te zoeken.

Als u de reguliere nth-child gebruikt, zoals :nth-child(2) voor de speciale klasse, selecteert de browser het element waarop de speciale klasse is toegepast en dat tevens het tweede kind is. Dit in tegenstelling tot :nth-child(2 of .special) dat eerst alle .special elementen voorfiltert en vervolgens het tweede element uit die lijst kiest.

Ontdek deze functie verder in ons artikel over n-de-van-syntaxis .

text-wrap: balance

Selectoren en stijlquery's zijn niet de enige plekken waar we logica in onze stijlen kunnen inbouwen; typografie is er ook een. Vanaf Chrome 114 kunt u tekstomloopbalancering gebruiken voor koppen met behulp van de eigenschap text-wrap met de waarde balance .

Om de tekst in balans te brengen, voert de browser een binaire zoekopdracht uit naar de kleinste breedte, zonder extra regels te genereren. De zoekopdracht stopt bij één CSS-pixel (niet de weergavepixel). Om het aantal stappen in de binaire zoekopdracht verder te minimaliseren, begint de browser met 80% van de gemiddelde lijnbreedte.

Lees er meer over in dit artikel .

initial-letter

Een andere mooie verbetering in webtypografie is initial-letter . Deze CSS-eigenschap geeft je meer controle over de stijl van inset-drop caps.

Je gebruikt initial-letter op het pseudo-element :first-letter om het volgende te specificeren: De grootte van de letter op basis van het aantal regels dat deze inneemt. De blokoffset, of "sink", van de letter voor de positie van de letter.

Meer informatie over het gebruik van intial-letter vindt u hier .

Dynamische viewport-eenheden

Een veelvoorkomend probleem waar webontwikkelaars tegenwoordig mee te maken hebben, is het nauwkeurig en consistent aanpassen van de volledige viewport-grootte, vooral op mobiele apparaten. Als ontwikkelaar wil je dat 100vh (100% van de viewport-hoogte) betekent dat de hoogte gelijk is aan de viewport. De vh eenheid houdt echter geen rekening met zaken zoals het intrekken van navigatiebalken op mobiele apparaten, waardoor de breedte soms te lang wordt en scrollen veroorzaakt.

Om dit probleem op te lossen, hebben we nu nieuwe eenheidswaarden op het webplatform, waaronder: - Kleine viewporthoogte en -breedte (of svh en svw ), die de kleinste actieve viewportgrootte vertegenwoordigen. - Grote viewporthoogte en -breedte ( lvh en lvw ), die de grootste grootte vertegenwoordigen. - Dynamische viewporthoogte en -breedte ( dvh en dvw ).

De waarde van dynamische viewport-eenheden verandert wanneer de extra dynamische browserwerkbalken, zoals het adres bovenaan of de tabbladbalk onderaan, zichtbaar zijn en wanneer ze dat niet zijn.

Voor meer informatie over deze nieuwe eenheden, lees De grote, kleine en dynamische viewport-eenheden .

Breedbeeldkleurruimten

Een andere belangrijke nieuwe toevoeging aan het webplatform zijn kleurruimten met een breed kleurengamma. Voordat kleurruimten met een breed kleurengamma beschikbaar waren op het webplatform, kon je een foto maken met levendige kleuren, die je op moderne apparaten kon bekijken, maar je kon geen knop-, tekst- of achtergrondkleur krijgen die overeenkwam met die levendige waarden.

Maar nu hebben we een reeks nieuwe kleurruimten op het webplatform, waaronder REC2020, P3, XYZ, LAB, OKLAB, LCH en OKLCH. Ontdek de nieuwe webkleurruimten en meer in de HD Color Guide .

In DevTools kunt u direct zien hoe het kleurengamma is uitgebreid, met die witte lijn die aangeeft waar het srgb-bereik eindigt en waar het bredere kleurengamma begint.

Er zijn veel meer tools beschikbaar voor kleur! Mis ook de geweldige verbeteringen aan de kleurverloop niet. Er is zelfs een gloednieuwe tool, gemaakt door Adam Argyle, waarmee je een nieuwe webkleurenkiezer en kleurverloopbouwer kunt uitproberen. Probeer hem uit op gradient.style .

kleurmix()

De functie color-mix() is een uitbreiding op uitgebreide kleurruimten. Deze functie ondersteunt het mengen van twee kleurwaarden om nieuwe waarden te creëren op basis van de kanalen van de kleuren die gemengd worden. De kleurruimte waarin je mengt, beïnvloedt de resultaten. Werken in een meer perceptuele kleurruimte zoals oklch zal een ander kleurbereik doorlopen dan iets als srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

De functie color-mix() biedt een langverwachte mogelijkheid: de mogelijkheid om dekkende kleurwaarden te behouden en er tegelijkertijd transparantie aan toe te voegen. Nu kunt u uw merkkleurvariabelen gebruiken en tegelijkertijd variaties van die kleuren met verschillende dekkingen creëren. Dit doet u door een kleur met transparantie te mengen. Wanneer u uw merkkleur blauw mengt met 10% transparantie, krijgt u een 90% dekkende merkkleur. U ziet hoe u hiermee snel kleursystemen kunt bouwen.

U kunt dit vandaag in actie zien in Chrome DevTools met een heel mooi voorbeeld van een Venn-diagrampictogram in het deelvenster Stijlen .

Bekijk meer voorbeelden en details in ons blogbericht over color-mix of probeer deze color-mix()- speeltuin .

CSS-fundamenten

Het ontwikkelen van nieuwe mogelijkheden met duidelijke voordelen voor de gebruiker is één onderdeel van de vergelijking, maar veel van de functies in Chrome hebben als doel de ontwikkelaarservaring te verbeteren en een betrouwbaardere en beter georganiseerde CSS-architectuur te creëren. Deze functies omvatten CSS-nesting, cascadelagen, scoped styles, trigonometrische functies en individuele transform-eigenschappen.

Nestelen

CSS-nesting, iets waar mensen van Sass dol op zijn en al jaren een van de meest gevraagde CSS-ontwikkelaars, is eindelijk beschikbaar op het webplatform. Nesting stelt ontwikkelaars in staat om te schrijven in een beknoptere, gegroepeerde opmaak die redundantie vermindert.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Je kunt ook mediaquery's nesten, wat ook betekent dat je containerquery's kunt nesten. In het volgende voorbeeld wordt een kaart van een staande lay-out naar een liggende lay-out gewijzigd als de container voldoende breedte heeft:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

De lay-outaanpassing naar flex vindt plaats wanneer de container meer (of gelijk aan) 480px inline-ruimte beschikbaar heeft. De browser past die nieuwe weergavestijl gewoon toe wanneer aan de voorwaarden is voldaan.

Voor meer informatie en voorbeelden, bekijk ons ​​bericht over CSS-nesting .

Cascadelagen

Een ander knelpunt voor ontwikkelaars dat we hebben geïdentificeerd, is het waarborgen van consistentie in welke stijlen belangrijker zijn dan andere. Een manier om dit op te lossen, is door meer controle te krijgen over de CSS-cascade.

Met cascadelagen wordt dit probleem opgelost. Gebruikers krijgen controle over welke lagen een hogere prioriteit hebben dan andere. Dit betekent dat ze nauwkeuriger kunnen bepalen wanneer hun stijlen worden toegepast.

Lees meer over het gebruik van cascadelagen in dit artikel .

CSS met een bepaald bereik

Met CSS-stijlen met een scope kunnen ontwikkelaars de grenzen specificeren waarbinnen specifieke stijlen van toepassing zijn, wat in feite native naamruimte in CSS creëert. Voorheen vertrouwden ontwikkelaars op scripts van derden om klassen te hernoemen, of op specifieke naamgevingsconventies om stijlconflicten te voorkomen, maar binnenkort kun je @scope gebruiken.

Hier koppelen we een .title element aan een .card . Dit voorkomt dat dat title-element conflicteert met andere .title elementen op de pagina, zoals de titel van een blogbericht of een andere kop.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

In deze live demo kunt u @scope met scopinglimieten samen met @layer zien:

Meer informatie over @scope vindt u in de css-cascade-6-specificatie .

Trigonometrische functies

Een ander nieuw onderdeel van CSS zijn de trigonometrische functies die worden toegevoegd aan de bestaande CSS-wiskundige functies. Deze functies zijn nu stabiel in alle moderne browsers en stellen je in staat om meer organische lay-outs op het webplatform te creëren. Een goed voorbeeld is deze radiale menu-indeling, die nu kan worden ontworpen en geanimeerd met behulp van sin() en cos() functies.

In de onderstaande demo draaien de punten rond een centraal punt. In plaats van elk punt om zijn eigen middelpunt te draaien en vervolgens naar buiten te verplaatsen, wordt elk punt verplaatst op de X- en Y-as. De afstanden op de X- en Y-as worden bepaald door rekening te houden met de cos() en sin() van de --angle .

Zie ons artikel over trigonometrische functies voor meer gedetailleerde informatie over dit onderwerp.

Individuele transformatie-eigenschappen

De ergonomie voor ontwikkelaars blijft verbeteren met individuele transformatiefuncties. Sinds de laatste keer dat we I/O uitvoerden, waren individuele transformaties stabiel in alle moderne browsers.

Vroeger vertrouwde je op de transform-functie om subfuncties toe te passen om een ​​UI-element te schalen, roteren en vertalen. Dit vereiste veel herhaling en was vooral frustrerend wanneer je meerdere transformaties op verschillende momenten in de animatie toepaste.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Nu kunt u al deze details in uw CSS-animaties weergeven door de typen transformaties te scheiden en ze afzonderlijk toe te passen.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Hierdoor kunnen veranderingen in translatie, rotatie en schaal gelijktijdig en met verschillende snelheden op verschillende tijdstippen tijdens de animatie plaatsvinden.

Zie dit bericht over individuele transformatiefuncties voor meer informatie.

Aanpasbare componenten

Om er zeker van te zijn dat we via het webplatform in een aantal belangrijke behoeften van ontwikkelaars voorzien, werken we samen met de OpenUI-communitygroep en hebben we om te beginnen drie oplossingen geïdentificeerd:

1. Ingebouwde pop-upfunctionaliteit met gebeurtenis-handlers, een declaratieve DOM-structuur en toegankelijke standaardinstellingen.
2. Een CSS API om twee elementen aan elkaar te koppelen om ankerpositionering mogelijk te maken.
3. Een aanpasbaar vervolgkeuzemenuonderdeel waarmee u de inhoud van een selectie kunt vormgeven.

Popover

De popover API biedt elementen een aantal ingebouwde browserondersteunende trucjes, zoals:

• Ondersteuning voor de bovenste laag, zodat u z-index niet hoeft te beheren. Wanneer u een pop-over of dialoogvenster opent, promoot u dat element naar een speciale laag bovenaan de pagina.
• Licht-verwijderingsgedrag is gratis in auto popovers, zodat wanneer u buiten een element klikt, de popover wordt verwijderd, uit de toegankelijkheidsboom wordt verwijderd en de focus correct wordt beheerd.
• Standaardtoegankelijkheid voor het bindweefsel van het popover-doel en de popover zelf.

Dit alles betekent dat er minder JavaScript geschreven hoeft te worden om al deze functionaliteit te creëren en al deze statussen bij te houden.

De DOM-structuur voor popover is declaratief en kan zo helder worden geschreven dat je je popover-element een id en het popover attribuut geeft. Vervolgens synchroniseer je die id met het element dat de popover opent, zoals een knop met het popovertarget -attribuut:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover is een afkorting voor popover=auto . Een element met popover=auto sluit andere popovers geforceerd wanneer het geopend wordt, krijgt focus wanneer het geopend wordt en kan met een lichtknop worden gesloten. popover=manual elementen daarentegen sluiten geen enkel ander elementtype geforceerd, krijgen niet direct focus en kunnen niet met een lichtknop worden gesloten. Ze sluiten via een schakelaar of een andere sluitactie.

De meest recente documentatie over popovers vindt u momenteel op MDN .

Ankerpositionering

Popovers worden ook vaak gebruikt in elementen zoals dialoogvensters en tooltips, die doorgaans aan specifieke elementen moeten worden gekoppeld. Neem bijvoorbeeld dit evenement. Wanneer u op een agenda-evenement klikt, verschijnt er een dialoogvenster naast het evenement waarop u hebt geklikt. Het agenda-item is het anker en de popover is het dialoogvenster dat de details van het evenement weergeeft.

U kunt een gecentreerde tooltip maken met de functie anchor() , waarbij u de breedte van het anker gebruikt om de tooltip op 50% van de x-positie van het anker te positioneren. Gebruik vervolgens bestaande positioneringswaarden om de rest van de plaatsingsstijlen toe te passen.

Maar wat gebeurt er als de popover niet in het viewport past op basis van de manier waarop u deze hebt gepositioneerd?

Om dit probleem op te lossen, bevat de API voor ankerpositionering fallback-posities die u kunt aanpassen. Het volgende voorbeeld maakt een fallback-positie genaamd "top-then-bottom". De browser probeert de tooltip eerst bovenaan te positioneren. Als dat niet in de viewport past, plaatst de browser deze vervolgens onder het ankerelement, aan de onderkant.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Lees meer over ankerpositionering in dit blogbericht .

<selectmenu>

Met zowel popover- als ankerpositionering kunt u volledig aanpasbare selectmenu's bouwen. De OpenUI-communitygroep heeft de fundamentele structuur van deze menu's onderzocht en gezocht naar manieren om de inhoud ervan aan te passen. Neem deze visuele voorbeelden:

Om het voorbeeld van het uiterst linkse selectmenu te maken, met gekleurde stippen die overeenkomen met de kleur die in een agendagebeurtenis wordt weergegeven, kunt u het als volgt schrijven:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Discrete eigenschapsovergangen

Om dit alles soepel te laten verlopen, heeft het web een manier nodig om afzonderlijke eigenschappen te animeren. Dit zijn eigenschappen die in het verleden meestal niet animeerbaar waren, zoals animeren van en naar de bovenste laag en animeren van en naar display: none .

Als onderdeel van het werk om mooie overgangen voor popovers, selectiemenu's en zelfs bestaande elementen zoals dialoogvensters of aangepaste componenten mogelijk te maken, maken browsers nieuwe functies beschikbaar om deze animaties te ondersteunen.

De volgende popover-demo animeert popovers in en uit met :popover-open voor de open status, @starting-style voor de status vóór de opening en past een transformatiewaarde rechtstreeks toe op het element voor de status na de opening en sluiting. Om dit alles met display te laten werken, moet het worden toegevoegd aan de eigenschap transition , zoals hier:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interacties

En dat brengt ons bij interacties, de laatste halte van deze rondleiding langs web-UI-functies.

We hebben het al gehad over het animeren van discrete eigenschappen, maar er zijn ook een aantal echt opwindende API's in Chrome die draaien om scroll-gedreven animaties en weergave-overgangen

Scroll-gestuurde animaties

Met scroll-gestuurde animaties kunt u de weergave van een animatie regelen op basis van de scrollpositie van een scrollcontainer. Dit betekent dat de animatie vooruit of achteruit scrolt als u omhoog of omlaag scrolt. Bovendien kunt u met scroll-gestuurde animaties een animatie ook regelen op basis van de positie van een element binnen de scrollcontainer. Dit stelt u in staat interessante effecten te creëren, zoals een parallax-achtergrondafbeelding, voortgangsbalken voor scrollen en afbeeldingen die zichzelf onthullen zodra ze in beeld komen.

Deze API ondersteunt een reeks JavaScript-klassen en CSS-eigenschappen waarmee u eenvoudig declaratieve, scrollgestuurde animaties kunt maken.

Gebruik de nieuwe eigenschappen scroll-timeline , view-timeline en animation-timeline om een ​​CSS-animatie via scrollen aan te sturen. Om een ​​JavaScript Web Animations API aan te sturen, geeft u een ScrollTimeline of ViewTimeline instantie door als timeline aan Element.animate()

Deze nieuwe API's werken samen met bestaande API's voor webanimaties en CSS-animaties, wat betekent dat ze profiteren van de voordelen van deze API's. Dat omvat de mogelijkheid om deze animaties buiten de hoofdthread te laten lopen. Ja, je leest het goed: je kunt nu zijdezachte animaties hebben, aangestuurd door scrollen, die buiten de hoofdthread lopen, met slechts een paar regels extra code. Wat is er niet leuk aan?!

Voor een uitgebreide en diepgaande handleiding over het maken van deze scroll-gestuurde animaties, kunt u dit artikel over scroll-gestuurde animaties raadplegen.

Bekijk overgangen

Met de View Transition API kun je de DOM eenvoudig in één stap wijzigen en tegelijkertijd een geanimeerde overgang tussen de twee statussen creëren. Dit kunnen eenvoudige overgangen tussen weergaven zijn, maar je kunt ook bepalen hoe afzonderlijke delen van de pagina moeten overgaan.

View Transitions kunnen worden gebruikt als een Progressive Enhancement: neem uw code die de DOM op welke manier dan ook bijwerkt en wikkel deze in de View Transitions API met een fallback voor browsers die de functie niet ondersteunen.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Hoe de overgang eruit moet zien, wordt bepaald via CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Zoals gedemonstreerd in deze geweldige demo van Maxi Ferreira , blijven andere pagina-interacties, zoals een afgespeelde video, werken terwijl een weergaveovergang plaatsvindt.

Weergaveovergangen werken momenteel met Single-Page Apps (SPA's) vanaf Chrome 111. Er wordt gewerkt aan ondersteuning voor apps met meerdere pagina's. Bekijk voor meer informatie onze volledige handleiding voor weergaveovergangen , waarin we u er alles over uitleggen.

Conclusie

Blijf op de hoogte van de laatste ontwikkelingen in CSS en HTML hier op developer.chrome.com en bekijk de I/O-video's voor meer weblandingsvideo's.