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

Una Kravets

Bramus

Adam Argyle

De afgelopen maanden hebben een gouden tijdperk voor de webinterface ingeluid. Nieuwe platformmogelijkheden zijn geland met een nauwe acceptatie door meerdere browsers die meer webmogelijkheden en aanpassingsfuncties dan ooit ondersteunen.

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

• Containerquery's
• Stijlquery's
• :has() selector
• nde-van microsyntaxis
• text-wrap: balance
• initial-letter
• Dynamische viewport-eenheden
• Brede kleurruimten
• color-mix()
• Nesten
• Cascadelagen
• Scoped-stijlen
• Trigonometrische functies
• Individuele transformatie-eigenschappen
• pop-over
• anker positionering
• keuzemenu
• Discrete eigendomsovergangen
• Scrollgestuurde animaties
• Overgangen bekijken

Het nieuwe responsieve

Laten we aan de slag gaan met enkele nieuwe responsieve ontwerpmogelijkheden. Met nieuwe platformfuncties kunt u logische interfaces bouwen met componenten die eigenaar zijn van hun responsieve stijlinformatie, interfaces bouwen die gebruik maken van systeemmogelijkheden om meer native-gevoel-UI's te leveren, en de gebruiker een onderdeel laten worden van het ontwerpproces met zoekopdrachten naar gebruikersvoorkeuren voor volledige aanpasbaarheid.

Containerquery's

Containerquery's zijn onlangs stabiel geworden in alle moderne browsers. Hiermee kunt u de grootte en stijl van een ouderelement opvragen om te bepalen welke stijlen op elk van de onderliggende elementen moeten worden toegepast. Mediaquery's kunnen alleen toegang krijgen tot informatie uit de viewport en deze gebruiken, wat betekent dat ze alleen kunnen werken met een macroweergave van een paginalay-out. Containerquery's zijn daarentegen een nauwkeuriger hulpmiddel dat een willekeurig aantal lay-outs of lay-outs binnen lay-outs kan ondersteunen.

In het volgende voorbeeld van de inbox zijn het primaire postvak IN en de zijbalk Favorieten beide containers. De e-mails daarin 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, dat alleen in verschillende weergaven verschijnt

Omdat we een containerquery hebben, zijn de stijlen van deze componenten dynamisch. Als u het paginaformaat en de lay-out aanpast, reageren de componenten op hun individueel toegewezen ruimte. De zijbalk wordt een bovenste balk met meer ruimte en we zien dat de lay-out meer op de primaire inbox lijkt. Als er minder ruimte is, worden ze allebei in een gecomprimeerd formaat 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 weerkenmerken gebruikt die zijn opgeslagen in aangepaste eigenschapswaarden, zoals regen, zonnig en bewolkt, om de achtergrond en het indicatorpictogram van de kaart vorm te geven.

@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 hebben om te bepalen of er een aangepaste eigenschapswaarde bestaat en herhaling van de code te verminderen. Momenteel wordt er gesproken over bereikquery's 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 procentuele waarde voor de kans op regen of bewolking.

U kunt meer leren en meer demo's bekijken in onze blogpost over stijlquery's .

:has()

Over krachtige, dynamische functies gesproken: de :has() selector is een van de krachtigste nieuwe CSS-mogelijkheden die in moderne browsers te vinden zijn. Met :has() kunt u stijlen toepassen door te controleren of een ouderelement de aanwezigheid van specifieke onderliggende elementen bevat, of dat deze onderliggende elementen een specifieke status hebben. Dit betekent dat we nu in wezen een bovenliggende selector hebben.

Voortbouwend op het voorbeeld van de containerquery kunt u :has() gebruiken om de componenten nog dynamischer te maken. Daarin 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 bovenliggende selectie. Je kunt ook eventuele kinderen binnen de ouder stylen. De titel is bijvoorbeeld vetgedrukt als het item het sterelement bevat. Dit wordt bereikt met .item:has(.star) .title . Door de :has() selector te gebruiken, krijgt u toegang tot bovenliggende elementen, onderliggende elementen en zelfs broers en zussen, waardoor dit een zeer flexibele API is, waarbij elke dag nieuwe gebruiksscenario's opduiken.

Lees meer en ontdek nog meer demo's, bekijk deze blogpost over :has() .

n-de syntaxis

Het webplatform beschikt nu over een geavanceerdere selectie van n-de kinderen. De geavanceerde syntaxis van n-de kind geeft een nieuw trefwoord ("of"), waarmee u de bestaande microsyntaxis van An+B kunt gebruiken, met een specifiekere subset waarin u kunt zoeken.

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

Verken deze functie verder in ons artikel over nth-of-syntaxis .

text-wrap: balance

