CSS verpakt: 2023!

CSS verpakt: 2023!

Ga naar inhoud:

• Architecturale fundamenten
• Trigonometrische functies
• Complexe nde-* selectie
• Domein
• Nesten

• Typografie
• Beginletter
• Balans van tekstomloop/mooi

• Kleur
• Kleurniveau 4
• Kleurmixfunctie
• Relatieve kleursyntaxis

• Responsief ontwerp
• Containerquery's
• Stijlquery's
• : heeft een selector
• Mediaquery bijwerken
• Mediaquery scripten
• Transparantie mediaquery

• Interactie
• Overgangen bekijken
• Lineaire versoepelingsfunctie
• Scrolleinde
• Scrollgestuurde animaties
• Uitgestelde tijdlijnbijlage
• Discrete eigendomsovergangen
• Regel voor startstijl
• Overlay-animatie

• Componenten
• Pop-over
• Uur in selectie
• Gebruiker-geldige/ongeldige pseudo-klassen
• Exclusief accordeon

Wauw! 2023 was een enorm jaar voor CSS!

Van #Interop2023 tot vele nieuwe landingen in de CSS- en UI-ruimte die mogelijkheden bieden die ontwikkelaars ooit voor onmogelijk hielden op het webplatform. Nu ondersteunt elke moderne browser containerquery's, subgrid, de :has() selector en een hele reeks nieuwe kleurruimten en functies . We hebben ondersteuning in Chrome voor scrollgestuurde animaties met alleen CSS en vloeiende animaties tussen webweergaven met weergaveovergangen . En als klap op de vuurpijl zijn er zoveel nieuwe primitieven die zijn geland voor betere ontwikkelaarservaringen, zoals CSS-nesten en scoped -stijlen.

Wat een jaar was het! En daarom willen we dit mijlpaaljaar afsluiten met het vieren en erkennen van al het harde werk van browserontwikkelaars en de webgemeenschap die dit allemaal mogelijk hebben gemaakt.

Let op de nieuwe Baseline-badges naast de functiekoppen! Lees hier meer.

• = Nieuw beschikbaar in alle stabiele versies van de belangrijkste browsers.

• = Gedeeltelijke beschikbaarheid in de belangrijkste browsers.

Architecturale fundamenten

Laten we beginnen met updates van de belangrijkste CSS-taal en -mogelijkheden. Dit zijn functies die fundamenteel zijn voor de manier waarop u stijlen schrijft en organiseert, en die de ontwikkelaar veel kracht geven.

Trigonometrische functies

Browserondersteuning

• 111
• 111
• 108
• 15.4

Bron

Chrome 111 heeft ondersteuning toegevoegd voor de trigonometrische functies sin() , cos() , tan() , asin() , acos() , atan() en atan2() , waardoor ze beschikbaar zijn voor alle grote zoekmachines. Deze functies zijn erg handig voor animatie- en lay-outdoeleinden. Het is nu bijvoorbeeld veel eenvoudiger om elementen op een cirkel rond een gekozen middelpunt te plaatsen.

Trigonometrische functies demo

Leer meer over de trigonometrische functies in CSS .

Complexe nde-* selectie

Browserondersteuning

• 111
• 111
• 113
• 9

Met de :nth-child() pseudo-klasse selector is het mogelijk om elementen in de DOM te selecteren op basis van hun index. Met behulp van de An+B microsyntaxis krijgt u nauwkeurige controle over welke elementen u wilt selecteren.

Standaard houden de :nth-*() pseudos rekening met alle onderliggende elementen. Vanaf Chrome 111 kunt u optioneel een selectorlijst doorgeven aan :nth-child() :nth-last-child() . Op die manier kun je de lijst met kinderen voorfilteren voordat An+B zijn ding doet.

In de volgende demo wordt de 3n+1 logica alleen op de kleine poppen toegepast door ze vooraf te filteren met behulp of .small . Gebruik de vervolgkeuzelijsten om de gebruikte selector dynamisch te wijzigen.

Complexe nde-* selectiedemo

Meer informatie over complexe nde-* selecties .

Domein

Browserondersteuning

• 118
• 118
• 
• 17.4

Bron

