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 web-UI ingeluid. Nieuwe platformfunctionaliteiten zijn geïntroduceerd met brede cross-browserondersteuning, waardoor meer webmogelijkheden en aanpassingsopties beschikbaar zijn dan ooit tevoren.

Hieronder vind je 20 van de meest opwindende en impactvolle functies die onlangs zijn uitgebracht of binnenkort verschijnen:

• Containerquery's
• Stijlquery's
• :has() selector
• n-de-van microsyntaxis
• text-wrap: balance
• initial-letter
• Dynamische weergave-eenheden
• Breed kleurenspectrum
• color-mix()
• Nestelen
• Cascade-lagen
• Stijlen met een beperkt bereik
• Trigonometrische functies
• Individuele transformatie-eigenschappen
• popover
• ankerpositionering
• selectmenu
• Discrete eigenschapsovergangen
• Scrollgestuurde animaties
• Overgangen bekijken

De nieuwe responsieve

Laten we beginnen met een aantal nieuwe mogelijkheden voor responsief ontwerp. Nieuwe platformfuncties stellen u in staat om logische interfaces te bouwen met componenten die hun eigen responsieve stylinginformatie beheren, interfaces te creëren die gebruikmaken van systeemfunctionaliteiten voor een meer native-achtige gebruikersinterface, en de gebruiker te betrekken bij het ontwerpproces met behulp van query's voor gebruikersvoorkeuren voor volledige aanpasbaarheid.

Containerquery's

Browser Support

• 105
• 105
• 110
• 16

Source

Containerqueries zijn sinds kort stabiel in alle moderne browsers. Ze stellen je in staat om de grootte en stijl van een ouderelement op te vragen om te bepalen welke stijlen op de onderliggende elementen moeten worden toegepast. Mediaqueries hebben alleen toegang tot informatie uit de viewport en kunnen deze dus alleen gebruiken op een macro-weergave van een pagina-indeling. Containerqueries daarentegen zijn een preciezer hulpmiddel dat een willekeurig aantal lay-outs of lay-outs binnen lay-outs kan ondersteunen.

In het volgende voorbeeld van een inbox zijn zowel de primaire inbox als de zijbalk met favorieten 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, alleen verschijnt het in verschillende weergaven.

Omdat we een containerquery gebruiken, zijn de stijlen van deze componenten dynamisch. Als je de paginagrootte en -indeling aanpast, reageren de componenten op de beschikbare ruimte. De zijbalk wordt een bovenbalk met meer ruimte en de lay-out lijkt dan meer op de primaire inbox. Bij minder ruimte worden beide elementen in een compactere vorm weergegeven.

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

Stijlquery's

Browser Support

• 111
• 111
• x
• 18

De specificatie voor containerquery's maakt het ook mogelijk om de stijlwaarden van een bovenliggende container op te vragen. Dit is momenteel gedeeltelijk geïmplementeerd in Chrome 111, waar je CSS-custom properties kunt gebruiken om containerstijlen toe te passen.

Het volgende voorbeeld gebruikt weerskenmerken die zijn opgeslagen in aangepaste eigenschapswaarden, zoals regen, zon en bewolking, 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 een aangepaste eigenschapswaarde bestaat en codeherhaling te verminderen. Momenteel worden er ook 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 behulp van een percentage voor de kans op regen of bewolking.

Meer informatie en voorbeelden vind je in onze blogpost over stijlqueries .

:has()

Browser Support

• 105
• 105
• 121
• 15.4

Source

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 ouderelement specifieke kindelementen bevat, of dat die kindelementen zich in een bepaalde staat bevinden. Dit betekent dat we in feite nu een ouderselector hebben.

Voortbouwend op het voorbeeld met de containerquery, kun je :has() gebruiken om de componenten nog dynamischer te maken. Zo 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 het selecteren van het bovenliggende element. Je kunt ook alle onderliggende elementen binnen het bovenliggende element stylen. De titel wordt bijvoorbeeld vetgedrukt wanneer het item het ster-element bevat. Dit bereik je met .item:has(.star) .title . Door de :has() selector te gebruiken, krijg je toegang tot bovenliggende elementen, onderliggende elementen en zelfs elementen op hetzelfde niveau, waardoor dit een zeer flexibele API is met steeds nieuwe toepassingsmogelijkheden.