Selectors en stijlquery's zijn niet de enige plaatsen waar we logica in onze stijlen kunnen inbedden; typografie is een andere. Vanaf Chrome 114 kun je tekstomloopbalancering gebruiken voor koppen, met behulp van de eigenschap text-wrap met de waarde balance .

Om de tekst in evenwicht te brengen, voert de browser effectief een binaire zoekopdracht uit voor de kleinste breedte, zonder dat er extra regels ontstaan, en stopt bij één CSS-pixel (niet de weergavepixel). Om de 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 van webtypografie is initial-letter . Deze CSS-eigenschap geeft u betere controle over de stijl van sierhoofdletters.

U gebruikt initial-letter op het :first-letter pseudo-element om het volgende op te geven: De grootte van de letter, gebaseerd op het aantal regels dat deze in beslag neemt. De blokverschuiving van de letter, of 'zink', voor waar de letter zal komen te staan.

Lees hier meer over het gebruik van intial-letter .

Dynamische viewport-eenheden

Een veelvoorkomend probleem waar webontwikkelaars tegenwoordig mee te maken hebben, is de nauwkeurige en consistente full-viewport-grootte, vooral op mobiele apparaten. Als ontwikkelaar wil je 100vh (100% van de viewport-hoogte) betekent “zo groot zijn als de viewport”, maar de vh -eenheid houdt geen rekening met zaken als het intrekken van navigatiebalken op mobiele apparaten, dus soms wordt het te lang en veroorzaakt scrollen.

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

Dynamische viewport-eenheden veranderen in waarde wanneer de extra dynamische browserwerkbalken, zoals het adres bovenaan of de tabbalk onderaan, zichtbaar zijn en wanneer ze dat niet zijn.

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

Brede kleurruimten

Een andere nieuwe belangrijke toevoeging aan het webplatform zijn kleurruimten met een breed spectrum. Voordat kleuren met een breed kleurengamma beschikbaar kwamen op het webplatform, kon je een foto maken met levendige kleuren, zichtbaar op moderne apparaten, maar je kon geen knop, tekstkleur of achtergrond krijgen die bij die levendige waarden paste.

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

En je kunt in DevTools meteen zien hoe het kleurbereik is uitgebreid, waarbij die witte lijn aangeeft waar het srgb-bereik eindigt en waar het bredere kleurbereik begint.

Er zijn nog veel meer gereedschappen beschikbaar voor kleur! Mis ook niet alle geweldige gradiëntverbeteringen. Er is zelfs een gloednieuw hulpmiddel dat Adam Argyle heeft gebouwd om u te helpen bij het uitproberen van een nieuwe webkleurkiezer en verloopbouwer, probeer het eens op verloop.style .

kleurenmix()

Uitbreiden op uitgebreide kleurruimten is de color-mix() functie. Deze functie ondersteunt het mengen van twee kleurwaarden om nieuwe waarden te creëren op basis van de kanalen van de kleuren die worden gemengd. De kleurruimte waarin u mengt, heeft invloed op de resultaten. Werken in een meer perceptuele kleurruimte zoals oklch zal een ander kleurbereik doorlopen dan zoiets 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 lang gevraagde mogelijkheid: de mogelijkheid om ondoorzichtige kleurwaarden te behouden en er tegelijkertijd enige transparantie aan toe te voegen. Nu kunt u de kleurvariabelen van uw merk gebruiken terwijl u variaties van die kleuren met verschillende dekkingen maakt. De manier om dit te doen is door een kleur te mengen met transparant. Wanneer u uw merkkleur blauw mengt met 10% transparant, krijgt u een 90% dekkende merkkleur. U ziet hoe u hiermee snel kleursystemen kunt bouwen.

Je kunt dit vandaag in actie zien in Chrome DevTools met een heel mooi voorbeeld van een Venn-diagrampictogram in het stijlvenster .

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

CSS-fundamenten

Het bouwen van nieuwe mogelijkheden die duidelijke gebruikersvoordelen opleveren, is een onderdeel van de vergelijking, maar veel van de functies die in Chrome terechtkomen, hebben tot doel de ontwikkelaarservaring te verbeteren en een betrouwbaardere en georganiseerde CSS-architectuur te creëren. Deze functies omvatten CSS-nesten, cascadelagen, scoped-stijlen, trigonometrische functies en individuele transformatie-eigenschappen.

Nesten

CSS-nesten, iets waar mensen dol op zijn bij Sass, en al jaren een van de meest gevraagde CSS-ontwikkelaars, komt eindelijk op het webplatform terecht. Door te nesten kunnen ontwikkelaars in een beknopter, gegroepeerd formaat schrijven dat redundantie vermindert.