Chrome 118 heeft ondersteuning toegevoegd voor @scope , een at-regel waarmee u de bereikkiezer kunt afstemmen op een specifieke substructuur van het document. Met scoped-stijlen kunt u heel specifiek zijn over welke elementen u selecteert, zonder dat u al te specifieke selectors hoeft te schrijven of deze nauw aan de DOM-structuur hoeft te koppelen.

Een scoped-subboom wordt gedefinieerd door een scoping root (de bovengrens) en een optionele scopinglimiet (de ondergrens).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Stijlregels die in een bereikblok worden geplaatst, richten zich alleen op elementen binnen de uitgesneden subboom. De volgende stijlregel met bereik richt zich bijvoorbeeld alleen op <img> -elementen die zich tussen het .card element en een geneste component bevinden die overeenkomt met de [data-component] -selector.

@scope (.card) to ([data-component]) {
  img { … }
}

In de volgende demo komen de <img> -elementen in de carrouselcomponent niet overeen vanwege de toegepaste bereiklimiet.

Schermafbeelding van Scope-demo

Scope live-demo

CSS @ @scope demo

Lees meer over @scope in het artikel "Hoe u @scope gebruikt om het bereik van uw selectors te beperken" . In dit artikel leert u over de :scope selector, hoe specificiteit wordt afgehandeld, scopes zonder prelude en hoe de cascade wordt beïnvloed door @scope .

Nesten

Browserondersteuning

• 120
• 120
• 117
• 17.2

Bron

Vóór het nesten moest elke selector expliciet worden gedeclareerd, afzonderlijk van elkaar. Dit leidt tot herhaling, stylesheet-bulk en een verspreide schrijfervaring. Nu kunnen selectors worden voortgezet met daarin gegroepeerde gerelateerde stijlregels.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Nesten Screencast

Live demo nesten

Verander de ontspannen nestkeuzeschakelaar om de winnaar van de race te bepalen

Nesten kan het gewicht van een stylesheet verminderen, de overhead van herhalende selectors verminderen en componentstijlen centraliseren. De syntaxis werd aanvankelijk uitgebracht met een beperking die het gebruik van & op verschillende plaatsen vereiste, maar is sindsdien opgeheven met een geneste, ontspannen syntaxisupdate .

Meer informatie over nesten .

Subraster

Browserondersteuning

• 117
• 117
• 71
• 16

Bron

Met CSS- subgrid kunt u complexere rasters maken met een betere uitlijning tussen onderliggende lay-outs. Hiermee kan een raster dat zich binnen een ander raster bevindt, de rijen en kolommen van het buitenste raster als zijn eigen raster overnemen, door subgrid als waarde voor rasterrijen of -kolommen te gebruiken.

Subgrid-screencast

Subgrid live-demo

Kop-, hoofd- en voetteksten zijn afgestemd op de dynamische afmetingen van hun broers en zussen.

Subgrid is vooral handig om broers en zussen op elkaars dynamische inhoud af te stemmen. Dit zorgt ervoor dat copywriters, UX-schrijvers en vertalers niet hoeven te proberen een projectkopie te maken die in de lay-out "past". Met subgrid kan de lay-out worden aangepast aan de inhoud.

Meer informatie over subraster .

Typografie

Webtypografie heeft in 2023 enkele belangrijke updates ondergaan. Een bijzonder mooie progressieve verbetering is de eigenschap text-wrap . Deze eigenschap maakt aanpassing van de typografische lay-out mogelijk, samengesteld in de browser zonder dat extra scripting vereist is. Zeg vaarwel tegen lastige regellengtes en hallo tegen meer voorspelbare typografie!

Beginletter

Browserondersteuning

• 110
• 110
• X
• 9

Bron

De initial-letter , die begin dit jaar in Chrome 110 verschijnt, is een kleine maar krachtige CSS-functie die de stijl bepaalt voor de plaatsing van beginletters. U kunt letters in een neergelaten of verhoogde staat plaatsen. De eigenschap accepteert twee argumenten: het eerste voor hoe diep de letter in de overeenkomstige alinea moet worden geplaatst, en het tweede voor hoe ver de letter erboven moet worden geplaatst. Je kunt zelfs een combinatie van beide doen, zoals in de volgende demo.

Schermafbeelding van de beginletter

Demo met beginletter

Wijzig de waarden van de initial-letter voor het ::first-letter pseudo-element om het te zien verschuiven.

Meer informatie over beginletter .

tekstomloop: evenwichtig en mooi