Opmerking: Om prestatievertragingen bij het renderen in grote DOM-structuren te voorkomen, raden we aan deze selector zo specifiek mogelijk te gebruiken. Het gebruik van :has() om te controleren op overeenkomsten in het hoofd-HTML-element is bijvoorbeeld trager dan het controleren op overeenkomsten in een navigatiebalk of een kaart-element met een kleinere structuur.

Leer meer en bekijk nog meer demo's in dit blogbericht over :has() .

n-de-van syntaxis

Browser Support

• 111
• 111
• 113
• 9

Het webplatform biedt nu een geavanceerdere selectie van het n-de kind. De geavanceerde syntaxis voor het n-de kind introduceert een nieuw trefwoord ("van"), waarmee u de bestaande microsyntaxis An+B kunt gebruiken, maar met een specifiekere subset waarbinnen u kunt zoeken.

Als je de reguliere `nth-child` functie gebruikt, zoals :nth-child(2) op de klasse `special`, selecteert de browser het element met de klasse `special` dat tevens het tweede kindelement is. Dit in tegenstelling tot :nth-child(2 of .special) waarbij eerst alle .special elementen worden gefilterd en vervolgens het tweede element uit die lijst wordt gekozen.

Verken deze functie verder in ons artikel over de nth-of-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 kun je tekstterugloop balanceren voor koppen, door de eigenschap text-wrap met de waarde ` balance te gebruiken.

Probeer een demo

Om de tekst in balans te brengen, voert de browser in feite een binaire zoekopdracht uit naar de kleinste breedte die geen extra regels veroorzaakt, en 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 regelbreedte.

Probeer een demo

Let op: Hoewel dit een geweldige, vooruitstrevende verbetering is die je vandaag nog kunt uitproberen, is het belangrijk om te weten dat deze API slechts werkt voor maximaal 4 regels tekst. Het is dus ideaal voor titels en koppen, maar waarschijnlijk niet geschikt voor langere teksten.

Lees er meer over in dit artikel .

initial-letter

Browser Support

• 110
• 110
• x
• 9

Source

Een andere mooie verbetering voor webtypografie is initial-letter . Deze CSS-eigenschap geeft je meer controle over de styling van inspringende beginletters.

Je gebruikt initial-letter op het pseudo-element :first-letter om het volgende te specificeren: De grootte van de letter, gebaseerd op het aantal regels dat deze inneemt. De blokverschuiving, ofwel de "uitlijning", van de letter, voor de positie waar de letter komt te staan.

Lees hier meer over het gebruik van intial-letter .

Dynamische weergave-eenheden

Browser Support

• 108
• 108
• 101
• 15.4

Een veelvoorkomend probleem voor webontwikkelaars is het nauwkeurig en consistent bepalen van de volledige schermhoogte, met name op mobiele apparaten. Als ontwikkelaar wil je dat 100vh (100% van de schermhoogte) ook echt betekent "net zo hoog als het scherm", maar de eenheid vh houdt geen rekening met zaken zoals intrekbare navigatiebalken op mobiele apparaten. Daardoor kan het soms te lang uitvallen en scrollen veroorzaken.

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 viewportgrootte vertegenwoordigen. - Grote viewport hoogte en breedte ( lvh en lvw ), die de grootste grootte vertegenwoordigen. - Dynamische viewport hoogte en breedte ( dvh en dvw ).

De waarde van dynamische viewport-eenheden verandert wanneer de extra dynamische browsertoolbars, zoals de adresbalk bovenaan of de tabbalk onderaan, zichtbaar zijn en wanneer ze niet zichtbaar zijn.

Let op: de dynamische viewport-eenheden houden geen rekening met de aanwezigheid van het virtuele toetsenbord. Vanaf Chrome 108 kunt u een meta-tag instellen om dit gedrag te wijzigen .

Lees voor meer informatie over deze nieuwe units het artikel 'De grote, kleine en dynamische viewport-units' .

Breed kleurenspectrum

Browser Support

• 111
• 111
• 113
• 15.4

Source

Een andere belangrijke nieuwe toevoeging aan het webplatform zijn kleurenspectra met een breed kleurenbereik. Voordat kleurenspectra met een breed kleurenbereik beschikbaar waren op het webplatform, kon je weliswaar een foto maken met levendige kleuren die op moderne apparaten te bekijken waren, maar je kon de kleur van een knop, tekst of achtergrond niet aanpassen aan diezelfde levendige waarden.

Er wordt een reeks afbeeldingen getoond die overgaan van een breed naar een smal kleurenspectrum, waarmee de levendigheid van kleuren en de effecten daarvan worden geïllustreerd.
Probeer het zelf eens.

Maar nu hebben we een reeks nieuwe kleurruimtes op het webplatform, waaronder REC2020, P3, XYZ, LAB, OKLAB, LCH en OKLCH. Maak kennis met de nieuwe webkleurruimtes en meer in de HD-kleurgids .

En in DevTools zie je meteen hoe het kleurbereik is uitgebreid, met die witte lijn die aangeeft waar het sRGB-bereik eindigt en waar het bredere kleurbereik begint.

Er zijn nog veel meer tools beschikbaar voor kleur! Mis ook alle geweldige verbeteringen aan verlopen niet. Adam Argyle heeft zelfs een gloednieuwe tool ontwikkeld waarmee je een nieuwe kleurenkiezer en verloopbouwer voor het web kunt uitproberen. Bekijk hem op gradient.style .

kleurmix()

Browser Support

• 111
• 111
• 113
• 16.2

Source

Een uitbreiding op uitgebreide kleurruimtes is de functie color-mix() . 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 je mengt, beïnvloedt het resultaat. Werken in een meer perceptuele kleurruimte zoals oklch zal een ander kleurbereik opleveren dan bijvoorbeeld 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);

Probeer de demo

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

Je kunt dit vandaag al in actie zien in Chrome DevTools met een erg mooi voorbeeld van een Venn-diagram in het stijlenpaneel .

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

CSS-grondbeginselen

Het ontwikkelen van nieuwe functionaliteiten die duidelijke voordelen voor de gebruiker opleveren, is een deel van het verhaal, maar veel van de functies die in Chrome worden geïntroduceerd, hebben als doel de ontwikkelaarservaring te verbeteren en een betrouwbaardere en beter georganiseerde CSS-architectuur te creëren. Deze functies omvatten CSS-nesting, cascade-lagen, scoped styles, trigonometrische functies en individuele transformatie-eigenschappen.

Nestelen

Browser Support

• 120
• 120
• 117
• 17.2

Source

CSS-nesting, iets wat veel mensen waarderen aan Sass en al jaren een van de meest gevraagde functies door CSS-ontwikkelaars, is eindelijk beschikbaar voor het webplatform. Nesting stelt ontwikkelaars in staat om code op een beknoptere, gegroepeerde manier te schrijven, waardoor redundantie wordt verminderd.

.card {}
.card:hover {}

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

  }
}

Je kunt ook Media Queries nesten, wat betekent dat je ook Container Queries kunt nesten. In het volgende voorbeeld wordt een kaart van een portretindeling naar een landschapsindeling gewijzigd als de container voldoende breedte heeft:

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

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

De lay-out wordt aangepast naar flex wanneer de container minimaal 480px aan inline-ruimte beschikbaar heeft. De browser past de nieuwe weergavestijl automatisch toe zodra aan de voorwaarden is voldaan.

Voor meer informatie en voorbeelden, bekijk ons ​​artikel over geneste CSS-elementen .

Cascade-lagen

Browser Support

• 99
• 99
• 97
• 15.4

Source

Een ander pijnpunt voor ontwikkelaars dat we hebben vastgesteld, is het waarborgen van consistentie in welke stijlen voorrang krijgen boven andere. Een deel van de oplossing hiervoor is 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 betekent dat je nauwkeuriger kunt bepalen wanneer je stijlen worden toegepast.

Bekijk het project op Codepen.

Lees in dit artikel meer over het gebruik van cascade-lagen.

Scoped CSS

Browser Support

• 118
• 118
• 
• 17.4

Source

Met CSS-scoped stijlen kunnen ontwikkelaars de grenzen specificeren waarbinnen specifieke stijlen van toepassing zijn, waardoor er in feite een native naamgevingssysteem in CSS ontstaat. 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 beperken we het bereik van een .title element tot een .card . Dit voorkomt dat het `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 bereikbeperkingen samen met @layer bekijken:

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

