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

Una Kravets

Het webplatform bruist van de innovatie, waarbij CSS en web-UI-functies voorop lopen in deze opwindende evolutie. We leven in een gouden tijdperk voor de web-UI, met nieuwe CSS-functies die in browsers verschijnen in een tempo dat we nog nooit eerder hebben gezien, waardoor een wereld van mogelijkheden wordt geopend voor het creëren van prachtige en boeiende webervaringen. In deze blogpost duiken we diep in de huidige staat van CSS en onderzoeken we enkele van de meest baanbrekende nieuwe functies die de manier waarop we webapplicaties bouwen opnieuw definiëren, live te zien op Google I/O 2024.

Nieuwe interactieve ervaringen

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

Scrollgestuurde animaties

Browserondersteuning

• 115
• 115
• 
• X

Bron

Zoals de naam al aangeeft, kunt u met de scrollgestuurde animatie-API dynamische, op scrollen gebaseerde animaties maken zonder afhankelijk te zijn van scrollwaarnemers of andere zware scripting.

Maak scrollgestuurde animaties

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

Scrollgestuurde animaties kunnen worden gebruikt om belangrijke inhoud te benadrukken, gebruikers door een verhaal te leiden of eenvoudigweg een dynamisch tintje aan uw webpagina's toe te voegen.

Scrollgestuurde visuele animatie

Live-demo

@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 aangedreven 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 functie view() met zijn 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 als het gaat om toegankelijkheid. Gebruik daarom de @supports regel om te controleren of de browser scrollgestuurde animaties ondersteunt, en verpak uw scrollgestuurde animatie in een gebruikersvoorkeurenquery zoals @media (prefers-reduced-motion: no-preference) om de bewegingsvoorkeuren van gebruikers te respecteren . Nadat u deze controles heeft uitgevoerd, weet u dat uw stijlen zullen 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 */
  }
}

Scrollgestuurde animaties kunnen scrollytelling-ervaringen op een volledige pagina betekenen, maar ze kunnen ook subtielere animaties betekenen, zoals een kopbalk die een schaduw minimaliseert en laat zien terwijl u door een webapp scrollt.

Scrollgestuurde visuele animatie

Live-demo

@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 paar verschillende keyframe-animaties (de koptekst, tekst, navigatiebalk en achtergrond) en past vervolgens de respectieve scrollgestuurde animatie op elk toe. Hoewel ze allemaal 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 scrollgestuurde animaties

Deze ingebouwde API vermindert de codelast die u moet onderhouden, of het nu gaat om een ​​aangepast script dat u heeft geschreven of om de toevoeging van een extra afhankelijkheid van derden. Het elimineert ook de noodzaak om verschillende scroll-waarnemers te verzenden, wat een aantal behoorlijk aanzienlijke prestatievoordelen betekent. Dit komt omdat scrollgestuurde animaties buiten de rode draad werken bij het animeren van eigenschappen die op de compositor kunnen worden geanimeerd, zoals transformaties en dekking, of je nu de nieuwe API rechtstreeks in CSS gebruikt of de JavaScript-hooks gebruikt.

Tokopedia heeft onlangs scrollgestuurde animaties gebruikt om de productnavigatiebalk te laten verschijnen terwijl u scrolde. Het gebruik van deze API heeft een aantal serieuze voordelen opgeleverd, zowel voor codebeheer als voor prestaties.

Scrollgestuurde animaties sturen deze productnavigatiebalk op Tokopedia aan terwijl u naar beneden scrollt.

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

De toekomst van scrolleffecten

We weten dat deze effecten het internet aantrekkelijker zullen blijven maken, en we denken al na over wat er daarna zou kunnen gebeuren. Dit omvat de mogelijkheid om niet alleen nieuwe animatietijdlijnen te gebruiken, maar ook om een ​​scrollpunt te gebruiken om het begin van een animatie te activeren, de zogenaamde scroll-triggered animaties.

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 initiële datum en tijd binnen de pickers in te stellen, en de JavaScript scrollsnapchange gebeurtenis om de headerdatum bij te werken, waardoor het triviaal wordt om de gegevens te synchroniseren met de vastgeklikte gebeurtenis.