.card {}
.card:hover {}

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

  }
}

U kunt ook Mediaquery's nesten, wat ook betekent dat u Containerquery's kunt nesten. In het volgende voorbeeld wordt een kaart gewijzigd van een staande lay-out naar een liggende lay-out als er voldoende breedte in de container zit:

.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 eenvoudig toe als aan de voorwaarden is voldaan.

Bekijk ons ​​bericht over CSS-nesten voor meer informatie en voorbeelden.

Cascadelagen

Een ander pijnpunt voor ontwikkelaars dat we hebben geïdentificeerd, is het zorgen voor consistentie waarin stijlen de overhand krijgen op andere, en een onderdeel van het oplossen hiervan is het hebben van betere controle over de CSS-cascade.

Cascadelagen lossen dit op door gebruikers controle te geven over welke lagen een hogere prioriteit hebben dan andere, wat een meer verfijnde controle betekent over wanneer uw stijlen worden toegepast.

Lees in dit artikel meer over het gebruik van cascadelagen.

Scope-CSS

Met CSS-scoped-stijlen kunnen ontwikkelaars de grenzen specificeren waarvoor specifieke stijlen van toepassing zijn, waardoor in essentie een native naamruimte in CSS ontstaat. Voorheen vertrouwden ontwikkelaars op scripting van derden om klassen te hernoemen, of op specifieke naamgevingsconventies om stijlconflicten te voorkomen, maar binnenkort kun je @scope gebruiken.

Hier richten we een .title element op een .card . Dit voorkomt dat dat title-element in conflict komt met andere .title -elementen op de pagina, zoals de titel van een blogpost of een andere kop.

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

Je kunt @scope met scopinglimieten samen met @layer zien in deze live demo:

Lees meer over @scope in de css-cascade-6-specificatie .

Trigonometrische functies

Een ander stukje nieuw CSS-loodgieterswerk zijn de trigonometrische functies die worden toegevoegd aan de bestaande CSS-wiskundige functies. Deze functies zijn nu stabiel in alle moderne browsers en stellen u in staat 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 de functies sin() en cos() .

In de onderstaande demo draaien de stippen rond een centraal punt. In plaats van elke stip rond zijn eigen middelpunt te draaien en deze vervolgens naar buiten te verplaatsen, wordt elke stip op de X- en Y-assen vertaald. De afstanden op de X- en Y-as worden bepaald door rekening te houden met de cos() en respectievelijk de sin() van de --angle .

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

Individuele transformatie-eigenschappen

De ergonomie van ontwikkelaars blijft verbeteren met individuele transformatiefuncties. Sinds de laatste keer dat we I/O hielden, zijn individuele transformaties stabiel gebleven in alle moderne browsers.

In het verleden vertrouwde u op de transformatiefunctie om subfuncties toe te passen om een ​​UI-element te schalen, roteren en vertalen. Dit bracht veel herhaling met zich mee, en was vooral frustrerend bij het toepassen van meerdere transformaties op verschillende tijdstippen in de animatie.

.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 verwerken 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 vertaling, rotatie of schaal gelijktijdig plaatsvinden met verschillende veranderingssnelheden op verschillende tijdstippen tijdens de animatie.

Zie dit bericht over individuele transformatiefuncties voor meer informatie.

Aanpasbare componenten

Om ervoor te zorgen dat we een aantal van de belangrijkste behoeften van ontwikkelaars via het webplatform kunnen vervullen, werken we samen met de OpenUI-communitygroep en hebben we om te beginnen drie oplossingen geïdentificeerd:

1. Ingebouwde pop-upfunctionaliteit met gebeurtenishandlers, 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 aanpasbare vervolgkeuzemenucomponent, voor als u inhoud binnen een selectie wilt opmaken.

Pop-over

De popover-API geeft elementen ingebouwde magie voor browserondersteuning, zoals:

• Ondersteuning voor toplaag, zodat u z-index niet hoeft te beheren. Wanneer u een popover of dialoogvenster opent, promoveert u dat element naar een speciale laag bovenaan de pagina.
• Light-dismiss-gedrag is gratis in auto popovers, dus wanneer u buiten een element klikt, wordt de popover gesloten, verwijderd uit de toegankelijkheidsstructuur en wordt de focus correct beheerd.
• Standaardtoegankelijkheid voor het bindweefsel van het doel van de popover en de popover zelf.

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

De DOM-structuur voor popover is declaratief en kan net zo duidelijk worden geschreven als het geven van een id en het popover attribuut aan uw popover-element. Vervolgens synchroniseert u die ID met het element dat de popover zou openen, 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 zal andere popovers geforceerd sluiten wanneer deze worden geopend, krijgt focus wanneer deze wordt geopend en kan licht uitsluiten. Omgekeerd forceren popover=manual -elementen geen enkel ander elementtype geforceerd, krijgen ze niet onmiddellijk de focus en worden ze niet licht gedimd. Ze sluiten via een schakelaar of een andere sluitactie.

