Trigonometrische functies

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

Leer meer over de trigonometrische functies in CSS .

Complexe n-* selectie

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

Standaard houden de pseudo's :nth-*() rekening met alle onderliggende elementen. Vanaf Chrome 111 kun je optioneel een selectorlijst doorgeven aan :nth-child() :nth-last-child() . Zo kun je de lijst met onderliggende elementen alvast filteren voordat An+B zijn werk doet.

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

Meer informatie over complexe n-* selecties .

Domein

Chrome 118 heeft ondersteuning toegevoegd voor @scope , een at-regel waarmee je een selector kunt selecteren die overeenkomt met een specifieke substructuur van het document. Met scoped styling kun je heel specifiek bepalen welke elementen je selecteert, zonder dat je al te specifieke selectors hoeft te schrijven of ze strak aan de DOM-structuur hoeft te koppelen.

Een scoped subtree wordt gedefinieerd door een scoping root (de bovengrens) en een optionele scoping limit (de ondergrens).

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

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

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

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

Scope Demo Screenshot

Live demo van Scope

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

Nestelen

Vóór het nesten moest elke selector expliciet en afzonderlijk van elkaar worden gedeclareerd. Dit leidde tot herhaling, een overvloed aan stylesheets en een versnipperde schrijfervaring. Nu kunnen selectors worden gecontinueerd met bijbehorende stijlregels die erin zijn gegroepeerd.

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 kan de zwaarte 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 update van de versoepelde syntaxis voor nesten .

Meer informatie over nestelen .

Subraster

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

Subgrid is vooral handig om verwante content af te stemmen op elkaars dynamische content. Dit bevrijdt copywriters, UX-schrijvers en vertalers van de moeite om projectteksten te schrijven die 'passen' in de lay-out. Met Subgrid kan de lay-out worden aangepast aan de content.

Meer informatie over subgrid .

Beginletter

De initial-letter -eigenschap, die begin dit jaar in Chrome 110 verscheen, is een kleine maar krachtige CSS-functie die de stijl voor de plaatsing van beginletters bepaalt. Je kunt letters zowel in een neergelaten als in een verhoogde positie plaatsen. De eigenschap accepteert twee argumenten: de eerste geeft aan hoe diep de letter in de bijbehorende alinea moet komen te staan, en de tweede hoe ver de letter erboven moet komen te staan. Je kunt zelfs een combinatie van beide gebruiken, zoals in de volgende demo.

Schermafbeelding van de beginletter

Demo van de beginletter

Meer informatie over de beginletter .

tekstomloop: balans en mooi

Als ontwikkelaar weet je niet wat de uiteindelijke grootte, lettergrootte of zelfs de taal van een kop of alinea is. Alle variabelen die nodig zijn voor een effectieve en esthetische verwerking van tekstomloop, bevinden zich in de browser. Omdat de browser alle factoren wel kent, zoals lettergrootte, taal en toegewezen ruimte, is deze een uitstekende kandidaat voor geavanceerde en hoogwaardige tekstopmaak.

Hier komen twee nieuwe tekstomlooptechnieken van pas: balance en pretty . De balance waarde streeft naar een harmonieus tekstblok, terwijl pretty probeert om 'orphans' te voorkomen en gezonde afbreking te garanderen. Beide taken werden traditioneel handmatig uitgevoerd, en het is fantastisch om de taak aan de browser over te laten en het voor elke vertaalde taal te laten werken.

Meer informatie over tekstafbreking: balance .

HD-kleurruimten (kleurniveau 4)

Van hardware tot software, van CSS tot knipperende lichtjes; het kan onze computers veel werk kosten om kleuren zo goed mogelijk weer te geven. 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 HDR-kleuren met een breed kleurengamma ondersteunt. - Controleren of de browser van de gebruiker kleurensyntaxis zoals Oklch of Display P3 begrijpt. - HDR-kleuren specificeren in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ en meer. - Verlopen met HDR-kleuren maken. - Verlopen interpoleren in alternatieve kleurruimten. - Kleuren mengen met color-mix() . - Kleurvarianten maken met relatieve kleurensyntaxis.

Leer meer over Kleur 4 en kleurruimten .

kleurmengfunctie

Het mengen van kleuren is een klassieke taak en in 2023 kan CSS dat ook. Je kunt niet alleen wit of zwart in een kleur mengen, maar ook transparantie, en dit alles in elke gewenste kleurruimte. Het is tegelijkertijd een basiskleurfunctie en een geavanceerde kleurfunctie.