Zie live demo op Codepen

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

Deze specifieke functies bevinden zich momenteel alleen in Canary achter een vlag, maar ze ontgrendelen mogelijkheden die voorheen onmogelijk of zeer moeilijk in het platform waren in te bouwen en benadrukken de toekomst van op scrollen gebaseerde interactiemogelijkheden.

Voor meer informatie over hoe u aan de slag kunt gaan met scrollgestuurde animaties heeft ons team zojuist een nieuwe videoserie gelanceerd die u kunt vinden op het Chrome for Developers YouTube-kanaal . Hier leer je de basisprincipes van scrollgestuurde animaties van Bramus Van Damme, inclusief hoe de functie werkt, woordenschat, verschillende manieren om effecten te creëren en hoe je effecten combineert om rijke ervaringen op te bouwen. Het is een geweldige videoserie om te bekijken.

Overgangen bekijken

We hebben zojuist een krachtige nieuwe functie besproken die animeert binnen webpagina's, maar er is ook een krachtige nieuwe functie genaamd weergaveovergangen voor het animeren tussen paginaweergaven om een ​​naadloze gebruikerservaring te creëren. Weergaveovergangen introduceren een nieuw niveau van vloeibaarheid op internet, waardoor u naadloze overgangen kunt creëren tussen verschillende weergaven binnen één pagina, of zelfs over verschillende pagina's heen.

Browserondersteuning

• 111
• 111
• X
• 18

Bron

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

Een overgang naar dezelfde documentweergave als op Airbnb .

Het portfolio van Maxwell Barvian , waarin de overgangen tussen weergaven worden getoond.

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

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 , en ervoor zorgen dat elk element dat overgaat een view-transition-name heeft, inline of dynamisch met behulp van JavaScript terwijl u maakt DOM-knooppunten.

Demo visueel

Live-demo

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 de overgangsklassen

Namen van weergaveovergangen kunnen worden gebruikt om aangepaste animaties toe te passen op uw weergaveovergang, hoewel dit lastig kan worden als er veel elementen overgaan. De eerste nieuwe update dit jaar om overgangen te bekijken vereenvoudigt dit probleem en introduceert de mogelijkheid om overgangsklassen te maken die kunnen worden toegepast op aangepaste animaties.

Browserondersteuning

• 125
• 125
• X
• 

Overgangstypen bekijken

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

Browserondersteuning

• 125
• 125
• X
• 18

U wilt bijvoorbeeld dat een startpagina op een andere manier naar een blogpagina animeert dan dat de blogpagina terugkeert naar de startpagina. Of misschien wilt u dat pagina's op verschillende manieren worden in- en uitgewisseld, zoals in dit voorbeeld, van links naar rechts en omgekeerd. Vroeger was dit rommelig om te doen. Je zou klassen aan de DOM kunnen toevoegen om stijlen toe te passen, en dan zou je de klassen daarna moeten verwijderen. Met View-transition-types kan de browser oude overgangen opschonen in plaats van dat u dit handmatig moet doen voordat u nieuwe initieert, waardoor dit werk voor u wordt gedaan.

Opname van de Paginatie-demo . Typen bepalen welke animatie moet worden gebruikt. Stijlen worden in het stijlblad gescheiden dankzij actieve overgangstypen.

U kunt typen instellen binnen 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 types.

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

Weergaveovergangen van meerdere pagina's

Wat het internet krachtig maakt, is hoe uitgebreid het is. Veel toepassingen zijn niet slechts één pagina, maar een robuust tapijtwerk met meerdere pagina's. En daarom zijn we zo blij om aan te kondigen dat we ondersteuning bieden voor weergaveovergangen tussen verschillende documenten voor toepassingen met meerdere pagina's in Chromium 126.