De meest actuele documentatie over popovers is momenteel te vinden op MDN .

Anker positionering

Popovers worden ook vaak gebruikt in elementen zoals dialoogvensters en tooltips, die doorgaans aan specifieke elementen moeten worden verankerd. Neem dit voorbeeld van een gebeurtenis. Wanneer u op een kalendergebeurtenis klikt, verschijnt er een dialoogvenster naast de gebeurtenis waarop u hebt geklikt. Het kalenderitem is het anker en de popover is het dialoogvenster waarin de details van de afspraak worden weergegeven.

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 plaatsen. Gebruik vervolgens bestaande positioneringswaarden om de rest van de plaatsingsstijlen toe te passen.

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

Om dit op te lossen, bevat de ankerpositionerings-API reserveposities die u kunt aanpassen. In het volgende voorbeeld wordt een terugvalpositie gemaakt met de naam 'boven-dan-onder'. De browser zal eerst proberen de tooltip bovenaan te plaatsen, en als dat niet in de viewport past, plaatst de browser deze onder het verankeringselement onderaan.

.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 deze blogpost .

<selectmenu>

Met zowel popover- als ankerpositionering kunt u volledig aanpasbare selectiemenu's bouwen. De gemeenschapsgroep OpenUI 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 dat meest linkse selectmenu voorbeeld te bouwen, met gekleurde stippen die overeenkomen met de kleur die binnen een kalendergebeurtenis wordt weergegeven, kunt u dit 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 eigendomsovergangen

Om ervoor te zorgen dat dit alles popovers soepel in en uit kan laten gaan, heeft het web een manier nodig om discrete eigenschappen te animeren. Dit zijn eigenschappen die in het verleden doorgaans niet konden worden geanimeerd, zoals animeren van en naar de bovenste laag en animeren van en naar display: none .

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

De volgende popover-demo animeert popovers in en uit met behulp van :popover-open voor de open-status, @starting-style voor de before-open-status, en past een transformatiewaarde rechtstreeks toe op het element voor de after-open-is-closed-status . Om dit allemaal te laten werken met weergave, moet het als volgt aan de transition eigenschap worden toegevoegd:

.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

Dat brengt ons bij interacties, de laatste stop van deze rondleiding door de web-UI-functies.

We hadden het al over het animeren van discrete eigenschappen, maar er zijn ook een aantal echt opwindende API's in Chrome rond scrollgestuurde animaties en weergaveovergangen

Scrollgestuurde animaties

Met scrollgestuurde animaties kunt u het afspelen van een animatie regelen op basis van de scrollpositie van een scrollcontainer. Dit betekent dat terwijl u omhoog of omlaag scrolt, de animatie vooruit of achteruit beweegt. Bovendien kunt u met scrollgestuurde animaties ook een animatie besturen op basis van de positie van een element binnen zijn scrollcontainer. Hiermee kunt u interessante effecten creëren, zoals een parallax-achtergrondafbeelding, schuifbalken voor de voortgang 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.

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

Deze nieuwe API's werken in combinatie met bestaande Web Animations en CSS Animations API's, wat betekent dat ze profiteren van de voordelen van deze API's. Dat omvat de mogelijkheid om deze animaties uit de hoofdlijn te laten lopen. Ja, lees het goed: je kunt nu zijdezachte animaties krijgen, aangedreven door scrollen, die van de hoofdlijn aflopen, met slechts een paar regels extra code. Wat is er niet leuk aan?!

Voor een uitgebreide, diepgaande handleiding over het maken van deze scroll-gestuurde animaties, verwijzen wij u naar dit artikel over scroll-gestuurde animaties .

Overgangen bekijken

Met de View Transition API kunt u 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 u kunt ook bepalen hoe afzonderlijke delen van de pagina moeten overgaan.

View Transitions kunnen worden gebruikt als een progressieve verbetering: neem uw code die de DOM op welke manier dan ook bijwerkt en verpak deze in de view transition 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 geregeld 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 prachtige demo van Maxi Ferreira , blijven andere pagina-interacties, zoals het afspelen van een video, werken terwijl er een weergavetransitie plaatsvindt.