Trigonometrische functies

Browser Support

• 111
• 111
• 108
• 15.4

Source

Een andere nieuwe toevoeging aan de CSS-functionaliteit zijn de trigonometrische functies die zijn toegevoegd aan de bestaande wiskundige functies van CSS. Deze functies zijn nu stabiel in alle moderne browsers en stellen je in staat om meer organische lay-outs te creëren op het webplatform. Een goed voorbeeld hiervan is deze radiale menulayout, die nu ontworpen en geanimeerd kan worden 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 roteren en vervolgens naar buiten te bewegen, wordt elke stip langs de X- en Y-as verschoven. De afstanden langs de X- en Y-as worden bepaald door rekening te houden met respectievelijk de cos() en de sin() van de --angle .

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

Individuele transformatie-eigenschappen

Browser Support

• 104
• 104
• 72
• 14.1

Source

De gebruiksvriendelijkheid voor ontwikkelaars blijft verbeteren dankzij individuele transformatiefuncties. Sinds onze laatste I/O-bijeenkomst zijn individuele transformaties stabiel geworden in alle moderne browsers.

In het verleden vertrouwde je op de transformatiefunctie om subfuncties toe te passen voor het schalen, roteren en verschuiven van een UI-element. Dit bracht veel herhaling met zich mee en was vooral frustrerend wanneer je meerdere transformaties op verschillende momenten in de animatie moest toepassen.