Je kunt color-mix() zien als een moment in de tijd van een gradiënt. Waar een gradiënt alle stappen laat zien die nodig zijn om van blauw naar wit te gaan, laat color-mix() slechts één stap zien. Het wordt geavanceerder zodra je rekening begint te houden met kleurruimten en leert hoe verschillend de mengkleurruimte kan zijn van de resultaten.

Meer informatie over color-mix() .

Relatieve kleursyntaxis

Relatieve kleursyntaxis (RCS) is een complementaire methode voor color-mix() voor het creëren van kleurvarianten. Het is iets krachtiger dan color-mix(), maar biedt ook een andere strategie voor het werken met kleur. color-mix() kan de kleur wit mengen om een ​​kleur lichter te maken, terwijl RCS nauwkeurige toegang biedt tot het helderheidskanaal en de mogelijkheid biedt om calc() op het kanaal te gebruiken om de helderheid programmatisch te verlagen of te verhogen.

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

Meer informatie over relatieve kleursyntaxis .

Grootte container query's

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 binnen de pagina. Dit betekent dat componenten dynamisch kunnen worden gestyled in meerdere lay-outs en weergaven. Containerquery's voor grootte zijn sinds Valentijnsdag dit jaar (14 februari) stabiel in alle moderne browsers.

Om deze functie te gebruiken, stelt u eerst containment in voor het element dat u queryt en gebruikt u vervolgens, net als bij een mediaquery, @container met de grootteparameters om de stijlen toe te passen. Samen met containerquery's krijgt u containerquerygroottes. In de volgende demo wordt de containerquerygrootte cqi (die de grootte van de inline container vertegenwoordigt) gebruikt om de grootte van de kaartheader te bepalen.

Meer informatie over het gebruik van containerquery's .

Stijlcontainerquery's

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 met behulp van @container style() . U kunt bijvoorbeeld opvragen of een aangepaste eigenschapswaarde bestaat of is ingesteld op een bepaalde waarde, zoals @container style(--rain: true) .

Schermafbeelding van stijlquery

Stijlquery-demo

Hoewel dit lijkt op het gebruik van klassenamen in CSS, hebben stijlquery's een aantal voordelen. Ten eerste kunt u met stijlquery's de waarde in CSS indien nodig bijwerken voor pseudostatussen. In toekomstige versies van de implementatie kunt u bovendien reeksen waarden opvragen om de toegepaste stijl te bepalen, zoals style(60 <= --weather <= 70) , en stijl op basis van eigenschap-waardeparen, zoals style(font-style: italic) .

Meer informatie over het gebruik van stijlquery's .

:has()-selector

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

:has() Demo-screenshot

:has() Live demo

Omdat :has() een relatieve selectorlijst als argument accepteert, kun je veel meer selecteren dan alleen het bovenliggende element. Met behulp van diverse CSS-combinators is het niet alleen mogelijk om hoger in de DOM-tree te gaan, maar ook zijwaartse selecties uit te voeren. Zo selecteert li:has(+ li:hover) het <li> -element dat voorafgaat aan het <li> -element waar momenteel de muis boven hangt.

Meer informatie over de CSS :has() selector .

Media query bijwerken

Met de update media query kunt u de gebruikersinterface aanpassen aan de vernieuwingsfrequentie van een apparaat. De functie kan een waarde van fast , slow of none rapporteren, afhankelijk van de mogelijkheden van verschillende apparaten.

De meeste apparaten waarvoor u ontwerpt, hebben waarschijnlijk een hoge verversingssnelheid. Dit geldt voor desktops en de meeste mobiele apparaten. E-readers en apparaten zoals betaalsystemen met een laag vermogen kunnen een lage verversingssnelheid hebben. Wetende dat het apparaat geen animaties of frequente updates aankan, kunt u batterijverbruik of foutieve weergave-updates besparen.

Lees meer over @media (update) .

Scripting media query

De scripting media query kan worden gebruikt om te controleren of JavaScript beschikbaar is. Dit is erg handig voor progressieve verbetering. Vóór deze media query was een strategie om te detecteren of JavaScript beschikbaar was, het plaatsen van een nojs -klasse in de HTML en deze te verwijderen met JavaScript. 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 .

Denk aan een thema-switch op een website. De scripting media query kan helpen om de switch te laten werken tegen de systeemvoorkeur in, aangezien er geen JavaScript beschikbaar is. Of denk aan een switchcomponent: als JavaScript beschikbaar is, kan de switch met een veegbeweging worden bediend in plaats van alleen maar aan en uit te zetten. Er zijn talloze geweldige mogelijkheden om de gebruikerservaring te verbeteren als scripting beschikbaar is, terwijl er tegelijkertijd een zinvolle basiservaring wordt geboden als scripting is uitgeschakeld.

Meer informatie over script .

Media query met verminderde transparantie

