Het nieuwste op het gebied van CSS en web-UI: I/O 2024 samenvatting

Una Kravets

Het webplatform bruist van de innovatie, met CSS en web UI-functies die vooroplopen in deze spannende evolutie. We leven in een gouden tijdperk voor web UI, met nieuwe CSS-functies die in een tempo verschijnen dat we nog nooit eerder hebben gezien en die een wereld aan mogelijkheden openen voor het creëren van prachtige en boeiende webervaringen. Deze blogpost duikt diep in de huidige stand van zaken van CSS en verkent enkele van de meest baanbrekende nieuwe functies die de manier waarop we webapplicaties bouwen opnieuw definiëren, live gepresenteerd op Google I/O 2024.

Nieuwe interactieve ervaringen

Een webervaring is in wezen een kwestie van vraag en antwoord tussen u en uw gebruikers. Daarom is het zo belangrijk om te investeren in hoogwaardige gebruikersinteracties. We hebben gewerkt aan een aantal echt grote verbeteringen die mogelijkheden ontsluiten die we nog nooit eerder op het web hadden voor het navigeren binnen webpagina's en tussen webpagina's.

Scroll-gestuurde animaties

Zoals de naam al aangeeft, kunt u met de API voor scroll-gestuurde animaties dynamische scroll-gebaseerde animaties maken zonder dat u afhankelijk bent van scroll-observatoren of andere zware scripts.

Maak scroll-gestuurde animaties

Net zoals tijdgebaseerde animaties op het platform werken, kun je nu de scrollvoortgang van een scroller gebruiken om een ​​animatie te starten, pauzeren en terug te draaien. Dus als je vooruit scrolt, zie je de voortgang van de animatie, en als je terug scrolt, gaat het andersom. Hiermee kun je gedeeltelijke of volledige paginabeelden maken met elementen die in en binnen de viewport animeren, ook wel scrollytelling genoemd, voor een dynamische visuele impact.

Met scroll-animaties kunt u belangrijke inhoud benadrukken, gebruikers door een verhaal leiden of gewoon een dynamisch tintje aan uw webpagina's toevoegen.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

De voorgaande code definieert een eenvoudige animatie die in de viewport verschijnt door de dekking en schaal van een afbeelding te wijzigen. De animatie wordt aangestuurd door de scrollpositie. Om dit effect te creëren, stelt u eerst de CSS-animatie in en vervolgens de animation-timeline . In dit geval volgt de view() functie met de standaardwaarden de afbeelding ten opzichte van de scrollport (die in dit geval ook de viewport is).

Het is belangrijk om rekening te houden met browserondersteuning en gebruikersvoorkeuren, vooral met het oog op toegankelijkheid. Gebruik daarom de regel @supports om te controleren of de browser scroll-gestuurde animaties ondersteunt en verpak uw scroll-gestuurde animatie in een query met gebruikersvoorkeuren, zoals @media (prefers-reduced-motion: no-preference) om de bewegingsvoorkeuren van gebruikers te respecteren. Na deze controles weet u zeker dat uw stijlen werken en dat de animatie geen problemen oplevert voor de gebruiker.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Scroll-gestuurde animaties kunnen een scrollervaring op de volledige pagina opleveren, maar ze kunnen ook subtielere animaties betekenen, zoals een headerbalk die wordt geminimaliseerd en een schaduw toont terwijl u door een webapp scrolt.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Deze demo gebruikt een aantal verschillende keyframe-animaties – de header, tekst, navigatiebalk en achtergrond – en past vervolgens de bijbehorende scroll-animatie toe op elk. Hoewel ze elk een andere animatiestijl hebben, hebben ze allemaal dezelfde animatietijdlijn, de dichtstbijzijnde scroller en hetzelfde animatiebereik – van de bovenkant van de pagina tot 150 pixels.

Prestatievoordelen van scroll-gestuurde animaties

Deze ingebouwde API vermindert de codelast die je anders zou moeten onderhouden, of het nu gaat om een ​​script dat je zelf hebt geschreven of de toevoeging van een extra afhankelijkheid van een derde partij. Het elimineert ook de noodzaak om verschillende scroll-observatoren te verzenden, wat aanzienlijke prestatievoordelen oplevert. Dit komt doordat scroll-gestuurde animaties vanuit de hoofdthread werken bij het animeren van eigenschappen die op de compositor kunnen worden geanimeerd, zoals transforms en opacity, of je de nieuwe API nu rechtstreeks in CSS gebruikt of de JavaScript-hooks.

Tokopedia heeft onlangs scroll-gestuurde animaties gebruikt om de productnavigatiebalk te laten verschijnen terwijl je scrollde. Het gebruik van deze API heeft een aantal serieuze voordelen opgeleverd, zowel voor codebeheer als voor prestaties.