.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 kun je al deze details in je CSS-animaties verwerken door de verschillende transformatietypen 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 of schaal gelijktijdig plaatsvinden met verschillende snelheden en op verschillende momenten tijdens de animatie.

Zie dit bericht over individuele transformatiefuncties voor meer informatie.

Aanpasbare componenten

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

1. Ingebouwde pop-upfunctionaliteit met gebeurtenisafhandelaars, een declaratieve DOM-structuur en toegankelijke standaardwaarden.
2. Een CSS API om twee elementen aan elkaar te koppelen, zodat ankerpositionering mogelijk wordt.
3. Een aanpasbaar dropdownmenu-component, voor wanneer je de inhoud van een selectieveld wilt stylen.

Popover

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

• Ondersteuning voor de bovenste laag, zodat u z-index niet hoeft te beheren. Wanneer u een pop-upvenster of dialoogvenster opent, wordt dat element naar een speciale laag bovenop de pagina verplaatst.
• Gratis auto pop-ups met een lichte sluitingsfunctie: wanneer u buiten een element klikt, wordt de pop-up gesloten, uit de toegankelijkheidsstructuur verwijderd en de focus correct beheerd.
• Standaard toegankelijkheid voor het bindweefsel van het doel van de popover 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 een popover is declaratief en kan heel eenvoudig worden beschreven door het popover-element een id en het attribuut popover te geven. Vervolgens koppel je die id aan het element dat de popover opent, zoals een knop met het attribuut popovertarget .

<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 wordt geopend, krijgt de focus wanneer het wordt geopend en kan met een lichte sluiting worden weggevaagd. Elementen popover=manual sluiten daarentegen geen andere elementen, krijgen niet direct de focus en kunnen niet met een lichte sluiting worden weggevaagd. Ze sluiten via een toggle of een andere sluitactie.

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

Ankerpositionering

Popovers worden ook vaak gebruikt in elementen zoals dialoogvensters en tooltips, die doorgaans aan specifieke elementen moeten worden verankerd. Neem dit voorbeeld van een evenement. Wanneer u op een agenda-item klikt, verschijnt er een dialoogvenster in de buurt van 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.

Met de functie anchor() kun je een gecentreerde tooltip maken. Gebruik hiervoor de breedte van het anker om de tooltip op 50% van de x-positie van het anker te positioneren. Gebruik vervolgens de bestaande positioneringswaarden om de overige plaatsingsstijlen toe te passen.

Maar wat gebeurt er als de popover niet in het zichtbare gedeelte van het scherm past, afhankelijk van hoe je hem hebt gepositioneerd?

