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 dat we nog nooit eerder hebben gezien in browsers verschijnen en 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 essentie 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 web-app 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 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 de mogelijkheid om niet alleen 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 hierop 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 zeer 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 brengen een nieuw niveau van vloeiendheid naar het web, waardoor 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 pagina's op verschillende manieren in- en uitwisselen, 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 enorme veelzijdigheid ervan. Veel applicaties bestaan ​​niet zomaar uit één pagina, maar uit een robuust tapijtwerk 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 te omsluiten 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 gebeurtenislisteners pageswap of pagereveal , die u toegang geven tot het weergave-overgangsobject.

Met pageswap kunt u nog enkele 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, zodat 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 samenwerking tussen 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 simpel verzoek: de mogelijkheid om dropdownmenu's (het select-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:

• Toetsenbordkoppelingen (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 toegevoegd 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 de popover gesloten en krijgt deze weer de focus.
• Standaard tabfocusbeheer: Wanneer u de popover opent, wordt de volgende tabstop binnen de popover geplaatst.
• Ingebouwde toetsenbordindelingen: 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 functie 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 depreciëren 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 in 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 met popover te gebruiken, 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 dat deel uitmaakt van 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 met media queries niet 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 geen 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-over 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 echter 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 dankzij het werk van twee externe ontwikkelaars, Keith Cirkel en Luke Warlow, een andere algemene invoker ( invoketarget ) beschikbaar om te testen in Canary. 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 de 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 hebt 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, wat het voor gebruikers eenvoudiger maakt om de content te parsen. 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 select 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 UI-componenten zijn de pseudo-klassen :user-valid en :user-invalid . De pseudo-klassen :user-valid en :user-invalid zijn sinds kort stabiel in alle browsers en gedragen zich vergelijkbaar met de pseudo-klassen :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 gebruiker-* 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 wordt omgezet naar vaste formaten, 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 select

Verbetering van de levenskwaliteit

We zijn constant bezig met iteraties, en dat geldt niet alleen voor interacties en componenten. Er zijn het afgelopen jaar nog veel meer updates op het gebied van kwaliteit van leven binnengekomen.

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 dingen aan 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 past kerning toe tussen leestekens om de leesbaarheid van Chinese, Japanse en Koreaanse typografie te verbeteren en zo visueel aantrekkelijkere resultaten te behalen.

Relatieve kleursyntaxis

In de wereld van kleurthemie zagen we een grote update met relatieve kleursyntaxis.

In dit voorbeeld gebruiken de kleuren hier op Oklch-gebaseerde thema. Terwijl de tintwaarde zich aanpast op basis van de schuifregelaar, verandert het hele thema. Dit kan worden bereikt met relatieve kleursyntaxis. De achtergrond gebruikt de primaire kleur, gebaseerd op de tint, en past de lichtheid, chroma en tintkanalen aan om de waarde ervan aan te passen. --Ik is de broer of zus-index in de lijst voor de gradatie van waarden, waaruit blijkt hoe u een stap kunt combineren met aangepaste eigenschappen en relatieve kleursyntaxis om thema's te bouwen.

: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() functie

Samen met de functie light-dark() is het thema veel dynamischer en vereenvoudigd geworden.

De functie light-dark() is een ergonomische verbetering die de opties voor het thema van de kleur vereenvoudigt, zodat u themastijlen op een meer beknopte manier kunt schrijven, zoals zo mooi in dit visuele diagram van Adam Argyle wordt aangetoond. Voordat u twee verschillende codeblokken nodig heeft (uw standaardthema en een gebruikersvoorkeurquery), om thema -opties in te stellen. Nu kunt u deze stijlopties schrijven voor zowel lichte als donkere thema's in dezelfde lijn van CSS met behulp van de functie light-dark() .

html {
  color-scheme: light dark;
}

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

Als de gebruiker een lichtthema heeft geselecteerd, heeft de knop een lichtblauwe achtergrond. Als de gebruiker een donker thema heeft geselecteerd, heeft de knop een donkerblauwe achtergrond.

:has() selector

En ik zou nalaten om over moderne gebruikersinterface te praten zonder een van de meest impactvolle interop -hoogtepunten van het afgelopen jaar te vermelden, die de :has() selector moet zijn, die in december vorig jaar over browsers landt. Deze API is een game-wisselaar voor het schrijven van logische stijlen.

Met de :has() selecteur kunt u controleren of een onderliggende element specifieke kinderen heeft, of dat die kinderen zich in een specifieke staat bevinden en in wezen ook als ouderkeuze kunnen functioneren.

:has() heeft al met name nuttig aangetoond voor veel bedrijven , waaronder PolicyBazaar, die gebruiken :has() om blokken te stylen op basis van hun interieurinhoud, zoals in de sectie Vergelijken, waar de stijl zich aanpast als er een plan is om in het blok te vergelijken, of als het leeg is.

"Met de: HAS () selector konden we op JavaScript gebaseerde validatie van de selectie van de gebruiker elimineren en vervangen door een CSS -oplossing die naadloos voor ons werkt met dezelfde ervaring als voorheen. - Aman Soni, Tech Lead, PolicyBazaar"

Containerquery's

Een andere belangrijke toevoeging aan het web dat nu nieuw beschikbaar is en groeit in gebruik zijn containerquery's, waardoor de mogelijkheid kan worden om de intrinsieke grootte van een element te ondervragen om stijlen toe te passen: een veel meer verfijnde kam dan media-query's, die alleen de viewportgrootte opvragen.

Angular heeft onlangs een prachtige nieuwe documentatie -site op Angular.Dev gelanceerd met behulp van containerquery's om de headerblokken te stylen op basis van hun beschikbare ruimte op de pagina. Dus zelfs als de lay-out verandert en van een multicolumn-zijbalkindeling naar een lay-out met één kolom gaat, kunnen de headerblokken zichzelf instellen.

Zonder containerquery's was het doen van zoiets als dit vrij moeilijk te bereiken, en schadelijk voor prestaties, waarvoor het formaat van waarnemers en elementwaarnemers nodig was. Nu is het triviaal om een ​​element te stylen op basis van de oudermaat.

@property

En uiteindelijk zijn we heel snel verheugd om @property land in baseline te zien. Dit is een belangrijk kenmerk voor het bieden van semantische betekenis aan CSS aangepaste eigenschappen (ook bekend als CSS -variabelen) en maakt een hele reeks nieuwe interactiefuncties mogelijk. @property maakt ook contextuele betekenis, typeching, standaardwaarden en fallback -waarden mogelijk in CSS. Het openen van de deuren voor nog robuustere functies zoals bereikstijlquery's. Dit is een functie die nooit eerder mogelijk was en nu zoveel diepte biedt aan de taal van CSS.

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

Conclusie

Met al deze nieuwe krachtige UI -mogelijkheden die over browsers landen, zijn de mogelijkheden eindeloos. Nieuwe interactieve ervaringen met scroll-aangedreven animaties en weergavesteovergangen maken het web vloeistof en interactiever op manieren die we nog nooit eerder hebben gezien. En ui -componenten op het volgende niveau maken het eenvoudiger dan ooit om robuuste, prachtig aangepaste componenten te bouwen zonder de hele native ervaring uit te scheuren. En ten slotte lost verbeteringen in de kwaliteit van leven in architectuur, lay -out, typografie en responsief ontwerp niet alleen de kleine grote dingen op, maar geven ontwikkelaars ook de tools die ze nodig hebben om complexe interfaces te bouwen die werken op verschillende apparaten, vormfactoren en gebruikersbehoeften.

Deze nieuwe functies moeten u in staat zijn om scripting van derden te verwijderen voor prestatiegeavy-functies zoals scrollytelling en tethering-elementen aan elkaar met ankerpositionering, vloeistofpagina-overgangen bouwen, eindelijk vervolgkeuzemensters stylen en de algemene structuur van uw code moeten verbeteren.

Het is nooit een betere tijd geweest om een ​​webontwikkelaar te worden. Er is niet zoveel energie en opwinding geweest sinds de aankondiging van CSS3. Functies die we nodig hebben, maar hebben er alleen van gedroomd om in het verleden daadwerkelijk te landen, worden eindelijk een realiteit en een deel van het platform. En het is vanwege je stem die we kunnen prioriteren en uiteindelijk deze mogelijkheden tot leven brengen. We werken eraan om het gemakkelijker te maken om de harde, vervelende dingen native te doen, zodat u meer tijd kunt besteden aan het bouwen van de dingen die ertoe doen - zoals de kernfuncties en ontwerpdetails die uw merk onderscheiden.

Volg voor meer informatie over deze nieuwe functies als ze landen bij Developer.Chrome.com en Web.Dev, waar ons team het laatste nieuws deelt in webtechnologieën. Probeer scroll -aangedreven animaties, bekijk overgangen, ankerpositionering of zelfs de stijlbare select en laat ons weten wat u ervan vindt. We zijn hier om te luisteren en we zijn hier om te helpen.