Browserondersteuning

• 126
• 126
• X
• 

Deze nieuwe functieset voor meerdere documenten omvat webervaringen die binnen dezelfde oorsprong leven, zoals navigeren van web.dev naar web.dev/blog, maar dit omvat niet het navigeren tussen verschillende oorsprong, zoals navigeren van web.dev naar blog.web.dev of naar een ander domein zoals google.com.

Een van de belangrijkste verschillen met weergaveovergangen voor hetzelfde document is dat u uw overgang niet hoeft in te wikkelen met document.startViewTransition() . Meld u in plaats daarvan aan voor beide pagina's die betrokken zijn bij de weergaveovergang door de CSS @view-transition at-regel te gebruiken.

@view-transition {
  navigation: auto;
}

Voor een meer aangepast effect kunt u JavaScript inhaken met behulp van de nieuwe pageswap of pagereveal -gebeurtenislisteners, die u toegang geven tot het view transition-object.

Met pageswap kunt u op het laatste moment nog enkele wijzigingen aanbrengen op de uitgaande pagina, vlak voordat de oude snapshots worden gemaakt, en met pagereveal kunt u de nieuwe pagina aanpassen voordat deze begint te worden weergegeven nadat deze is geïnitialiseerd.

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

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

Weergaveovergangen weergeven in een app met meerdere pagina's. Zie demolink .

In de toekomst zijn we van plan de weergaveovergangen uit te breiden, waaronder:

• Scoped transitions : Hiermee kunt u een transitie beperken tot een DOM-subboom, waardoor de rest van de pagina interactief kan blijven en meerdere weergave-overgangen tegelijkertijd worden ondersteund.
• Gebaargestuurde weergaveovergangen : gebruik sleep- of veegbewegingen om een ​​weergaveovergang tussen documenten te activeren voor meer native-achtige ervaringen op internet.
• Navigatiematching in CSS : Pas uw weergaveovergang tussen meerdere documenten rechtstreeks in uw CSS aan als alternatief voor het gebruik van pageswap en pagereveal gebeurtenissen in JavaScript. Voor meer informatie over weergaveovergangen voor toepassingen met meerdere pagina's, inclusief hoe u deze het best kunt instellen met vooraf weergave, bekijk de volgende lezing van Bramus Van Damme:

Door de engine ondersteunde UI-componenten: vereenvoudiging van complexe interacties

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 bouwen van geweldige ervaringen. Dit wordt gedaan door middel van een gezamenlijke inspanning waarbij verschillende belangrijke standaardorganisaties en gemeenschapsgroepen betrokken zijn, waaronder de CSS Working Group, 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 vervolgkeuzemenu's op te maken (het select-element). Hoewel het op het eerste gezicht eenvoudig lijkt, is dit een complex probleem, dat zoveel onderdelen van het platform raakt; van lay-out en weergave, tot scrollen en interactie, tot user-agent-styling en CSS-eigenschappen, en zelfs wijzigingen in HTML zelf.

De stukken van een select opsplitsen

Een vervolgkeuzelijst bestaat uit veel onderdelen en bevat veel statussen waarmee rekening moet worden gehouden, zoals:

• Toetsenbordbindingen (om de interactie in/uit te gaan)
• Klik weg om te sluiten
• Actief popoverbeheer (andere popovers sluiten wanneer er één wordt geopend)
• Beheer van tabbladfocus
• Visualisatie van de geselecteerde optiewaarde
• Pijl-interactiestijl
• Staatsbeheer (open/dicht)

Het is momenteel lastig om dit allemaal zelf te beheren, maar het platform maakt het ook niet gemakkelijk. Om dit op te lossen, hebben we deze onderdelen opgesplitst en een paar primitieve functies op de markt gebracht die vervolgkeuzelijsten voor styling mogelijk maken, maar die ook nog veel meer doen.

De Popover-API