Als ontwikkelaar kent u de uiteindelijke grootte, lettergrootte of zelfs de taal van een kop of alinea niet. Alle variabelen die nodig zijn voor een effectieve en esthetische behandeling van tekstterugloop bevinden zich in de browser. Omdat de browser alle factoren kent , zoals lettergrootte, taal en toegewezen gebied, is deze een uitstekende kandidaat voor het omgaan met geavanceerde en kwalitatief hoogwaardige tekstopmaak.

Dit is waar twee nieuwe technieken voor tekstterugloop van pas komen, de ene heet balance en de andere pretty . De balance probeert een harmonieus tekstblok te creëren, terwijl pretty probeert weeskinderen te voorkomen en een gezonde woordafbreking te garanderen. Beide taken worden traditioneel met de hand uitgevoerd, en het is verbazingwekkend om de taak aan de browser te geven en deze voor elke vertaalde taal te laten werken.

Screencast met tekstomloop

Live demo met tekstomloop

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!

Meer informatie over tekstomloop: balans .

Kleur

2023 was het jaar van kleur voor het webplatform. Met nieuwe kleurruimten en functies die dynamische kleurthema's mogelijk maken, houdt niets u tegen om de levendige, weelderige thema's te creëren die uw gebruikers verdienen, en deze ook aanpasbaar te maken!

HD-kleurruimten (kleurniveau 4)

Browserondersteuning

• 111
• 111
• 113
• 15

Bron

Browserondersteuning

• 111
• 111
• 113
• 15

Bron

Van de hardware tot de software, van de CSS tot de knipperende lampjes; het kan veel werk vergen voordat onze computers proberen kleuren zo goed weer te geven als onze menselijke ogen kunnen zien. In 2023 hebben we nieuwe kleuren, meer kleuren, nieuwe kleurruimten, kleurfuncties en nieuwe mogelijkheden.

CSS en kleur kunnen nu: - Controleren of de schermhardware van de gebruiker geschikt is voor HDR-kleuren met een breed spectrum. - Controleer of de browser van de gebruiker de kleursyntaxis zoals Oklch of Display P3 begrijpt. - Specificeer HDR-kleuren in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ en meer. - Creëer verlopen met HDR-kleuren, - Interpoleer verlopen in alternatieve kleurruimten. - Meng kleuren met color-mix() . - Creëer kleurvarianten met relatieve kleursyntaxis.

Kleur 4 schermcast

Kleur 4-demo

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

Meer informatie over Kleur 4 en kleurruimten .

kleurmixfunctie

Browserondersteuning

• 111
• 111
• 113
• 16.2

Bron

Kleur mengen is een klassieke taak en in 2023 kan CSS het ook. Je kunt niet alleen wit of zwart tot een kleur mengen, maar ook transparantie, en dit alles in elke kleurruimte naar keuze. Het is tegelijkertijd een basiskleurfunctie en een geavanceerde kleurfunctie.

color-mix() Screencast

color-mix() Demo

Met Demo kunt u twee kleuren kiezen met een kleurkiezer, de kleurruimte bepalen en hoeveel van elke kleur dominant moet zijn in de mix.

Je kunt color-mix() zien als een moment uit een verloop. Waar een verloop alle stappen toont die nodig zijn om van blauw naar wit te gaan, toont color-mix() slechts één stap. De zaken worden geavanceerder zodra u rekening begint te houden met kleurruimten en leert hoe verschillend de mengkleurruimte kan zijn voor de resultaten.

Meer informatie over color-mix() .

Relatieve kleursyntaxis

Relatieve kleursyntaxis (RCS) is een aanvullende methode voor color-mix() voor het maken van kleurvarianten. Het is iets krachtiger dan color-mix(), maar ook een andere strategie voor het werken met kleur. color-mix() kan de kleur wit mengen om een ​​kleur lichter te maken, waarbij RCS nauwkeurige toegang geeft tot het lichtheidskanaal en de mogelijkheid om calc() op het kanaal te gebruiken om de lichtheid programmatisch te verminderen of te vergroten.

RCS-screencast

RCS Live-demo

Verander de kleur, verander de scènes. Elk maakt gebruik van de relatieve kleursyntaxis om varianten van de basiskleur te creëren.