Weergaveovergangen werken momenteel met Single-Page Apps (SPA's) uit Chrome 111. Er wordt gewerkt aan ondersteuning voor apps met meerdere pagina's. Bekijk voor meer informatie onze gids met volledige weergave van overgangen om u er doorheen te loodsen.

Conclusie

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

Una Kravets

Bramus

Adam Argyle

De afgelopen maanden hebben een gouden tijdperk voor de webinterface ingeluid. Nieuwe platformmogelijkheden zijn geland met een nauwe acceptatie door meerdere browsers die meer webmogelijkheden en aanpassingsfuncties dan ooit ondersteunen.

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

• Containerquery's
• Stijlquery's
• :has() selector
• nde-van microsyntaxis
• text-wrap: balance
• initial-letter
• Dynamische viewport-eenheden
• Brede kleurruimten
• color-mix()
• Nesten
• Cascadelagen
• Scoped-stijlen
• Trigonometrische functies
• Individuele transformatie-eigenschappen
• pop-over
• anker positionering
• keuzemenu
• Discrete eigendomsovergangen
• Scrollgestuurde animaties
• Overgangen bekijken

Het nieuwe responsieve

Laten we aan de slag gaan met enkele nieuwe responsieve ontwerpmogelijkheden. Met nieuwe platformfuncties kunt u logische interfaces bouwen met componenten die eigenaar zijn van hun responsieve stijlinformatie, interfaces bouwen die gebruik maken van systeemmogelijkheden om meer native-gevoel-UI's te leveren, en de gebruiker een onderdeel laten worden van het ontwerpproces met zoekopdrachten naar gebruikersvoorkeuren voor volledige aanpasbaarheid.

Containerquery's

Containerquery's zijn onlangs stabiel geworden in alle moderne browsers. Hiermee kunt u de grootte en stijl van een ouderelement opvragen om te bepalen welke stijlen op elk van de onderliggende elementen moeten worden toegepast. Mediaquery's kunnen alleen toegang krijgen tot informatie uit de viewport en deze gebruiken, wat betekent dat ze alleen kunnen werken met een macroweergave van een paginalay-out. Containerquery's zijn daarentegen een nauwkeuriger hulpmiddel dat een willekeurig aantal lay-outs of lay-outs binnen lay-outs kan ondersteunen.

In het volgende voorbeeld van de inbox zijn het primaire postvak IN en de zijbalk Favorieten beide containers. De e-mails daarin 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, dat alleen in verschillende weergaven verschijnt

Omdat we een containerquery hebben, zijn de stijlen van deze componenten dynamisch. Als u het paginaformaat en de lay-out aanpast, reageren de componenten op hun individueel toegewezen ruimte. De zijbalk wordt een bovenste balk met meer ruimte en we zien dat de lay-out meer op de primaire inbox lijkt. Als er minder ruimte is, worden ze allebei in een gecomprimeerd formaat 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 weerkenmerken gebruikt die zijn opgeslagen in aangepaste eigenschapswaarden, zoals regen, zonnig en bewolkt, om de achtergrond en het indicatorpictogram van de kaart vorm te geven.

@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 hebben om te bepalen of er een aangepaste eigenschapswaarde bestaat en herhaling van de code te verminderen. Momenteel wordt er gesproken over bereikquery's 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 procentuele waarde voor de kans op regen of bewolking.

U kunt meer leren en meer demo's bekijken in onze blogpost over stijlquery's .

:has()

Over krachtige, dynamische functies gesproken: de :has() selector is een van de krachtigste nieuwe CSS-mogelijkheden die in moderne browsers te vinden zijn. Met :has() kunt u stijlen toepassen door te controleren of een ouderelement de aanwezigheid van specifieke onderliggende elementen bevat, of dat deze onderliggende elementen een specifieke status hebben. Dit betekent dat we nu in wezen een bovenliggende selector hebben.

Voortbouwend op het voorbeeld van de containerquery kunt u :has() gebruiken om de componenten nog dynamischer te maken. Daarin 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 bovenliggende selectie. Je kunt ook eventuele kinderen binnen de ouder stylen. De titel is bijvoorbeeld vetgedrukt als het item het sterelement bevat. Dit wordt bereikt met .item:has(.star) .title . Door de :has() selector te gebruiken, krijgt u toegang tot bovenliggende elementen, onderliggende elementen en zelfs broers en zussen, waardoor dit een zeer flexibele API is, waarbij elke dag nieuwe gebruiksscenario's opduiken.

Lees meer en ontdek nog meer demo's, bekijk deze blogpost over :has() .

n-de syntaxis

Het webplatform beschikt nu over een geavanceerdere selectie van n-de kinderen. De geavanceerde syntaxis van n-de kind geeft een nieuw trefwoord ("of"), waarmee u de bestaande microsyntaxis van An+B kunt gebruiken, met een specifiekere subset waarin u kunt zoeken.

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

Verken deze functie verder in ons artikel over nth-of-syntaxis .

text-wrap: balance

Selectors en stijlquery's zijn niet de enige plaatsen waar we logica in onze stijlen kunnen inbedden; typografie is een andere. Vanaf Chrome 114 kun je tekstomloopbalancering gebruiken voor koppen, met behulp van de eigenschap text-wrap met de waarde balance .

Om de tekst in evenwicht te brengen, voert de browser effectief een binaire zoekopdracht uit voor de kleinste breedte, zonder dat er extra regels ontstaan, en stopt bij één CSS-pixel (niet de weergavepixel). Om de 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 van webtypografie is initial-letter . Deze CSS-eigenschap geeft u betere controle over de stijl van sierhoofdletters.

U gebruikt initial-letter op het :first-letter pseudo-element om het volgende op te geven: De grootte van de letter, gebaseerd op het aantal regels dat deze in beslag neemt. De blokverschuiving van de letter, of 'zink', voor waar de letter zal komen te staan.

Lees hier meer over het gebruik van intial-letter .

Dynamische viewport-eenheden

Een veelvoorkomend probleem waar webontwikkelaars tegenwoordig mee te maken hebben, is de nauwkeurige en consistente full-viewport-grootte, vooral op mobiele apparaten. Als ontwikkelaar wil je 100vh (100% van de viewport-hoogte) betekent “zo groot zijn als de viewport”, maar de vh -eenheid houdt geen rekening met zaken als het intrekken van navigatiebalken op mobiele apparaten, dus soms wordt het te lang en veroorzaakt scrollen.

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

Dynamische viewport-eenheden veranderen in waarde wanneer de extra dynamische browserwerkbalken, zoals het adres bovenaan of de tabbalk onderaan, zichtbaar zijn en wanneer ze dat niet zijn.

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

Brede kleurruimten

Een andere nieuwe belangrijke toevoeging aan het webplatform zijn kleurruimten met een breed spectrum. Voordat kleuren met een breed kleurengamma beschikbaar kwamen op het webplatform, kon je een foto maken met levendige kleuren, zichtbaar op moderne apparaten, maar je kon geen knop, tekstkleur of achtergrond krijgen die bij die levendige waarden paste.

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

En je kunt in DevTools meteen zien hoe het kleurbereik is uitgebreid, waarbij die witte lijn aangeeft waar het srgb-bereik eindigt en waar het bredere kleurbereik begint.

Er zijn nog veel meer gereedschappen beschikbaar voor kleur! Mis ook niet alle geweldige gradiëntverbeteringen. Er is zelfs een gloednieuw hulpmiddel dat Adam Argyle heeft gebouwd om u te helpen bij het uitproberen van een nieuwe webkleurkiezer en verloopbouwer, probeer het eens op verloop.style .

kleurenmix()

Uitbreiden op uitgebreide kleurruimten is de color-mix() functie. Deze functie ondersteunt het mengen van twee kleurwaarden om nieuwe waarden te creëren op basis van de kanalen van de kleuren die worden gemengd. De kleurruimte waarin u mengt, heeft invloed op de resultaten. Werken in een meer perceptuele kleurruimte zoals oklch zal een ander kleurbereik doorlopen dan zoiets 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 lang gevraagde mogelijkheid: de mogelijkheid om ondoorzichtige kleurwaarden te behouden en er tegelijkertijd enige transparantie aan toe te voegen. Nu kunt u de kleurvariabelen van uw merk gebruiken terwijl u variaties van die kleuren met verschillende dekkingen maakt. De manier om dit te doen is door een kleur te mengen met transparant. Wanneer u uw merkkleur blauw mengt met 10% transparant, krijgt u een 90% dekkende merkkleur. U ziet hoe u hiermee snel kleursystemen kunt bouwen.

Je kunt dit vandaag in actie zien in Chrome DevTools met een heel mooi voorbeeld van een Venn-diagrampictogram in het stijlvenster .

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

CSS-fundamenten

Het bouwen van nieuwe mogelijkheden die duidelijke gebruikersvoordelen opleveren, is een onderdeel van de vergelijking, maar veel van de functies die in Chrome terechtkomen, hebben tot doel de ontwikkelaarservaring te verbeteren en een betrouwbaardere en georganiseerde CSS-architectuur te creëren. Deze functies omvatten CSS-nesten, cascadelagen, scoped-stijlen, trigonometrische functies en individuele transformatie-eigenschappen.

Nesten

CSS-nesten, iets waar mensen dol op zijn bij Sass, en al jaren een van de meest gevraagde CSS-ontwikkelaars, komt eindelijk op het webplatform terecht. Door te nesten kunnen ontwikkelaars in een beknopter, gegroepeerd formaat schrijven dat redundantie vermindert.

.card {}
.card:hover {}

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

  }
}