Om dit op te lossen, bevat de API voor ankerpositionering terugvalposities die u kunt aanpassen. Het volgende voorbeeld creëert een terugvalpositie genaamd "top-then-bottom". De browser zal eerst proberen de tooltip bovenaan te positioneren, en als dat niet in het zichtbare gedeelte van het scherm past, zal de browser deze onder het ankerelement, onderaan, plaatsen.

.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);
  }
}

Let op: je kunt hier heel gedetailleerd te werk gaan, wat omslachtig kan worden, maar het biedt ook de mogelijkheid voor bibliotheken en ontwerpsystemen om de positioneringslogica te schrijven, die je vervolgens overal kunt hergebruiken.

Lees meer over ankerpositionering in dit blogbericht .

<selectmenu>

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

Om dat voorbeeld selectmenu helemaal links te maken, met gekleurde stippen die overeenkomen met de kleur die in een agenda-item zou worden 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 ervoor te zorgen dat pop-ups soepel in- en uitklappen, heeft het web een manier nodig om afzonderlijke eigenschappen te animeren. Dit zijn eigenschappen die in het verleden doorgaans niet geanimeerd konden worden, zoals het animeren van en naar de bovenste laag en het animeren van en naar display: none .

Als onderdeel van de inspanningen om vloeiende overgangen mogelijk te maken voor pop-ups, selectiemenu's en zelfs bestaande elementen zoals dialoogvensters of aangepaste componenten, implementeren browsers nieuwe infrastructuur om deze animaties te ondersteunen.

De volgende popover-demo animeert het openen en sluiten van popovers met behulp van :popover-open voor de geopende staat, @starting-style voor de staat vóór het openen, en past een transformatiewaarde direct toe op het element voor de staat nadat het geopend en gesloten is. Om dit allemaal te laten werken met `display`, moet het worden toegevoegd aan de transition eigenschap, zoals hieronder:

.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

Dit brengt ons bij interacties, de laatste halte op deze rondreis langs web-UI-functies.

We hebben het al gehad over het animeren van afzonderlijke eigenschappen, maar er komen ook een aantal echt interessante API's naar Chrome voor scroll-gestuurde animaties en weergaveovergangen.

Scrollgestuurde animaties

Browser Support

• 115
• 115
• 
• 26

Source

Met scrollgestuurde animaties kun je de weergave van een animatie sturen op basis van de scrollpositie van een scrollcontainer. Dit betekent dat de animatie vooruit of achteruit beweegt wanneer je omhoog of omlaag scrollt. Daarnaast kun je met scrollgestuurde animaties ook een animatie sturen op basis van de positie van een element binnen de scrollcontainer. Hierdoor kun je interessante effecten creëren, zoals een parallax-achtergrondafbeelding, voortgangsbalken en afbeeldingen die pas zichtbaar worden als ze in beeld komen.

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

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

Deze nieuwe API's werken samen met de 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 buiten de hoofdthread uit te voeren. Ja, u leest het goed: u kunt nu vloeiende animaties, aangestuurd door scrollen, buiten de hoofdthread laten draaien met slechts een paar regels extra code. Wat is daar nou niet leuk aan?!

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

Overgangen bekijken

Browser Support

• 111
• 111
• 144
• 18

Source

Met de View Transition API kun je eenvoudig de DOM in één stap wijzigen en tegelijkertijd een geanimeerde overgang tussen twee staten creëren. Dit kunnen simpele fades tussen weergaven zijn, maar je kunt ook bepalen hoe individuele onderdelen van de pagina moeten overgaan.

View Transitions kunnen worden gebruikt als een progressieve verbetering: neem je code die de DOM bijwerkt, ongeacht de methode, en wikkel 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 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 Maxi Ferreira in deze fantastische demo laat zien, blijven andere pagina-interacties, zoals het afspelen van een video, gewoon werken terwijl er een weergaveovergang plaatsvindt.

Weergaveovergangen werken momenteel met Single-Page Apps (SPA's) vanaf Chrome 111. Ondersteuning voor apps met meerdere pagina's wordt momenteel ontwikkeld. Raadpleeg onze volledige handleiding voor weergaveovergangen voor meer informatie.

Conclusie

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