Met RCS kunt u relatieve en absolute manipulaties op een kleur uitvoeren. Een relatieve verandering is er een waarbij u de huidige waarde van verzadiging of lichtheid neemt en deze wijzigt met calc() . Een absolute verandering is een verandering waarbij u een kanaalwaarde vervangt door een geheel nieuwe, zoals het instellen van de dekking op 50%. Deze syntaxis biedt u zinvolle hulpmiddelen voor thema's, just-in-time-varianten en meer.

Meer informatie over de syntaxis van relatieve kleuren .

Responsief ontwerp

Responsief ontwerp evolueerde in 2023. Dit baanbrekende jaar maakte nieuwe functies mogelijk die de manier waarop we responsieve webervaringen bouwen volledig veranderen, en luidde een nieuw model van op componenten gebaseerd responsief ontwerp in. De combinatie van containerquery's en :has() ondersteunt componenten die hun responsieve en logische stijl bezitten, gebaseerd op de grootte van hun ouder, evenals de aanwezigheid of status van een van hun kinderen. Dat betekent dat u eindelijk de lay-out op paginaniveau kunt scheiden van de lay-out op componentniveau, en de logica één keer kunt schrijven om uw component overal te gebruiken!

Formaatcontainerquery's

Browserondersteuning

• 105
• 105
• 110
• 16

Bron

In plaats van de globale grootte-informatie van de viewport te gebruiken om CSS-stijlen toe te passen, ondersteunen containerquery's het opvragen van een bovenliggend element op de pagina. Dit betekent dat componenten op een dynamische manier kunnen worden vormgegeven in meerdere lay-outs en in meerdere weergaven. Op Valentijnsdag dit jaar (14 februari) werden containerquery's naar grootte stabiel in alle moderne browsers.

Als u deze functie wilt gebruiken, stelt u eerst inperking in op het element dat u opvraagt, en gebruikt u vervolgens, net als bij een mediaquery, @container met de parameters size om de stijlen toe te passen. Naast containerquery's krijgt u ook de grootte van containerquery's. In de volgende demo wordt de containerquerygrootte cqi (die de grootte van de inline container vertegenwoordigt) gebruikt om de grootte van de kaartkop te bepalen.

@container Screencast

@containerdemo

Meer informatie over het gebruik van containerquery's .

Stijlcontainerquery's

Browserondersteuning

• 111
• 111
• X
• 18

Bron

Stijlquery's zijn gedeeltelijk geïmplementeerd in Chrome 111. Met stijlquery's kunt u momenteel de waarde van aangepaste eigenschappen van een bovenliggend element opvragen wanneer u @container style() gebruikt. Vraag bijvoorbeeld of er een aangepaste eigenschapswaarde bestaat of is ingesteld op een bepaalde waarde, zoals @container style(--rain: true) .

Schermafbeelding van stijlquery

Demo voor stijlquery's

Verander de kleur, verander de scènes. Elk maakt gebruik van de relatieve kleursyntaxis om varianten van de basiskleur te creëren.

Hoewel dit lijkt op het gebruik van klassenamen in CSS, hebben stijlquery's enkele voordelen. De eerste is dat u met stijlquery's de waarde in CSS indien nodig kunt bijwerken voor pseudo-statussen. In toekomstige versies van de implementatie kunt u ook waardenbereiken opvragen om de toegepaste stijl te bepalen, zoals style(60 <= --weather <= 70) , en stijl gebaseerd op eigenschap-waardeparen zoals style(font-style: italic) .

Meer informatie over het gebruik van stijlquery's .

:heeft() selector

Browserondersteuning

• 105
• 105
• 121
• 15.4

Bron

Bijna 20 jaar lang vroegen ontwikkelaars om een ​​"parent selector" in CSS. Met de :has() selector die in Chrome 105 werd geleverd, is dit nu mogelijk. Als u bijvoorbeeld .card:has(img.hero) gebruikt, worden de .card elementen met een hero-afbeelding als kind geselecteerd.

:has() Demo-screenshot

:has() Live demo

CSS :has() demo: Kaart zonder/met afbeelding

Omdat :has() een relatieve selectielijst als argument accepteert, kunt u veel meer dan het bovenliggende element selecteren. Met behulp van verschillende CSS-combinatoren is het mogelijk om niet alleen omhoog te gaan in de DOM-boom, maar ook zijwaartse selecties uit te voeren. li:has(+ li:hover) selecteert bijvoorbeeld het <li> -element dat voorafgaat aan het momenteel zwevende <li> -element.