"We zijn erin geslaagd om tot 80% van onze coderegels te reduceren vergeleken met het gebruik van conventionele JS-scrollgebeurtenissen en zagen dat het gemiddelde CPU-gebruik daalde van 50% naar 2% tijdens het scrollen. - Andy Wihalim, Senior Software Engineer, Tokopedia"

De toekomst van scroll-effecten

We weten dat deze effecten het web aantrekkelijker zullen maken en we denken al na over wat er nog meer gaat gebeuren. Dit omvat niet alleen de mogelijkheid om nieuwe animatietijdlijnen te gebruiken, maar ook om een ​​scrollpunt te gebruiken om de start van een animatie te activeren, zogenaamde scroll-triggered animations.

En er komen in de toekomst nog meer scrollfuncties naar browsers. De volgende demo toont een combinatie van deze toekomstige functies. Het gebruikt CSS scroll-start-target om de begindatum en -tijd in de pickers in te stellen, en de JavaScript scrollsnapchange gebeurtenis om de headerdatum bij te werken, waardoor het synchroniseren van de gegevens met de snapped-gebeurtenis kinderspel wordt.

U kunt hier ook op voortbouwen om een ​​kiezer in realtime bij te werken met de JavaScript-gebeurtenis scrollsnapchanging .

Deze specifieke functies zijn momenteel alleen in Canary achter een vlag te vinden. Ze ontgrendelen echter mogelijkheden die voorheen onmogelijk of heel moeilijk in te bouwen waren op het platform en benadrukken de toekomst van scroll-gebaseerde interactiemogelijkheden.

Om meer te leren over het gebruik van scroll-animaties, heeft ons team zojuist een nieuwe videoserie gelanceerd die je kunt vinden op het YouTube-kanaal van Chrome for Developers . Hier leer je de basisprincipes van scroll-animaties van Bramus Van Damme, inclusief hoe de functie werkt, de terminologie, verschillende manieren om effecten te creëren en hoe je effecten combineert voor rijke ervaringen. Het is een geweldige videoserie om te bekijken.

Bekijk overgangen

We hebben zojuist een krachtige nieuwe functie voor animatie binnen webpagina's besproken, maar er is ook een krachtige nieuwe functie genaamd weergaveovergangen waarmee u tussen paginaweergaven kunt animeren voor een naadloze gebruikerservaring. Weergaveovergangen introduceren een nieuw niveau van vloeiendheid op het web, waarmee u naadloze overgangen kunt maken tussen verschillende weergaven binnen één pagina, of zelfs tussen verschillende pagina's.

Airbnb is een van de bedrijven die al experimenteert met het integreren van weergaveovergangen in hun gebruikersinterface voor een soepele en naadloze webnavigatie. Dit omvat de zijbalk van de advertentie-editor, het bewerken van foto's en het toevoegen van voorzieningen, allemaal binnen een vloeiende gebruikersflow.

Hoewel deze paginavullende effecten prachtig en naadloos zijn, kunt u ook micro-interacties creëren, zoals in dit voorbeeld waarbij uw lijstweergave wordt bijgewerkt op basis van gebruikersinteractie. Dit effect kan moeiteloos worden bereikt met weergaveovergangen.

De manier om snel weergaveovergangen in uw toepassing met één pagina in te schakelen, is net zo eenvoudig als het inpakken van een interactie met document.startViewTransition . Zorg er daarnaast voor dat elk element waarin de overgang plaatsvindt een view-transition-name heeft, inline is of dynamisch wordt weergegeven met behulp van JavaScript terwijl u DOM-knooppunten maakt.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Bekijk overgangsklassen

Weergaveovergangsnamen kunnen worden gebruikt om aangepaste animaties toe te passen op uw weergaveovergang, hoewel dit lastig kan zijn bij veel elementen die overgaan. De eerste nieuwe update voor weergaveovergangen dit jaar vereenvoudigt dit probleem en introduceert de mogelijkheid om weergaveovergangsklassen te maken die kunnen worden toegepast op aangepaste animaties.

Bekijk overgangstypen

Een andere grote verbetering voor weergaveovergangen is de ondersteuning voor weergaveovergangstypen . Weergaveovergangstypen zijn handig wanneer u een ander soort visuele weergaveovergang wilt bij het animeren van en naar paginaweergaven.