Niet-ondoorzichtige interfaces kunnen hoofdpijn veroorzaken of een visuele uitdaging vormen voor diverse visuele beperkingen. Daarom hebben Windows, macOS en iOS systeemvoorkeuren waarmee de transparantie van de gebruikersinterface kan worden verminderd of verwijderd. Deze media query voor prefers-reduced-transparency sluit goed aan bij de andere voorkeursmedia query's, waardoor je creatief kunt zijn en tegelijkertijd gebruikers kunt aanpassen.

In sommige gevallen kun je een alternatieve lay-out bieden waarbij content niet over andere content heen wordt gelegd. In andere gevallen kan de dekking van een kleur worden aangepast zodat deze dekkend of bijna dekkend is. De volgende blogpost bevat meer inspirerende demo's die zich aanpassen aan de voorkeuren van de gebruiker. Neem een ​​kijkje als je benieuwd bent naar momenten waarop deze media query waardevol is.

Meer informatie over @media (prefers-reduced-transparency) .

Bekijk overgangen

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 volledige pagina's beslaan, of kleinere elementen 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 mee die de DOM bijwerkt naar de nieuwe status, en de API regelt alles voor je. Dit gebeurt door een snapshot van voor en na te maken en vervolgens tussen beide te schakelen. Met CSS kun je bepalen wat er wordt vastgelegd en optioneel aanpassen hoe deze snapshots worden geanimeerd.

De View Transitions API voor Single Page Applications is meegeleverd in Chrome 111. Meer informatie over View Transitions .

Lineaire-easing-functie

Laat je niet misleiden door de naam van deze functie. De functie linear() (niet te verwarren met het trefwoord linear ) stelt je in staat om op een eenvoudige manier complexe easing-functies te maken, met als nadeel dat dit ten koste gaat van de precisie.

Vóór linear() , dat standaard in Chrome 113 werd geïntroduceerd, was het onmogelijk om bounce- of springeffecten in CSS te creëren. Dankzij linear() is het mogelijk om deze easings te benaderen door ze te vereenvoudigen tot een reeks punten en vervolgens lineair tussen deze punten te interpoleren.

Meer informatie over linear() . Gebruik de lineaire easinggenerator om linear() curven te maken.

Scroll einde

Veel interfaces bevatten scrollinteracties, 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 je een onnauwkeurige time-outmethode gebruiken die kon worden geactiveerd terwijl de vinger van de gebruiker nog op het scherm was. Met de scrollend -gebeurtenis heb je een perfect getimede scrollend-gebeurtenis die herkent of een gebruiker nog midden in een gebaar zit of niet.

Dit was belangrijk voor de browser, omdat JavaScript de aanwezigheid van een vinger op het scherm tijdens het scrollen niet kan volgen; de informatie is simpelweg niet beschikbaar. Stukken onnauwkeurige code voor het einde van een scrollpoging kunnen nu worden verwijderd en vervangen door een zeer nauwkeurige gebeurtenis die door de browser wordt beheerd.

Meer informatie over scrollend .

Scroll-gestuurde animaties

Scroll-gestuurde animaties zijn een interessante functie in Chrome 115. Hiermee kun je een bestaande CSS-animatie of een animatie die is gemaakt met de Web Animations API koppelen aan de scrolloffset van een scroller. Terwijl je omhoog en omlaag scrolt – of naar links en rechts in een horizontale scroller – scrolt de gekoppelde animatie direct vooruit en achteruit.

Met een ScrollTimeline kun je de algehele voortgang van een scroller volgen, zoals gedemonstreerd in de volgende demo. Naarmate je naar het einde van de pagina scrollt, wordt de tekst teken voor teken zichtbaar.

Met een ViewTimeline kun je een element volgen terwijl het de scrollport passeert. Dit werkt op een vergelijkbare manier als hoe IntersectionObserver een element volgt. In de volgende demo onthult elke afbeelding zichzelf vanaf het moment dat deze de scrollport binnenkomt tot het moment dat deze in het midden staat.

Omdat scroll-gestuurde animaties werken met CSS-animaties en de Web Animations API, profiteer je van alle voordelen die deze API's bieden. Zo kun je deze animaties ook vanuit de hoofdthread laten lopen. Je kunt nu zijdezachte animaties hebben, aangestuurd door scrollen, die vanuit de hoofdthread lopen met slechts een paar regels extra code – wat is er niet leuk aan?

Wilt u meer weten over scroll-animaties ? Bekijk dan dit artikel met alle details of bezoek scroll-driven-animations.style , waar u veel demo's kunt vinden.

Uitgestelde tijdlijnbijlage