:heeft() Screencast

:heeft() Demo

CSS :has() demo: Dock

Meer informatie over de CSS :has() selector .

Mediaquery bijwerken

Browserondersteuning

• 113
• 113
• 102
• 17

Bron

De update biedt u een manier om de gebruikersinterface aan te passen aan de vernieuwingsfrequentie van een apparaat. De functie kan een waarde van fast , slow of none rapporteren die betrekking heeft op de mogelijkheden van verschillende apparaten.

De meeste apparaten waarvoor u ontwerpt, hebben waarschijnlijk een hoge vernieuwingsfrequentie. Dit omvat desktops en de meeste mobiele apparaten. eReaders en apparaten zoals betaalsystemen met een laag vermogen kunnen een lage verversingssnelheid hebben. Wetende dat het toestel niet overweg kan met animaties of frequente updates, betekent dat je batterijverbruik of foutieve weergave-updates kunt besparen.

Schermcast bijwerken

Demo bijwerken

Simuleer (door een radio-optie te kiezen) een updatesnelheidswaarde en kijk welke invloed dit heeft op de eend.

Meer informatie over @media (update) .

Mediaquery scripten

Browserondersteuning

• 120
• 120
• 113
• 17

Bron

De scripting mediaquery kan worden gebruikt om te controleren of JavaScript al dan niet beschikbaar is. Dit is erg leuk voor progressieve verbetering. Vóór deze mediaquery was een strategie om te detecteren of JavaScript beschikbaar was het plaatsen van een nojs -klasse in de HTML en deze met JavaScript verwijderen. Deze scripts kunnen worden verwijderd omdat CSS nu een manier heeft om JavaScript te detecteren en dienovereenkomstig aan te passen.

Leer hier hoe u JavaScript op een pagina kunt in- en uitschakelen voor testen via Chrome DevTools .

Scripting-screencast

Scriptdemo

Overweeg een themawisseling op een website. De scriptingmediaquery kan helpen om de overstap tegen de systeemvoorkeur te laten werken, aangezien er geen JavaScript beschikbaar is. Of overweeg een schakelcomponent: als JavaScript beschikbaar is, kan de schakelaar met een gebaar worden overgehaald in plaats van alleen maar aan en uit te worden gezet. Veel geweldige mogelijkheden om UX te upgraden als scripting beschikbaar is en tegelijkertijd een zinvolle basiservaring te bieden als scripting is uitgeschakeld.

Meer informatie over scripts .

Mediaquery met verminderde transparantie

Browserondersteuning

• 118
• 118
• 
• X

Bron

Niet-ondoorzichtige interfaces kunnen hoofdpijn veroorzaken of een visuele strijd zijn bij verschillende soorten gezichtsstoornissen. Dit is de reden waarom Windows, macOS en iOS systeemvoorkeuren hebben die de transparantie van de gebruikersinterface kunnen verminderen of verwijderen. Deze mediaquery voor prefers-reduced-transparency sluit goed aan bij de andere voorkeursmediaquery's, waarmee je creatief kunt zijn en je ook kunt aanpassen aan gebruikers.

Screencast met verminderde transparantie

Demo voor verminderde transparantie

In sommige gevallen kunt u een alternatieve lay-out bieden, waarbij de inhoud niet over andere inhoud heen ligt. In andere gevallen kan de dekking van een kleur worden aangepast naar ondoorzichtig of bijna ondoorzichtig. De volgende blogpost bevat meer inspirerende demo's die zich aanpassen aan de voorkeur van de gebruiker. Bekijk ze eens als je nieuwsgierig bent naar momenten waarop deze mediavraag waardevol is.

Meer informatie over @media (geeft de voorkeur aan verminderde transparantie) .

Interactie

Interactie is een hoeksteen van digitale ervaringen. Het helpt gebruikers feedback te krijgen over waar ze op hebben geklikt en waar ze zich in een virtuele ruimte bevinden. Dit jaar zijn er veel opwindende functies geïntroduceerd die het gemakkelijker hebben gemaakt om interacties samen te stellen en te implementeren, waardoor soepele gebruikerstrajecten en een verfijndere webervaring mogelijk zijn.

Overgangen bekijken

Browserondersteuning

• 111
• 111
• X
• 18

Bron