Je wilt bijvoorbeeld dat een homepage op een andere manier naar een blogpagina animeert dan dat die blogpagina terug animeert naar de homepage. Of je wilt dat pagina's op verschillende manieren in- en uitwisselbaar zijn, zoals in dit voorbeeld, van links naar rechts en andersom. Voorheen was dit een rommeltje. Je kon klassen aan de DOM toevoegen om stijlen toe te passen, die je vervolgens weer moest verwijderen. View-transition-types stellen de browser in staat om oude overgangen op te schonen in plaats van dat je dit handmatig moet doen voordat je nieuwe overgangen initieert, en doen dit werk voor je.

U kunt typen instellen in uw document.startViewTransition -functie, die nu een object accepteert. update is de callback-functie die de DOM bijwerkt en types is een array met de typen.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Overgangen bij weergaven met meerdere pagina's

Wat het web zo krachtig maakt, is de veelzijdigheid ervan. Veel applicaties bestaan ​​niet uit één pagina, maar uit een robuust tapijt met meerdere pagina's. Daarom zijn we zo blij om aan te kondigen dat we ondersteuning voor cross-document weergaveovergangen leveren voor applicaties met meerdere pagina's in Chromium 126.

Deze nieuwe functieset voor meerdere documenten omvat webervaringen die zich binnen dezelfde oorsprong bevinden, zoals navigeren van web.dev naar web.dev/blog. Dit omvat echter niet navigeren tussen oorsprongen, zoals navigeren van web.dev naar blog.web.dev of naar een ander domein, zoals google.com.

Een van de belangrijkste verschillen met overgangen in dezelfde documentweergave is dat u uw overgang niet hoeft in te pakken met document.startViewTransition() . In plaats daarvan kunt u beide pagina's die betrokken zijn bij de weergaveovergang selecteren met behulp van de CSS-regel @view-transition at-rule.

@view-transition {
  navigation: auto;
}

Voor een meer aangepast effect kunt u JavaScript koppelen met de nieuwe pageswap of pagereveal -gebeurtenislisteners, die u toegang geven tot het weergave-overgangsobject.

Met pageswap kunt u nog wat last-minute wijzigingen aanbrengen op de uitgaande pagina, vlak voordat de oude snapshots worden gemaakt. Met pagereveal kunt u de nieuwe pagina aanpassen voordat deze wordt gerenderd nadat deze is geïnitialiseerd.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

In de toekomst willen we de weergaveovergangen uitbreiden, waaronder:

• Beperkte overgangen : hiermee kunt u een overgang beperken tot een DOM-subboom, waardoor de rest van de pagina interactief blijft. Ook worden meerdere weergaveovergangen tegelijkertijd ondersteund.
• Weergaveovergangen op basis van gebaren : gebruik sleep- of veegbewegingen om een ​​weergaveovergang tussen documenten te activeren en zo een meer native-achtige ervaring op het web te creëren.
• Navigatiematching in CSS : pas uw weergaveovergangen tussen documenten rechtstreeks aan in uw CSS als alternatief voor het gebruik van pageswap en pagereveal gebeurtenissen in JavaScript. Wilt u meer weten over weergaveovergangen voor toepassingen met meerdere pagina's, inclusief hoe u deze het beste kunt instellen met pre-rendering? Bekijk dan de volgende presentatie van Bramus Van Damme:

Engine-enabled UI-componenten: complexe interacties vereenvoudigen

Het bouwen van complexe webapplicaties is geen eenvoudige opgave, maar CSS en HTML evolueren om dit proces veel beter beheersbaar te maken. Nieuwe functies en verbeteringen vereenvoudigen het maken van UI-componenten, zodat u zich kunt concentreren op het creëren van geweldige gebruikerservaringen. Dit wordt bereikt door een gezamenlijke inspanning van verschillende belangrijke standaardisatie-instellingen en communitygroepen, waaronder de CSS Working Group, de Open UI Community Group en WHATWG (Web Hypertext Application Technology Working Group).

Een groot pijnpunt voor ontwikkelaars is een ogenschijnlijk eenvoudig verzoek: de mogelijkheid om dropdownmenu's (het selectie-element) te stylen. Hoewel het oppervlakkig gezien eenvoudig lijkt, is dit een complex probleem dat zoveel onderdelen van het platform raakt; van lay-out en rendering tot scrollen en interactie, tot user agent-styling en CSS-eigenschappen, en zelfs wijzigingen in HTML zelf.

Een dropdown bestaat uit veel onderdelen en bevat veel toestanden waarmee rekening moet worden gehouden, zoals:

• Toetsenbordbindingen (om de interactie te starten/verlaten)
• Klik weg om te verwijderen
• Actief popoverbeheer (andere popovers sluiten wanneer er een wordt geopend)
• Tabbladfocusbeheer
• Visualiseren van de geselecteerde optiewaarde
• Pijlinteractiestijl
• Staatsbeheer (openen/sluiten)