Bij het toepassen van een scroll-aangedreven animatie via CSS doorloopt het zoekmechanisme om de besturende scroller te vinden altijd de DOM-tree, waardoor het beperkt blijft tot scroll-voorouders. Heel vaak is het te animeren element echter geen child van de scroller, maar een element in een compleet andere subtree.

Om het geanimeerde element een benoemde scroll-tijdlijn van een niet-voorouder te laten vinden, gebruikt u de eigenschap timeline-scope op een gedeelde bovenliggende entiteit. Hierdoor kan de gedefinieerde scroll-timeline of view-timeline met die naam eraan worden gekoppeld, waardoor deze een breder bereik krijgt. Hierdoor kan elk kind van die gedeelde bovenliggende entiteit de tijdlijn met die naam gebruiken.

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 keyframeregels. U kunt ook een discrete eigenschap laten overgaan op het 50%-punt in plaats van op het 0%-punt. Dit kunt u doen met de eigenschap transition-behavior met behulp van het trefwoord allow-discrete , of in de eigenschap transition als een verkorte notatie.

Meer informatie over de overgang van discrete animaties .

@starting-style

De CSS-regel @starting-style bouwt voort op nieuwe webmogelijkheden voor animaties 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 entry-animaties en voor het animeren in elementen zoals een pop-over of dialoogvenster. Het kan ook handig zijn wanneer u een element aanmaakt en het de mogelijkheid wilt geven om erin te animeren. Neem het volgende voorbeeld, waarin een popover -attribuut (zie volgende sectie) soepel van buiten de viewport in beeld en in de bovenste laag wordt geanimeerd.

Lees meer over @starting-style en andere entree-animaties.

Overlay

De nieuwe CSS- overlay -eigenschap kan aan je overgang worden toegevoegd om elementen met stijlen in de bovenste laag, zoals popover en dialog , soepel uit de bovenste laag te laten animeren. Als je geen overlay-overgang gebruikt, wordt je element direct weer bijgesneden, getransformeerd en bedekt, en zie je de overgang niet. Op dezelfde manier zorgt overlay ervoor dat ::backdrop soepel uit de bovenste laag wordt geanimeerd wanneer het aan een element in de bovenste laag wordt toegevoegd.

Meer informatie over overlay- en andere exit-animaties.

Popover

Met de Popover API kunt u elementen bouwen die bovenop de rest van de pagina worden geplaatst. 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 het id attribuut te koppelen aan een oproepende knop 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 met de z-index hoeft te spelen.
• Licht-verwijderfunctie. Door buiten het pop-overgebied te klikken, wordt de pop-over gesloten en keert de focus terug.
• Standaard focusbeheer. Bij het openen van de pop-over wordt de volgende tabstop binnen de pop-over geplaatst.
• Toegankelijke toetsenbordindelingen. Door op de esc -toets te drukken of dubbel te schakelen, sluit u de pop-over en keert u terug naar de focus.
• Toegankelijke componentbindingen. Een popover-element semantisch verbinden met een popover-trigger.

Horizontale regels in selectie

Een andere kleine HTML-wijziging 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 je content visueel op te splitsen. Voorheen werd een <hr> -tag in een select-element niet weergegeven. Maar dit jaar ondersteunen zowel Safari als Chrome deze functie, waardoor content binnen <select> -elementen beter gescheiden kan worden.

Schermafbeelding selecteren

Selecteer Live Demo

Leer meer over het gebruik van hr in geselecteerde

:gebruiker-geldige en ongeldige pseudo-klassen

De :user-valid en :user-invalid zijn dit jaar stabiel in alle browsers en gedragen zich vergelijkbaar met de pseudoklassen :valid en :invalid Ze matchen echter alleen een formulierbesturingselement nadat een gebruiker significante interactie met de invoer heeft gehad. Een formulierbesturingselement dat verplicht en leeg is, matcht :invalid zelfs als een gebruiker nog niet met de pagina is begonnen. Hetzelfde besturingselement matcht :user-invalid pas nadat 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.

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

Exclusieve accordeon

Een veelgebruikt UI-patroon op het web is een accordioncomponent. Om dit patroon te implementeren, combineert u een aantal <details> -elementen, vaak visueel gegroepeerd om aan te geven dat ze bij elkaar horen.

Nieuw in Chrome 120 is de ondersteuning voor het name attribuut op <details> -elementen. Wanneer dit attribuut wordt gebruikt, vormen meerdere <details> -elementen met dezelfde name waarde een semantische groep. Maximaal één element in de groep kan 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.

De <details> -elementen die deel uitmaken van een exclusieve accordeon hoeven niet per se verwante elementen te zijn. Ze kunnen verspreid over het document staan.