U kunt ook Mediaquery's nesten, wat ook betekent dat u Containerquery's kunt nesten. In het volgende voorbeeld wordt een kaart gewijzigd van een staande lay-out naar een liggende lay-out als er voldoende breedte in de container zit:

.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 eenvoudig toe als aan de voorwaarden is voldaan.

Bekijk ons ​​bericht over CSS-nesten voor meer informatie en voorbeelden.

Cascadelagen

Een ander pijnpunt voor ontwikkelaars dat we hebben geïdentificeerd, is het zorgen voor consistentie waarin stijlen de overhand krijgen op andere, en een onderdeel van het oplossen hiervan is het hebben van betere controle over de CSS-cascade.

Cascadelagen lossen dit op door gebruikers controle te geven over welke lagen een hogere prioriteit hebben dan andere, wat een meer verfijnde controle betekent over wanneer uw stijlen worden toegepast.

Lees in dit artikel meer over het gebruik van cascadelagen.

Scope-CSS

Met CSS-scoped-stijlen kunnen ontwikkelaars de grenzen specificeren waarvoor specifieke stijlen van toepassing zijn, waardoor in essentie een native naamruimte in CSS ontstaat. Voorheen vertrouwden ontwikkelaars op scripting van derden om klassen te hernoemen, of op specifieke naamgevingsconventies om stijlconflicten te voorkomen, maar binnenkort kun je @scope gebruiken.