Het is momenteel lastig om al deze status zelf te beheren, maar het platform maakt het ook niet makkelijk. Om dit op te lossen, hebben we die onderdelen opgesplitst en een paar primitieve functies uitgebracht die het stylen van dropdowns mogelijk maken, maar ook nog veel meer.

De Popover API

Eerst hebben we een globaal kenmerk met de naam popover uitgebracht, en ik ben blij te kunnen melden dat dit kenmerk een paar weken geleden de status Baseline New Available heeft bereikt.

Popover-elementen worden verborgen met display: none totdat ze worden geopend met een aanroeper zoals een knop of met JavaScript. Om een ​​eenvoudige popover te maken, stelt u het popover-attribuut in op het element en koppelt u de ID ervan aan een knop met behulp van popovertarget . De knop is nu de aanroeper.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Nu het popover-kenmerk is ingeschakeld, verwerkt de browser veel belangrijke gedragingen zonder dat er aanvullende scripts nodig zijn, waaronder:

• Promotie naar de bovenste laag. : Een aparte laag boven de rest van de pagina, zodat u niet met z-index hoeft te spelen.
• Functionaliteit voor het verbergen van licht : Als u buiten het popovergebied klikt, wordt het popovergebied gesloten en krijgt het weer de focus.
• Standaard tabfocusbeheer : Wanneer u de popover opent, wordt de volgende tabstop binnen de popover geplaatst.
• Ingebouwde toetsenbordcombinaties : Als u op de esc -toets drukt of tweemaal op de toets drukt, wordt de popover gesloten en krijgt de focus weer de focus.
• Standaard componentbindingen. : De browser verbindt een popover semantisch met zijn trigger.

Misschien gebruik je deze popover API vandaag de dag al zonder het te beseffen. GitHub heeft popover geïmplementeerd in het "nieuwe" menu op hun homepage en in hun pull request review overzicht. Ze hebben deze functionaliteit geleidelijk verbeterd met behulp van de popover polyfill , gebouwd door Oddbird met aanzienlijke ondersteuning van GitHub's eigen Keith Cirkel, om oudere browsers te ondersteunen.

We zijn erin geslaagd om letterlijk duizenden regels code te schrappen door te migreren naar Popover. Popover helpt ons door de noodzaak van het vechten met magische z-indexgetallen te elimineren... Door de juiste toegankelijkheidsboomrelatie te hebben vastgesteld met declaratief knopgedrag en ingebouwde focusgedragingen, wordt het voor ons ontwerpsysteem aanzienlijk eenvoudiger om patronen op de juiste manier te implementeren. - Keith Cirkel, Software Engineer, GitHub

Animeren van in- en uitgangseffecten

Als je popovers hebt, wil je waarschijnlijk wat interactie toevoegen. Er zijn het afgelopen jaar vier nieuwe interactiefuncties geïntroduceerd die het animeren van popovers ondersteunen. Deze omvatten:

De mogelijkheid om display en content-visibility te animeren op een keyframe-tijdlijn.

De eigenschap transition-behavior met het trefwoord allow-discrete om overgangen van discrete eigenschappen zoals display mogelijk te maken.

De @starting-style regel om ingangseffecten te animeren vanuit display: none en in de top-layer .

De overlay-eigenschap om het gedrag van de bovenste laag tijdens een animatie te bepalen.

Deze eigenschappen werken voor elk element dat je in de bovenste laag animeert, of het nu een popover of een dialoogvenster is. Alles bij elkaar ziet het er zo uit voor een dialoogvenster met een achtergrond:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Stel eerst de @starting-style in, zodat de browser weet vanuit welke stijlen dit element in de DOM moet worden geanimeerd. Dit wordt gedaan voor zowel het dialoogvenster als de achtergrond. Style vervolgens de open status voor zowel het dialoogvenster als de achtergrond. Voor een dialoogvenster gebruikt dit het open -attribuut en voor een popover het pseudo-element ::popover-open . Animeer ten slotte de opacity , display en overlay met het trefwoord allow-discrete om de animatiemodus in te schakelen waarin discrete eigenschappen kunnen overgaan.

Ankerpositionering

Popover was nog maar het begin van het verhaal. Een zeer interessante update is dat ondersteuning voor ankerpositionering nu beschikbaar is vanaf Chrome 125.

Met behulp van ankerpositionering kan de browser met slechts een paar regels code de logica afhandelen om een ​​gepositioneerd element aan een of meer ankerelementen te koppelen. In het volgende voorbeeld is een eenvoudige tooltip aan elke knop verankerd, middenonder.