Weergaveovergangen hebben een enorme impact op de gebruikerservaring van een pagina. Met de View Transitions API kunt u visuele overgangen creëren tussen twee paginastatussen van uw Single Page Application. Deze overgangen kunnen overgangen van een volledige pagina zijn, of kleinere zaken op een pagina, zoals het toevoegen of verwijderen van een nieuw item aan een lijst.

De kern van de View Transitions API is de functie document.startViewTranstion . Geef een functie door die de DOM bijwerkt naar de nieuwe staat, en de API regelt alles voor u. Dit gebeurt door een momentopname voor en na te maken en vervolgens tussen de twee over te schakelen. Met behulp van CSS kunt u bepalen wat er wordt vastgelegd en optioneel aanpassen hoe deze snapshots moeten worden geanimeerd.

VT-screencast

VT-demo

Bekijk de Transitions-demo

De View Transitions API voor applicaties met één pagina die wordt geleverd in Chrome 111. Meer informatie over View Transitions .

Lineaire versoepelingsfunctie

Browserondersteuning

• 113
• 113
• 112
• 17.2

Laat u niet misleiden door de naam van deze functie. Met de functie linear() (niet te verwarren met het trefwoord linear ) kunt u op eenvoudige wijze complexe easing-functies maken, met als compromis dat u enige precisie verliest.

Vóór linear() , dat werd geleverd in Chrome 113, was het onmogelijk om stuiter- of veereffecten te creëren in CSS. Dankzij linear() is het mogelijk deze versoepelingen te benaderen door ze te vereenvoudigen tot een reeks punten en vervolgens lineair te interpoleren tussen deze punten.

De oorspronkelijke bouncecurve in blauw wordt vereenvoudigd door een reeks belangrijke punten weergegeven in groen. De functie linear() gebruikt deze punten en interpoleert er lineair tussen.

Lineaire versoepeling Screencast

Demo voor lineaire versoepeling

CSS linear() demo.

Meer informatie over linear() . Gebruik de lineaire easing-generator om linear() curven te maken.

Scroll naar Einde

Browserondersteuning

• 114
• 114
• 109
• X

Bron

Veel interfaces bevatten scroll-interacties, en soms moet de interface informatie synchroniseren die relevant is voor de huidige scrollpositie, of gegevens ophalen op basis van de huidige status. Vóór de scrollend gebeurtenis moest u een onnauwkeurige time-outmethode gebruiken die kon worden geactiveerd terwijl de vinger van de gebruiker nog op het scherm was. Met de scrollend -gebeurtenis beschikt u over een perfect getimede scrollend-gebeurtenis die begrijpt of een gebruiker nog steeds bezig is met een gebaar of niet.

Scrollend Screencast

Scrollend-demo

Dit was belangrijk voor de browser, omdat JavaScript de aanwezigheid van vingers op het scherm tijdens het scrollen niet kan volgen; de informatie is gewoonweg niet beschikbaar. Stukken onnauwkeurige code voor een poging tot scrollen kunnen nu worden verwijderd en vervangen door een zeer nauwkeurige gebeurtenis die eigendom is van de browser.

Meer informatie over scrollend .

Scrollgestuurde animaties

Browserondersteuning

• 115
• 115
• 
• X

Bron

Scrollgestuurde animaties zijn een opwindende functie die beschikbaar is vanaf Chrome 115. Hiermee kunt u een bestaande CSS-animatie of een animatie die is gebouwd met de Web Animations API gebruiken en deze koppelen aan de scroll-offset van een scroller. Terwijl u omhoog en omlaag scrolt (of naar links en rechts in een horizontale scroller), beweegt de gekoppelde animatie als directe reactie vooruit en achteruit.

Met een ScrollTimeline kunt u de algehele voortgang van een scroller volgen, zoals gedemonstreerd in de volgende demo. Terwijl u naar het einde van de pagina bladert, wordt de tekst karakter voor karakter onthuld.

SDA-screencast

SDA-demo

CSS-scrollgestuurde animatiedemo: scroll-tijdlijn

Met een ViewTimeline kunt u een element volgen terwijl het de scrollport passeert. Dit werkt op dezelfde manier als hoe IntersectionObserver een element volgt. In de volgende demo onthult elke afbeelding zichzelf vanaf het moment dat deze de scrollport binnenkomt totdat deze zich in het midden bevindt.

SDA-demoscreencast

SDA live-demo

CSS-scrollgestuurde animatiedemo: bekijk de tijdlijn