Eerst hebben we een globaal attribuut met de naam popover verzonden, waarvan ik met trots kan aankondigen dat het een paar weken geleden zojuist de Baseline-nieuw beschikbare status heeft bereikt.

Browserondersteuning

• 114
• 114
• 125
• 17

Bron

Popover-elementen zijn 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 . Nu is de knop de aanroeper,

Demo visueel

Live-demo

<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-attribuut is ingeschakeld, verwerkt de browser veel belangrijke gedragingen zonder extra scripting, waaronder:

• Promotie naar de bovenste laag. : Een aparte laag boven de rest van de pagina, zodat je niet hoeft te spelen met z-index .
• Lichtuitschakelingsfunctionaliteit. : Als u buiten het popover-gebied klikt, wordt de popover gesloten en keert de focus terug.
• Standaard tabfocusbeheer. : Als u de popover opent, stopt het volgende tabblad binnen de popover.
• Ingebouwde toetsenbordbindingen. : Als u op de esc -toets drukt of dubbel schakelt, wordt de popover gesloten en keert de focus terug.
• Standaardcomponentbindingen. : De browser verbindt een popover semantisch met de trigger.

Belangrijk: het popover-attribuut bevat niet inherent enige semantische betekenis, dus u moet nog steeds de juiste HTML of ARIA gebruiken om meer contextuele betekenis aan het popover-element te geven. Bovendien maakt popover de rest van de pagina niet inert, waardoor deze niet-interactief of focus-trap wordt. Als je dat soort ervaring wilt, is een <dialog> -element waarschijnlijk geschikter.

Menu op de GitHub- startpagina.

Mogelijk gebruikt u deze popover-API vandaag zelfs zonder dat u het zich realiseert. GitHub implementeerde popover op het “nieuwe” menu op hun startpagina 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 beëindigen door naar popover te migreren. Popover helpt ons door de noodzaak van het bestrijden van magische z-indexnummers te elimineren... door de juiste toegankelijkheidsboomrelatie tot stand te brengen met declaratief knopgedrag, en door ingebouwd focusgedrag, wordt het voor ons ontwerpsysteem aanzienlijk eenvoudiger om patronen op de juiste manier te implementeren. Keith Cirkel, software-ingenieur, GitHub”

Animeren van in- en uitstapeffecten

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

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

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

Browserondersteuning

• 117
• 117
• 129
• 17.4

Bron

De @starting-style om invoereffecten van display: none en in de bovenste laag .

Browserondersteuning

• 117
• 117
• 129
• 17.5

Bron

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

Browserondersteuning

• 117
• 117
• X
• X

Bron

Deze eigenschappen werken voor elk element dat u naar de bovenste laag animeert, of het nu een popover of een dialoogvenster is. Alles bij elkaar ziet het er als volgt uit voor een dialoog met een achtergrond:

Demo visueel

Live-demo

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 de dialoog als de achtergrond. Stijl vervolgens de open status voor zowel het dialoogvenster als de achtergrond. Voor een dialoog wordt hiervoor het open attribuut gebruikt, en voor een popover het ::popover-open pseudo-element. Animeer ten slotte de opacity , display en overlay met het trefwoord allow-discrete om de animatiemodus in te schakelen waarin discrete eigenschappen kunnen overgaan.

Anker positionering

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

Browserondersteuning

• 125
• 125
• X
• X

Bron

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

Demo visueel

Live-demo

Stel een ankergepositioneerde relatie in CSS in door de eigenschap anchor-name te gebruiken voor het verankeringselement (in dit geval de knop) en de eigenschap position-anchor voor het gepositioneerde element (in dit geval de tooltip). Pas vervolgens een absolute of vaste positionering toe ten opzichte van het anker met behulp van de functie anchor() . Met de volgende code wordt de bovenkant van de knopinfo naar de onderkant van de knop geplaatst.

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

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