Stel een ankerpositierelatie in CSS in door de eigenschap anchor-name te gebruiken voor het verankerende element (in dit geval de knop) en de eigenschap position-anchor voor het gepositioneerde element (in dit geval de tooltip). Pas vervolgens absolute of vaste positionering toe ten opzichte van het anker met behulp van de functie anchor() . De volgende code positioneert de bovenkant van de tooltip ten opzichte van de onderkant van de knop.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

U kunt ook de anchor-name rechtstreeks in de anchor-functie gebruiken en de eigenschap position-anchor overslaan. Dit kan handig zijn bij het verankeren aan meerdere elementen.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Gebruik ten slotte het nieuwe trefwoord anchor-center voor de eigenschappen justify en align om het gepositioneerde element ten opzichte van het ankerpunt te centreren.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Hoewel het erg handig is om ankerpositionering te gebruiken met popover, is popover absoluut geen vereiste voor het gebruik van ankerpositionering. Ankerpositionering kan met twee (of meer) elementen worden gebruikt om een ​​visuele relatie te creëren. De volgende demo, geïnspireerd door een artikel van Roman Komarov , toont een onderstrepingsstijl die aan lijstitems wordt verankerd wanneer u eroverheen zweeft of tabt.

In dit voorbeeld wordt de ankerfunctie gebruikt om de ankerpositie in te stellen met behulp van de fysieke eigenschappen left , right en bottom . Wanneer u met de muis over een van de links beweegt, verandert het doelanker en verschuift de browser het doel om de positionering toe te passen. Tegelijkertijd wordt de kleur geanimeerd voor een mooi effect.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

positionering inset-area

Naast de standaard directionele absolute positionering die u waarschijnlijk al eerder hebt gebruikt, is er een nieuw lay-outmechanisme toegevoegd aan de API voor ankerpositionering: inset area. Met inset area kunt u eenvoudig gepositioneerde elementen ten opzichte van hun respectievelijke ankers plaatsen en het werkt op een raster van 9 cellen met het verankeringselement in het midden. Bijvoorbeeld: inset-area: top plaatst het gepositioneerde element bovenaan en inset-area: bottom plaatst het gepositioneerde element onderaan.

Een vereenvoudigde versie van de eerste ankerdemo ziet er als volgt uit met inset-area :

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Je kunt deze positiewaarden combineren met span-trefwoorden om te beginnen bij de middelste positie en naar links, rechts of volledig te spreiden om de volledige set beschikbare kolommen of rijen te gebruiken. Je kunt ook logische eigenschappen gebruiken. Om dit lay-outmechanisme gemakkelijker te visualiseren en te begrijpen, kun je deze tool in Chrome 125+ gebruiken:

Omdat deze elementen verankerd zijn, beweegt het gepositioneerde element dynamisch over de pagina mee met de beweging van het anker. In dit geval hebben we dus kaartelementen in container-querystijl, waarvan de grootte wordt aangepast op basis van hun intrinsieke grootte (iets wat je niet met media queries kunt doen), en het verankerde menu verschuift mee met de nieuwe lay-out naarmate de gebruikersinterface van de kaart verandert.

Dynamische ankerposities met position-try-options

Menu's en submenunavigatie zijn veel eenvoudiger te maken met een combinatie van popover- en ankerpositionering. En wanneer u de rand van een viewport raakt met uw verankerde element, kunt u de browser de positioneringswijziging ook voor u laten afhandelen. U kunt dit op verschillende manieren doen. De eerste is door uw eigen positioneringsregels te maken. In dit geval wordt het submenu aanvankelijk rechts van de "storefront"-knop geplaatst. U kunt echter een @position-try -blok maken voor wanneer er rechts van het menu niet genoeg ruimte is, door het de aangepaste identificatie --bottom te geven. Vervolgens verbindt u dit @position-try -blok met het anker met position-try-options .

De browser schakelt nu tussen deze verankerde toestanden, waarbij hij eerst de juiste positie probeert en vervolgens naar beneden verschuift. Dit kan met een mooie overgang.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Naast de expliciete positioneringslogica biedt de browser een aantal trefwoorden als u een aantal basisinteracties wilt, zoals het omdraaien van uw anker in het blok of inline-richtingen.

position-try-options: flip-block, flip-inline;

Voor een eenvoudige flipervaring kunt u gebruikmaken van deze flip-trefwoordwaarden en hoeft u helemaal position-try -definitie te schrijven. Zo kunt u nu met slechts een paar regels CSS een volledig functioneel locatie-responsief anker-gepositioneerd element maken.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Meer informatie over het gebruik van ankerpositionering .

De toekomst van gelaagde gebruikersinterfaces