Hier richten we een .title element op een .card . Dit voorkomt dat dat title-element in conflict komt met andere .title -elementen op de pagina, zoals de titel van een blogpost of een andere kop.

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

Je kunt @scope met scopinglimieten samen met @layer zien in deze live demo:

Lees meer over @scope in de css-cascade-6-specificatie .

Trigonometrische functies

Een ander stukje nieuw CSS-loodgieterswerk zijn de trigonometrische functies die worden toegevoegd aan de bestaande CSS-wiskundige functies. Deze functies zijn nu stabiel in alle moderne browsers en stellen u in staat 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 de functies sin() en cos() .

In de onderstaande demo draaien de stippen rond een centraal punt. In plaats van elke stip rond zijn eigen middelpunt te draaien en deze vervolgens naar buiten te verplaatsen, wordt elke stip op de X- en Y-assen vertaald. De afstanden op de X- en Y-as worden bepaald door rekening te houden met de cos() en respectievelijk de sin() van de --angle .

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

Individuele transformatie-eigenschappen

De ergonomie van ontwikkelaars blijft verbeteren met individuele transformatiefuncties. Sinds de laatste keer dat we I/O hielden, zijn individuele transformaties stabiel gebleven in alle moderne browsers.

In het verleden vertrouwde u op de transformatiefunctie om subfuncties toe te passen om een ​​UI-element te schalen, roteren en vertalen. Dit bracht veel herhaling met zich mee, en was vooral frustrerend bij het toepassen van meerdere transformaties op verschillende tijdstippen in de animatie.

.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 verwerken 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 vertaling, rotatie of schaal gelijktijdig plaatsvinden met verschillende veranderingssnelheden op verschillende tijdstippen tijdens de animatie.

Zie dit bericht over individuele transformatiefuncties voor meer informatie.

Aanpasbare componenten

Om ervoor te zorgen dat we een aantal van de belangrijkste behoeften van ontwikkelaars via het webplatform kunnen vervullen, werken we samen met de OpenUI-communitygroep en hebben we om te beginnen drie oplossingen geïdentificeerd:

1. Ingebouwde pop-upfunctionaliteit met gebeurtenishandlers, 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 aanpasbare vervolgkeuzemenucomponent, voor als u inhoud binnen een selectie wilt opmaken.

Pop-over

De popover-API geeft elementen ingebouwde magie voor browserondersteuning, zoals:

• Ondersteuning voor toplaag, zodat u z-index niet hoeft te beheren. Wanneer u een popover of dialoogvenster opent, promoveert u dat element naar een speciale laag bovenaan de pagina.
• Light-dismiss-gedrag is gratis in auto popovers, dus wanneer u buiten een element klikt, wordt de popover gesloten, verwijderd uit de toegankelijkheidsstructuur en wordt de focus correct beheerd.
• Standaardtoegankelijkheid voor het bindweefsel van het doel van de popover en de popover zelf.

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

De DOM-structuur voor popover is declaratief en kan net zo duidelijk worden geschreven als het geven van een id en het popover attribuut aan uw popover-element. Vervolgens synchroniseert u die ID met het element dat de popover zou openen, 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 zal andere popovers geforceerd sluiten wanneer deze worden geopend, krijgt focus wanneer deze wordt geopend en kan licht uitsluiten. Omgekeerd forceren popover=manual -elementen geen enkel ander elementtype geforceerd, krijgen ze niet onmiddellijk de focus en worden ze niet licht gedimd. Ze sluiten via een schakelaar of een andere sluitactie.