U kunt ook de ankernaam rechtstreeks in de ankerfunctie gebruiken en de eigenschap position-anchor overslaan. Dit kan handig zijn bij verankering 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 zijn anker 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 zeker geen vereiste voor het gebruik van ankerpositionering. Ankerpositionering kan met twee (of meer) elementen worden gebruikt om een ​​visuele relatie te creëren. In feite toont de volgende demo, geïnspireerd door een artikel van Roman Komarov , een onderstrepingsstijl die wordt verankerd om items weer te geven terwijl u er met de muis overheen beweegt of er met de tab over bladert.

Demo visueel

Live-demo

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 over een van de links beweegt, verandert het doelanker en verschuift de browser het doel om de positionering toe te passen, waarbij tegelijkertijd de kleur wordt geanimeerd om een ​​mooi effect te creëren.

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 eerder hebt gebruikt, is er een nieuw lay-outmechanisme opgenomen dat is geland als onderdeel van de ankerpositionerings-API, genaamd inset area. Het inzetgebied maakt het gemakkelijk om gepositioneerde elementen ten opzichte van hun respectievelijke ankers te plaatsen, en werkt op een raster met 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;
}

U kunt deze positionele waarden combineren met span-trefwoorden, zodat u op de middelste positie begint en vervolgens naar links, naar rechts of naar allemaal spant om de volledige set beschikbare kolommen of rijen in beslag te nemen. U kunt ook logische eigenschappen gebruiken. Bekijk deze tool in Chrome 125+ om het gemakkelijker te maken dit lay-outmechanisme te visualiseren en op te pikken:

Omdat deze elementen verankerd zijn, beweegt het gepositioneerde element dynamisch over de pagina terwijl het anker beweegt. In dit geval hebben we kaartelementen in containerquery-stijl, waarvan het formaat wordt aangepast op basis van hun intrinsieke grootte (iets wat je niet zou kunnen doen met mediaquery's), en het verankerde menu zal verschuiven met de nieuwe lay-out naarmate de kaart-UI verandert.

Demo visueel

Live-demo

Dynamische ankerposities met position-try-options

Menu's en submenu-navigatie zijn zoveel eenvoudiger te maken met een combinatie van popover- en ankerpositionering. En wanneer u met uw verankerde element de rand van een kijkvenster bereikt, kunt u de browser de positioneringswijziging ook voor u laten afhandelen. Je kunt dit op een paar manieren doen. De eerste is om uw eigen positioneringsregels te maken. In dit geval bevindt het submenu zich in eerste instantie rechts van de knop ‘storefront’. Maar je kunt een @position-try blok maken voor als er niet genoeg ruimte is aan de rechterkant van het menu, door het een aangepaste identificatie van --bottom te geven. Vervolgens verbindt u dit @position-try blok met het anker met behulp van position-try-options .

Nu zal de browser schakelen tussen deze verankerde toestanden, eerst de juiste positie proberen en dan naar de onderkant verschuiven. En dat kan met een mooie overgang.

Demo visueel

Live-demo

#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 zijn er een paar trefwoorden die de browser biedt als u basisinteracties wilt, zoals het omdraaien van uw anker in het blok of inline-richtingen.

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

Voor een eenvoudige flipping-ervaring kunt u profiteren van deze flip-trefwoordwaarden en het schrijven van een position-try -definitie helemaal overslaan. U kunt nu dus een volledig functioneel locatie-responsief ankergepositioneerd element hebben met slechts een paar regels CSS.

Demo visueel

Live-demo

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

Meer informatie over het gebruik van ankerpositionering .

De toekomst van een gelaagde gebruikersinterface

We zien overal gekoppelde ervaringen, en de reeks functies die in dit bericht worden getoond, zijn een uitstekend begin om creativiteit en betere controle over ankergepositioneerde elementen en gelaagde interfaces te ontketenen. Maar dit is nog maar het begin. Momenteel werkt popover bijvoorbeeld alleen met knoppen als aanroepend element, of met JavaScript. Voor zoiets als voorvertoningen in Wikipedia-stijl, een patroon dat overal op het webplatform te zien is, moet het mogelijk zijn om ermee te communiceren en ook een popover te activeren via een link en van de gebruiker die interesse toont zonder noodzakelijkerwijs door te klikken, zoals een hover of een tabblad. focus.

Als volgende stap voor de popover-API werken we aan interesttarget om deze behoeften op te lossen en het gemakkelijker te maken om deze ervaringen opnieuw te creëren met de juiste ingebouwde toegankelijkheidshooks. Dit is een uitdagend toegankelijkheidsprobleem om op te lossen, met veel open vragen. rond ideaal gedrag, maar het oplossen en normaliseren van deze functionaliteit op platformniveau zou 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 nog een toekomstgerichte algemene aanroeper ( invoketarget ) beschikbaar om te testen in Canary dankzij het werk van twee externe ontwikkelaars, Keith Cirkel en Luke Warlow. invoketarget ondersteunt de declaratieve ontwikkelaarservaring dat popovertarget popovers biedt, genormaliseerd voor alle interactieve elementen, inclusief <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 gebruiksscenario's zijn die nog niet door deze API worden gedekt. Bijvoorbeeld het stylen van de pijl die een verankerd element met zijn anker verbindt, vooral als de positie van het verankerde element verandert, en het mogelijk maken dat een element ‘schuift’ en in het kijkvenster blijft in plaats van naar een andere positie te springen die is ingesteld wanneer het zijn grens bereikt doos. Dus hoewel we blij zijn met deze krachtige API, kijken we er ook naar uit om de mogelijkheden ervan in de toekomst nog verder uit te breiden.

Stijlbaar selecteren

Door popover en anchor samen te gebruiken, heeft het team vooruitgang geboekt bij het eindelijk mogelijk maken van een aanpasbare vervolgkeuzelijst. Het goede nieuws is dat er veel vooruitgang is geboekt. Het slechte nieuws is dat deze API zich momenteel nog in een experimentele staat bevindt. Ik ben echter verheugd om enkele live demo's en updates over onze voortgang te delen en hopelijk wat van uw feedback te krijgen. Ten eerste is er vooruitgang geboekt bij het aanmelden van gebruikers voor de nieuwe, aanpasbare select-ervaring. De huidige, onderhanden zijnde manier om dit te doen, is door een eigenschap uiterlijk in CSS te gebruiken, ingesteld op appearance: base-select . Zodra het uiterlijk is ingesteld, meldt u zich aan voor een nieuwe, aanpasbare select-ervaring.

select {
  appearance: base-select;
}

Opmerking: houd er rekening mee dat dit in dit stadium een ​​experimentele API is en dat deze syntaxis dus waarschijnlijk zal veranderen.

Naast appearance: base-select zijn er een paar nieuwe HTML-updates. Deze omvatten de mogelijkheid om uw opties in een datalist te plaatsen voor aanpassing en de mogelijkheid om willekeurige niet-interactieve inhoud zoals afbeeldingen aan uw opties toe te voegen. Je hebt ook toegang tot een nieuw element, <selectedoption> , dat de inhoud van de opties in zichzelf weerspiegelt, dat je vervolgens aan je eigen behoeften 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 type antwoord vertegenwoordigt om ruimte te besparen. U kunt basisweergavestijlen binnen selectedoption gebruiken om de optiestijl te onderscheiden van de voorbeeldstijl. In dit geval kan de tekst die in de optie wordt weergegeven visueel worden verborgen in de 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, zodat de inhoud gemakkelijker door gebruikers kan worden geparseerd. Omdat niet-ondersteunde browsers de regels negeren die ze niet begrijpen, zoals de aangepaste knop, datalijst, geselecteerde optie en afbeeldingen binnen de opties, zal de terugval vergelijkbaar zijn met de huidige standaard selectie-UI.

Ondersteunde browservisualisatie aan de linkerkant versus niet-ondersteunde browserfallback aan de rechterkant.

Met aanpasbare selecties zijn de mogelijkheden eindeloos. Ik ben vooral dol op deze landenkiezer in Airbnb-stijl, omdat er een slimme stijl is voor responsief ontwerp. Je kunt dit en nog veel meer doen met de komende styleable select, waardoor het een broodnodige toevoeging aan het webplatform wordt.

Demo visueel

Live-demo

Exclusief accordeon

Het oplossen van geselecteerde styling (en alle onderdelen die daarbij horen) is niet het enige UI-component waarop het Chrome-team zich heeft gefocust. De eerste aanvullende componentupdate is de mogelijkheid om exclusieve accordeons te maken, waarbij slechts één van de items in de accordeon tegelijk kan worden geopend

Browserondersteuning

• 120
• 120
• 130
• 17.2

De manier om dit in te schakelen is door dezelfde naamwaarde toe te passen op meerdere detailelementen, waardoor een verbonden groep details ontstaat, vergelijkbaar met een groep keuzerondjes.

Exclusieve accordeondemo

<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 van de UI-component zijn de :user-valid en :user-invalid pseudo-klassen. De :user-valid en :user-invalid pseudo-klassen zijn de laatste tijd stabiel in alle browsers en gedragen zich op dezelfde manier als de :valid en :invalid pseudo-klassen, maar komen pas overeen met een formuliercontrole nadat een gebruiker significante interactie heeft gehad met de invoer. Dit betekent dat er aanzienlijk minder code nodig is om te bepalen of er interactie is geweest met een formulierwaarde, of dat deze “vies” is geworden, wat erg handig kan zijn voor het geven van gebruikersfeedback, en vermindert veel scripting die nodig zou zijn om dit in de toekomst te doen. verleden.

Browserondersteuning

• 119
• 119
• 88
• 16.5

Bron

Demoschermcast

Live-demo

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 formuliervalidatie door gebruikers* .

field-sizing: content

Een andere handige componentupdate die onlangs is geland is field-sizing: content , die kan worden toegepast op formulierbesturingselementen zoals invoer en tekstgebieden. Hierdoor kan de omvang van de invoer groter (of kleiner) worden, afhankelijk van de inhoud ervan. field-sizing: content kan bijzonder handig zijn voor tekstgebieden, omdat u niet langer gebonden bent aan vaste formaten waarbij u mogelijk omhoog moet scrollen om te zien wat u in de eerdere delen van uw prompt in een te klein invoervak ​​hebt geschreven.

Browserondersteuning

• 123
• 123
• X
• X

Bron

Demoschermcast

Live-demo

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

Meer informatie over veldgrootte .

<hr> in <select>

De mogelijkheid om het <hr> - of horizontale regelelement in selecties in te schakelen is een andere kleine maar nuttige componentfunctie. Hoewel dit niet veel semantisch nut heeft, helpt het je wel om inhoud mooi te scheiden binnen een geselecteerde lijst, vooral inhoud die je misschien niet noodzakelijkerwijs wilt groeperen met een optgroup, zoals een tijdelijke aanduidingswaarde.

Selecteer Schermafbeelding

Selecteer Livedemo

<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>

Meer informatie over het gebruik van hr in select

Verbeteringen van de levenskwaliteit

We zijn voortdurend aan het itereren, en dat geldt niet alleen voor interacties en componenten. Er zijn het afgelopen jaar nog veel meer updates over de kwaliteit van leven verschenen.

Nesten met vooruitkijken

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. Hierdoor voelt het nestelen zoveel ergonomischer en vergelijkbaar met wat ik in het verleden gewend was.

Browserondersteuning

• 120
• 120
• 117
• 17.2

Bron

Een van mijn favoriete dingen van CSS-nesten is dat je hiermee componenten visueel kunt blokkeren, en dat je binnen die componenten statussen en modifiers kunt opnemen, zoals containerquery's en mediaquery's. Voorheen had ik de gewoonte om al deze zoekopdrachten onderaan het bestand te groeperen voor specificiteitsdoeleinden. Nu kunt u ze op een zinvolle manier schrijven, direct naast de rest van uw code

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

Inhoud uitlijnen voor blokindeling

Een andere hele leuke verandering is de mogelijkheid om centreermechanismen te gebruiken, zoals align-content in de blokindeling. 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 het instorten van de marges, die je misschien niet wilt van die lay-outalgoritmen.

Browserondersteuning

• 123
• 123
• 125
• 17.4

Schermafbeelding

Live-demo

div {
  align-content: center;
}

Tekstomloop: evenwichtig en mooi

Over lay-out gesproken: de tekstlay-out heeft een mooie verbetering gekregen door 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 op de laatste regel van de tekst.

Demoschermcast

Live-demo

In de volgende demo kun je, door de schuifregelaar te slepen, de effecten van balance en pretty op een kop en een alinea vergelijken. Probeer de demo in een andere taal te vertalen!

h1 {
  text-wrap: balance;
}

Meer informatie over tekstomloop: balans .

Internationale typografische updates

Updates voor de typografische lay-out voor CJK-tekstfuncties hebben het afgelopen jaar veel leuke updates gekregen, zoals de functie word-break: auto-phrase die de regel omsluit op de natuurlijke zinsgrens.

Browserondersteuning

• 119
• 119
• X
• X

Vergelijking van word-break: normal en word-break: auto-phrase

En text-spacing-trim , waarmee spatiëring tussen leestekens wordt toegepast om de leesbaarheid van Chinese, Japanse en Koreaanse typografie te verbeteren voor visueel aantrekkelijkere resultaten.

Browserondersteuning

• 123
• 123
• X
• X

Bron

Wanneer leestekens op een rij verschijnen, moet de rechterhelft van de CJK-periode worden verwijderd.

Relatieve kleursyntaxis

In de wereld van kleurthema’s zagen we een grote update met relatieve kleursyntaxis.

In dit voorbeeld gebruiken de kleuren hier een op Oklch gebaseerd thema. Naarmate de tintwaarde wordt aangepast op basis van de schuifregelaar, verandert het hele thema. Dit kan worden bereikt met de 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.

Demo screencast

Live Demo

In de volgende demo kun je vergelijken door de schuifregelaar te slepen, de effecten van balance en pretty op een kop en een paragraaf. Probeer de demo in een andere taal te vertalen!

: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.

Browserondersteuning

• 123
• 123
• 120
• 17.5

Bron

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() .

Visualisatie van light-dark() . Zie Demo voor meer.

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.

Browserondersteuning

• 105
• 105
• 121
• 15.4

Bron

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.

Demo van has() wordt gebruikt om vergelijkingsblokken op tokopedie te stylen.

:has() is al met name nuttig gebleken voor veel bedrijven , waaronder PolicyBazaar, die gebruiken :has() style blokken op basis van hun interieurinhoud, zoals in de sectie Compare, waar de stijl zich aanpast als er een plan is om een ​​plan te zijn Vergelijk in het blok, 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, die de mogelijkheid kunnen geven om de intrinsieke grootte van een element te ondervragen om stijlen toe te passen: een veel meer fijne kam dan media-query's, die alleen de viewport vragen maat.

Browserondersteuning

• 105
• 105
• 110
• 16

Bron

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.

Angular.DEV -site die containerquery's presenteert in de headerkaarten.

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.

Demo screencast

Live Demo

Het herscheppen van de Angular Header Card Container Query.

@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.

Browserondersteuning

• 85
• 85
• 128
• 16.4

Bron

Demo screencast

Live Demo

@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, kwaliteit van leven verbeteringen in architectuur, lay -out, typografie en responsief ontwerp, lost 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 gebruiker behoeften.

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.