We zien overal tethered ervaringen, en de functies die in dit bericht worden getoond, vormen een uitstekende start om creativiteit de vrije loop te laten en meer controle te krijgen over ankergepositioneerde elementen en gelaagde interfaces. Maar dit is nog maar het begin. popover werken bijvoorbeeld momenteel alleen met knoppen als oproepend element, of met JavaScript. Voor zoiets als previews in Wikipedia-stijl, een patroon dat overal op het webplatform te zien is, moet het mogelijk zijn om ermee te interacteren en een pop-up te activeren via een link en wanneer de gebruiker interesse toont, zonder dat er per se op geklikt hoeft te worden, zoals bij een hover of tabfocus.

Als volgende stap voor de popover API werken we aan interesttarget om aan deze behoeften te voldoen en het eenvoudiger te maken om deze ervaringen opnieuw te creëren met de juiste ingebouwde toegankelijkheidshooks. Dit is een lastig toegankelijkheidsprobleem om op te lossen, met veel open vragen over ideaal gedrag. Door deze functionaliteit op platformniveau aan te pakken en te normaliseren, zouden deze ervaringen voor iedereen moeten verbeteren.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Daarnaast is er een andere toekomstgerichte algemene invoker ( invoketarget ) beschikbaar om te testen in Canary dankzij het werk van twee externe ontwikkelaars, Keith Cirkel en Luke Warlow. invoketarget ondersteunt de declaratieve ontwikkelaarservaring die popovertarget biedt, popovers, genormaliseerd voor alle interactieve elementen, waaronder <dialog> , <details> , <video> , <input type="file"> en meer.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

We weten dat er use cases zijn die nog niet door deze API worden gedekt. ​​Bijvoorbeeld het stylen van de pijl die een verankerd element met zijn anker verbindt, vooral wanneer de positie van het verankerde element verandert, en het mogelijk maken dat een element kan "schuiven" en in de viewport blijft in plaats van vast te klikken op een andere ingestelde positie wanneer het de bounding box bereikt. Hoewel we enthousiast zijn over de lancering van deze krachtige API, kijken we er ook naar uit om de mogelijkheden ervan in de toekomst verder uit te breiden.

Stijlvol selecteren

Door popover en anchor samen te gebruiken, heeft het team vooruitgang geboekt met het eindelijk mogelijk maken van een aanpasbare selectie-dropdown. Het goede nieuws is dat er veel vooruitgang is geboekt. Het slechte nieuws is dat deze API zich momenteel nog in een experimentele fase bevindt. Ik kijk er echter naar uit om live demo's en updates over onze voortgang te delen en hopelijk wat van jullie feedback te krijgen. Ten eerste is er vooruitgang geboekt met het aanmelden van gebruikers voor de nieuwe, aanpasbare selectie-ervaring. De huidige, nog in ontwikkeling zijnde manier om dit te doen, is door een appearance-eigenschap in CSS te gebruiken, ingesteld op appearance: base-select . Zodra appearance is ingesteld, meld je je aan voor een nieuwe, aanpasbare selectie-ervaring.

select {
  appearance: base-select;
}

Naast appearance: base-select zijn er een paar nieuwe HTML-updates. Deze omvatten de mogelijkheid om je opties in een datalist te plaatsen voor personalisatie en de mogelijkheid om willekeurige niet-interactieve content, zoals afbeeldingen, aan je opties toe te voegen. Je krijgt ook toegang tot een nieuw element, <selectedoption> , dat de inhoud van de opties in zichzelf reflecteert, die je vervolgens naar eigen wens kunt aanpassen. Dit element is erg handig.

Demo-visueel

Live demo

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

De volgende code demonstreert het aanpassen van <selectedoption> in de Gmail-gebruikersinterface, waarbij een visueel pictogram het geselecteerde antwoordtype aangeeft om ruimte te besparen. U kunt basisweergavestijlen binnen selectedoption gebruiken om de optiestyling te onderscheiden van de preview-styling. In dit geval kan tekst die in de optie wordt weergegeven, visueel worden verborgen in selectedoption .

Demo-visueel

Live demo

selectedoption .text {
  display: none;
}

Een van de grootste voordelen van het hergebruiken van het <select> -element voor deze API is achterwaartse compatibiliteit. In deze landselectie ziet u een aangepaste gebruikersinterface met vlagafbeeldingen in de opties, waardoor de content gemakkelijker te parsen is voor gebruikers. Omdat niet-ondersteunde browsers de regels negeren die ze niet begrijpen, zoals de aangepaste knop, datalist, selectedoption en afbeeldingen in de opties, is de fallback vergelijkbaar met de huidige standaardselectie-gebruikersinterface.