Omdat scroll-driven animaties werken met CSS-animaties en de Web Animations API, kun je profiteren van alle voordelen die deze API’s met zich meebrengen. Dat omvat de mogelijkheid om deze animaties uit de hoofdlijn te laten lopen. Je kunt nu zijdezachte animaties krijgen, aangestuurd door scrollen, die van de hoofdlijn aflopen met slechts een paar regels extra code – wat is er niet leuk aan?

Voor meer informatie over scroll-driven animaties , bekijk dit artikel met alle details of ga naar scroll-driven-animations.style waar veel demo's te vinden zijn.

Uitgestelde tijdlijnbijlage

Browserondersteuning

• 116
• 116
• X
• X

Bron

Bij het toepassen van een scroll-gestuurde animatie via CSS loopt het opzoekmechanisme om de controlerende scroller te vinden altijd omhoog in de DOM-boom, waardoor het beperkt is tot alleen scroll-voorouders. Heel vaak is het element dat moet worden geanimeerd echter geen kind van de scroller, maar een element dat zich in een geheel andere subboom bevindt.

Om ervoor te zorgen dat het geanimeerde element een benoemde scroll-tijdlijn van een niet-voorouder kan vinden, gebruikt u de timeline-scope eigenschap op een gedeeld bovenliggend element. Hierdoor kan de gedefinieerde scroll-timeline of view-timeline met die naam eraan worden gekoppeld, waardoor deze een breder bereik krijgt. Als dit is ingevoerd, kan elk kind van die gedeelde ouder de tijdlijn met die naam gebruiken.

Wanneer timeline-scope is gedeclareerd op de gedeelde ouder, kan de scroll-timeline die op de scroller is gedeclareerd, worden gevonden door het element dat deze gebruikt als animation-timeline

Demoschermcast

Live-demo

Demo van CSS-scrollgestuurde animaties: uitgestelde tijdlijnbijlage

Meer informatie over timeline-scope .

Discrete eigendomsanimaties

Een andere nieuwe mogelijkheid in 2023 is de mogelijkheid om discrete animaties te animeren, zoals animeren van en naar display: none . Vanaf Chrome 116 kunt u display en content-visibility gebruiken in sleutelframeregels. U kunt elke afzonderlijke eigenschap ook op het 50%-punt overzetten in plaats van op het 0%-punt. Dit wordt bereikt met de eigenschap transition-behavior met behulp van het sleutelwoord allow-discrete , of in de eigenschap transition als afkorting.

Discrete animatie. Schermcast

Discrete animatie. Demo

Meer informatie over het overzetten van discrete animaties .

@startstijl

Browserondersteuning

• 117
• 117
• 129
• 17.5

Bron

De CSS-regel @starting-style bouwt voort op nieuwe webmogelijkheden voor het animeren van en naar display: none . Deze regel biedt een manier om een ​​element een 'before-open'-stijl te geven die de browser kan opzoeken voordat het element op de pagina wordt geopend. Dit is erg handig voor invoeranimaties en voor animaties in elementen zoals een popover of dialoogvenster. Het kan ook nuttig zijn wanneer u een element maakt en er animatie in wilt aanbrengen. Neem het volgende voorbeeld, waarin een popover attribuut (zie volgende sectie) in beeld wordt gebracht en soepel in de bovenste laag wordt geplaatst, van buitenaf. kijkvenster.

Screencast in @startstijl

Demo in @startstijl

Meer informatie over @startstijl en andere invoeranimaties.

Overlay

Browserondersteuning

• 117
• 117
• X
• X

Bron

De nieuwe CSS- overlay eigenschap kan aan uw overgang worden toegevoegd, zodat elementen met stijlen van de bovenste laag, zoals popover en dialog , soepel uit de bovenste laag kunnen animeren. Als u de overlay niet overschakelt, wordt uw element onmiddellijk weer geknipt, getransformeerd en bedekt, en ziet u de overgang niet gebeuren. Op dezelfde manier zorgt overlay ervoor dat ::backdrop soepel kan animeren wanneer het wordt toegevoegd aan een element uit de bovenste laag.

Overlay-screencast

Live-demo overlay

Meer informatie over overlay en andere exit-animaties.

Componenten