De meest actuele documentatie over popovers is momenteel te vinden op MDN .

Anker positionering

Popovers worden ook vaak gebruikt in elementen zoals dialoogvensters en tooltips, die doorgaans aan specifieke elementen moeten worden verankerd. Neem dit voorbeeld van een gebeurtenis. Wanneer u op een kalendergebeurtenis klikt, verschijnt er een dialoogvenster naast de gebeurtenis waarop u hebt geklikt. Het kalenderitem is het anker en de popover is het dialoogvenster waarin de details van de afspraak worden weergegeven.

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 plaatsen. Gebruik vervolgens bestaande positioneringswaarden om de rest van de plaatsingsstijlen toe te passen.

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

Om dit op te lossen, bevat de ankerpositionerings-API reserveposities die u kunt aanpassen. In het volgende voorbeeld wordt een terugvalpositie gemaakt met de naam 'boven-dan-onder'. De browser zal eerst proberen de tooltip bovenaan te plaatsen, en als dat niet in de viewport past, plaatst de browser deze onder het verankeringselement onderaan.

.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 deze blogpost .

<selectmenu>

Met zowel popover- als ankerpositionering kunt u volledig aanpasbare selectiemenu's bouwen. De gemeenschapsgroep OpenUI 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 dat meest linkse selectmenu voorbeeld te bouwen, met gekleurde stippen die overeenkomen met de kleur die binnen een kalendergebeurtenis wordt weergegeven, kunt u dit 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 eigendomsovergangen

Om ervoor te zorgen dat dit alles popovers soepel in en uit kan laten gaan, heeft het web een manier nodig om discrete eigenschappen te animeren. Dit zijn eigenschappen die in het verleden doorgaans niet konden worden geanimeerd, zoals animeren van en naar de bovenste laag en animeren van en naar display: none .

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

De volgende popover-demo animeert popovers in en uit met behulp van :popover-open voor de open-status, @starting-style voor de before-open-status, en past een transformatiewaarde rechtstreeks toe op het element voor de after-open-is-closed-status . Om dit allemaal te laten werken met weergave, moet het als volgt aan de transition eigenschap worden toegevoegd:

.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

Dat brengt ons bij interacties, de laatste stop van deze rondleiding door de web-UI-functies.

We hadden het al over het animeren van discrete eigenschappen, maar er zijn ook een aantal echt opwindende API's in Chrome rond scrollgestuurde animaties en weergaveovergangen

Scrollgestuurde animaties

Met scrollgestuurde animaties kunt u het afspelen van een animatie regelen op basis van de scrollpositie van een scrollcontainer. Dit betekent dat terwijl u omhoog of omlaag scrolt, de animatie vooruit of achteruit beweegt. Bovendien kunt u met scrollgestuurde animaties ook een animatie besturen op basis van de positie van een element binnen zijn scrollcontainer. Hiermee kunt u interessante effecten creëren, zoals een parallax-achtergrondafbeelding, schuifbalken voor de voortgang 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.

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

Deze nieuwe API's werken in combinatie met bestaande Web Animations en CSS Animations API's, wat betekent dat ze profiteren van de voordelen van deze API's. Dat omvat de mogelijkheid om deze animaties uit de hoofdlijn te laten lopen. Ja, lees het goed: je kunt nu zijdezachte animaties krijgen, aangedreven door scrollen, die van de hoofdlijn aflopen, met slechts een paar regels extra code. Wat is er niet leuk aan?!

Voor een uitgebreide, diepgaande handleiding over het maken van deze scroll-gestuurde animaties, verwijzen wij u naar dit artikel over scroll-gestuurde animaties .

Overgangen bekijken

Met de View Transition API kunt u 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 u kunt ook bepalen hoe afzonderlijke delen van de pagina moeten overgaan.

View Transitions kunnen worden gebruikt als een progressieve verbetering: neem uw code die de DOM op welke manier dan ook bijwerkt en verpak deze in de view transition 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 geregeld 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 prachtige demo van Maxi Ferreira , blijven andere pagina-interacties, zoals het afspelen van een video, werken terwijl er een weergavetransitie plaatsvindt.

Weergaveovergangen werken momenteel met Single-Page Apps (SPA's) uit Chrome 111. Er wordt gewerkt aan ondersteuning voor apps met meerdere pagina's. Bekijk voor meer informatie onze gids met volledige weergave van overgangen om u er doorheen te loodsen.

Conclusie

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