Met aanpasbare selecties zijn de mogelijkheden eindeloos. Ik ben vooral dol op deze Airbnb-achtige landenkiezer, omdat hij een slimme stijl heeft voor responsief design. Je kunt dit en nog veel meer doen met de aankomende stijlvolle selectie, wat het een broodnodige aanvulling op het webplatform maakt.

Exclusieve accordeon

Het oplossen van problemen met geselecteerde styling (en alle onderdelen die daarbij horen) is niet het enige UI-onderdeel waar het Chrome-team zich op heeft gericht. De eerste extra componentupdate is de mogelijkheid om exclusieve accordeons te creëren, waarbij slechts één item in de accordeon tegelijk geopend kan worden.

De manier om dit mogelijk te maken is door dezelfde naamwaarde toe te passen op meerdere detailelementen, waardoor een verbonden groep details ontstaat, net als een groep keuzerondjes.

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid en :user-invalid

Een andere verbetering aan de gebruikersinterfacecomponenten zijn de pseudoklassen :user-valid en :user-invalid . De pseudoklassen :user-valid en :user-invalid zijn sinds kort stabiel in alle browsers en gedragen zich vergelijkbaar met de pseudoklassen :valid en :invalid . Ze matchen een formulierbesturingselement echter pas nadat een gebruiker significante interactie met de invoer heeft gehad. Dit betekent dat er aanzienlijk minder code nodig is om te bepalen of er interactie is geweest met een formulierwaarde, of dat deze "vuil" is geworden. Dit kan erg handig zijn om gebruikersfeedback te geven en vermindert de hoeveelheid scripting die hiervoor in het verleden nodig was.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Meer informatie over het gebruik van pseudo-elementen voor gebruikers-* formuliervalidatie .

field-sizing: content

Een andere handige componentupdate die onlangs is uitgekomen, is field-sizing: content , die kan worden toegepast op formulierelementen zoals invoer en tekstvakken. Hierdoor kan de invoer groter (of kleiner) worden, afhankelijk van de inhoud. field-sizing: content kan met name handig zijn voor tekstvakken, omdat je dan niet langer vaststaat in de grootte, waardoor je mogelijk omhoog moet scrollen om te zien wat je in de eerdere delen van je prompt hebt geschreven in een te klein invoerveld.

textarea, select, input {
  field-sizing: content;
}

Meer informatie over veldgrootte .

<hr> in <select>

De mogelijkheid om het <hr> -element (horizontaalregelelement) in selecties te activeren, is een andere kleine maar nuttige componentfunctie. Hoewel dit niet veel semantisch nut heeft, helpt het je wel om content binnen een selectielijst netjes te scheiden, met name content die je misschien niet per se wilt groeperen met een optgroup, zoals een tijdelijke aanduiding.

Schermafbeelding selecteren

Selecteer Live Demo

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Leer meer over het gebruik van hr in geselecteerde

Verbetering van de kwaliteit van leven

We zijn constant bezig met iteraties, en dat geldt niet alleen voor interacties en componenten. Er zijn het afgelopen jaar nog veel meer kwaliteitsverbeteringen doorgevoerd.

Nesten met lookahead

Native CSS-nesting is vorig jaar in alle browsers geïntroduceerd en is sindsdien verbeterd om lookahead te ondersteunen, wat betekent dat de & -before-elementnamen niet langer een vereiste zijn. Dit maakt nesting veel ergonomischer en vergelijkbaar met wat ik gewend was.

Een van mijn favoriete aspecten van CSS-nesting is dat je componenten visueel kunt blokkeren en binnen die componenten statussen en modifiers kunt opnemen, zoals containerquery's en mediaquery's. Voorheen had ik de gewoonte om al deze query's onderaan het bestand te groeperen voor specifieke doeleinden. Nu kun je ze op een logische manier schrijven, direct naast de rest van je code.

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Uitlijninhoud voor bloklay-out

Een andere erg fijne verandering is de mogelijkheid om centreermechanismen zoals align-content te gebruiken in bloklay-outs. Dit betekent dat je nu dingen kunt doen zoals verticaal centreren binnen een div zonder dat je flex of rasterlay-out hoeft toe te passen, en zonder bijwerkingen zoals het voorkomen van margin-collapse, die je misschien niet wilt van die layoutalgoritmes.

Schermafbeelding

Live demo

div {
  align-content: center;
}

Tekstomloop: evenwichtig en mooi

Over lay-out gesproken: de tekstlay-out is flink verbeterd dankzij de toevoeging van text-wrap: balance en pretty . text-wrap: balance wordt gebruikt voor een uniformer tekstblok, terwijl text-wrap: pretty zich richt op het verminderen van singletons in de laatste regel van de tekst.