2023 was een belangrijk jaar voor het kruispunt van stijl- en HTML-componenten, met popover landing en veel werk rond de positionering van ankers en de toekomst van vervolgkeuzelijsten voor stijl. Deze componenten maken het eenvoudiger om gemeenschappelijke UI-patronen te bouwen zonder dat u telkens opnieuw hoeft te vertrouwen op extra bibliotheken of uw eigen statusbeheersystemen opnieuw hoeft op te bouwen.

Pop-over

Browserondersteuning

• 114
• 114
• 125
• 17

Bron

Met de Popover API kunt u elementen bouwen die bovenop de rest van de pagina liggen. Dit kunnen menu's, selecties en tooltips zijn. U kunt een eenvoudige popover maken door het popover -attribuut en een id toe te voegen aan het element dat verschijnt, en id -attribuut ervan te verbinden met een aanroepknop met behulp van popovertarget="my-popover" . De Popover-API ondersteunt:

• Promotie naar de bovenste laag. Popovers verschijnen op een aparte laag boven de rest van de pagina, zodat u 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 focusbeheer. Als u de popover opent, stopt het volgende tabblad in de popover.
• Toegankelijke toetsenbordbindingen. Als u op de esc -toets drukt of dubbel schakelt, wordt de popover gesloten en keert de focus terug.
• Toegankelijke componentbindingen. Het semantisch verbinden van een popover-element met een popover-trigger.

Popover-screencast

Popover live-demo

Horizontale regels in select

Een andere kleine verandering in HTML die dit jaar in Chrome en Safari is geïntroduceerd, is de mogelijkheid om horizontale regelelementen ( <hr> tags) toe te voegen aan <select> -elementen om uw inhoud visueel op te splitsen. Voorheen kon het plaatsen van een <hr> -tag in een select eenvoudigweg niet worden weergegeven. Maar dit jaar ondersteunen zowel Safari als Chrome deze functie, waardoor een betere scheiding van inhoud binnen <select> -elementen mogelijk wordt.

Selecteer Schermafbeelding

Selecteer Livedemo

Meer informatie over het gebruik van hr in select

:user-valide en ongeldige pseudo-klassen

Browserondersteuning

• 119
• 119
• 88
• 16.5

Bron

Stabiel in alle browsers dit jaar, gedragen de :user-valid en :user-invalid 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. Een formulierbesturingselement dat vereist en leeg is, komt overeen met :invalid zelfs als een gebruiker nog niet is begonnen met interactie met de pagina. Hetzelfde besturingselement komt niet overeen met :user-invalid totdat de gebruiker de invoer heeft gewijzigd en deze in een ongeldige status heeft gelaten.

Met deze nieuwe selectors is het niet langer nodig om stateful code te schrijven om bij te houden welke invoer een gebruiker heeft gewijzigd.

:gebruiker-* Screencast

:user-* Live demo

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

Exclusief accordeon

Browserondersteuning

• 120
• 120
• 130
• 17.2

Een veelgebruikt UI-patroon op internet is een accordeoncomponent. Om dit patroon te implementeren, combineer je een paar <details> -elementen, waarbij je ze vaak visueel groepeert om aan te geven dat ze bij elkaar horen.

Nieuw in Chrome 120 is ondersteuning voor het name op <details> -elementen. Wanneer dit attribuut wordt gebruikt, vormen meerdere <details> -elementen die dezelfde name hebben een semantische groep. Er kan maximaal één element in de groep tegelijk geopend zijn: wanneer u een van de <details> -elementen uit de groep opent, wordt het eerder geopende element automatisch gesloten. Dit type accordeon wordt een exclusieve accordeon genoemd.

Exclusieve accordeondemo

De <details> elementen die deel uitmaken van een exclusieve accordeon hoeven niet noodzakelijkerwijs broers en zussen te zijn. Ze kunnen over het document verspreid zijn.

Conclusie

CSS heeft de afgelopen jaren, en vooral in 2023, zo'n renaissance doorgemaakt. Als CSS nieuw voor je is of gewoon de basisbeginselen wil opfrissen, bekijk dan onze gratis cursus CSS leren, samen met de andere gratis cursussen die op internet worden aangeboden. .dev.

We wensen u fijne feestdagen en hopen dat u binnenkort de kans krijgt om enkele van deze briljante nieuwe CSS- en UI-functies in uw werk op te nemen!

⇾ Het Chrome UI DevRel-team,

Una Kravets

Bramus

Adam Argyle