h1 {
  text-wrap: balance;
}

Meer informatie over tekstafbreking: balance .

Internationale typografische updates

Typografische lay-outupdates voor CJK-tekstfuncties hebben het afgelopen jaar veel mooie updates gekregen, zoals de functie word-break: auto-phrase , die de regel afbreekt op de natuurlijke grens van de zinsdeeltekst.

En text-spacing-trim , dat kerning tussen leestekens toepast om de leesbaarheid van Chinese, Japanse en Koreaanse typografie te verbeteren en zo visueel aantrekkelijkere resultaten te behalen.

Relatieve kleursyntaxis

Op het gebied van kleurthema's zagen we een grote update met betrekking tot relatieve kleursyntaxis.

In this example, the colors here use Oklch-based theming. As the hue-value adjusts based on the slider, the entire theme changes. This can be achieved with relative color syntax. The background uses the primary color, based on the hue, and adjusts the lightness, chroma, and hue channels to adjust its value. --i is the sibling index in the list for the gradation of values, showing how you can combine stepping with custom properties and relative color syntax to build themes.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

light-dark() function

Along with the light-dark() function, theming has become much more dynamic and simplified.

The light-dark() function is an ergonomic improvement that simplifies color theming options so that you can write theme styles in a more concise way, as demonstrated so nicely in this visual diagram by Adam Argyle. Before, you would need two different blocks of code, (your default theme and a user preference query), to set up theme options. Now, you can write these style options for both light and dark themes in the same line of CSS using the light-dark() function.

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

If the user selected a light theme, the button will have a light blue background. If the user selected a dark theme, the button will have a dark blue background.

:has() selector

And I would be remiss to talk about modern UI without mentioning one of the most impactful interop highlights from the past year, which has to be the :has() selector, landing across browsers in December of last year. This API is a game-changer for writing logical styles.

The :has() selector enables you to check if a child element has specific children, or if those children are in a specific state, and essentially can function as a parent selector as well.

:has() has already shown to be particularly useful for many companies , including PolicyBazaar, who use :has() to style blocks based on their interior content, such as in the compare section, where the style adjusts if there is a plan to compare in the block, or if its empty.

“With the :has() selector, we were able to eliminate JavaScript based validation of the user's selection and replace it with a CSS solution which is working seamlessly for us with the same experience as before.–Aman Soni, Tech Lead, PolicyBazaar”

Container queries

Another key addition to the web that is now newly available and growing in usage is container queries, which enable the ability to query an element parent's intrinsic size to apply styles: a much more fine-toothed comb than media queries, which only query the viewport size.

Angular recently launched a beautiful new documentation site on angular.dev using container queries to style the header blocks based on their available space on the page. So even if the layout changes, and goes from a multicolumn sidebar layout to a single-column layout, the header blocks can self-adjust.

Without container queries, doing something like this was quite hard to achieve, and damaging for performance, requiring resize observers and element observers. Now, it's trivial to style an element based on its parent size.

@property

And finally very soon, we are excited to see @property land in Baseline. This is a key feature for providing semantic meaning to CSS custom properties (also known as CSS variables), and enables a slew of new interaction features. @property also enables contextual meaning, typechecking, defaults, and fallback values in CSS. Opening the doors for even more robust features like range style queries. This is a feature that was never possible before, and now provides so much depth to the language of CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Conclusie

With all of these new powerful UI capabilities landing across browsers, the possibilities are endless. Novel interactive experiences with scroll-driven animations and view transitions make the web more fluid and interactive in ways we've never seen before. And next level UI components make it easier than ever to build robust, beautifully customized components without ripping out the entire native experience. And finally, quality of life improvements in architecture, layout, typography, and responsive design not only solve the little big things, but also give developers the tools they need to build complex interfaces that work on a variety of devices, form factors, and user needs.

These new features you should be able to remove third-party scripting for performance-heavy features like scrollytelling and tethering elements to each other with anchor positioning, build fluid page transitions, finally style dropdowns, and improve the overall structure of your code natively.

It's never been a better time to be a web developer. There hasn't been so much energy and excitement since the announcement of CSS3. Features we've needed but have only dreamed of actually landing in the past, are finally becoming a reality and a part of the platform. And it's because of your voice that we're able to prioritize and finally bring these capabilities to life. We're working on making it easier to do the hard, tedious stuff natively so you can spend more time building the things that matter–like the core features and design details that set your brand apart.

To learn more about these new features as they land, follow along at developer.chrome.com and web.dev, where our team shares the latest news in web technologies. Try out scroll driven animations, view transitions, anchor positioning, or even the stylable select, and let us know what you think. We're here to listen and we're here to help.