Moderne CSS-functies: nesting, :has(), container queries, subgrid
Moderne CSS-functies met live demo's
Moderne CSS: nesting, :has(), container queries, subgrid | We.Inc
Live, bewerkbare demo's van native CSS nesting, de :has()-selector, container queries, subgrid, @layer, :is(), color-mix() en text-wrap: balance, met een tabel van de Baseline-ondersteuning.
Gewone CSS doet nu werk waarvoor vroeger Sass of JavaScript nodig was. Native nesting groepeert verwante regels, :has() stijlt een ouder op basis van zijn kinderen, container queries passen een component aan zijn eigen breedte aan, en subgrid lijnt geneste items uit met het buitenste grid. Alle vier werden in 2023 Baseline, dus huidige browsers ondersteunen ze.
De belangrijkste functies in één oogopslag
Functie
Vervangt
Baseline sinds
Nesting
Nesting in Sass-stijl in een preprocessor
:has()
JavaScript dat een klasse op de ouder aan- en uitzet
Container size queries
Viewport media queries binnen componenten
Subgrid
Vaste hoogtes om rijen kaarten uit te lijnen
Elke functie hieronder heeft een demo die u kunt bewerken, en de kaart met de container query reageert op een schuifregelaar, zodat u de layout ziet veranderen zonder uw venster te verkleinen. De ondersteuningstabel noemt het jaar waarin elke functie Baseline werd, wat betekent dat ze werkt in de nieuwste Chrome, Edge, Firefox en Safari.
Sleep de breedteregelaar in de container query-demo en zie de kaart overschakelen van gestapeld naar naast elkaar.
Bewerk een voorbeeld links. Het afgeschermde resultaat rechts wordt opnieuw getekend terwijl u typt.
Controleer de ondersteuningstabel voordat u live gaat. Baseline betekent alle vier grote engines, niet oudere versies.
Kopieer het fragment dat u nodig hebt. Geen ervan vereist een buildstap of een bibliotheek.
Houd nesting ondiep. Twee niveaus is meestal genoeg, en diepe nesting levert lange selectors met hoge specificiteit op, net als in Sass.
Container queries hebben een container nodig: zet eerst container-type: inline-size op de ouder, anders matcht de @container-regel niets.
Zet :has()-regels in @supports selector(:has(*)) als oudere browsers voor uw publiek belangrijk zijn, zodat die netjes terugvallen.
Gebruik :where() voor bibliotheek- of reset-stijlen. Het voegt nul specificiteit toe, dus iedereen kan het met één klasse overschrijven.
Veelgestelde vragen
Heb ik voor nesting nog Sass nodig?
Niet voor nesting alleen. Native nesting dekt het gangbare patroon van regels binnen regels plus de &-selector. Sass biedt nog steeds mixins, loops en functies, al hebben custom properties en color-mix() veel overgenomen van waarvoor mensen het gebruikten.
Wat is het verschil tussen container queries en media queries?
Een media query vraagt naar de viewport, meestal de vensterbreedte. Een container query vraagt naar een gekozen voorouderelement. Zo kan één kaartcomponent een compacte layout tonen in een smalle zijbalk en een brede layout in de hoofdkolom van dezelfde pagina.
Is :has() traag?
Browserengines hebben het geoptimaliseerd voordat het uitkwam, en gewoon gebruik is prima. Zeer brede selectors zoals body:has(*) op enorme pagina's dwingen meer matchwerk af, dus veranker :has() waar mogelijk aan een specifieke componentklasse.
Wat betekent Baseline?
Baseline is een label uit de webplatformgemeenschap dat aangeeft dat een functie werkt in de huidige versies van Chrome, Edge, Firefox en Safari. Newly available is de datum waarop de laatste daarvan de functie uitbracht. Widely available volgt ongeveer dertig maanden later.
Wanneer gebruik ik subgrid in plaats van een genest grid?
Gebruik subgrid wanneer kinderen van een grid-item moeten uitlijnen met de tracks van het buitenste grid, zoals titels, tekst en knoppen in een rij kaarten. Een gewoon genest grid heeft eigen, onafhankelijke tracks, dus inhoud van verschillende lengte raakt uit de lijn.
Hoe de &-selector werkt bij nesting
Binnen een genest blok staat & voor de buitenste selector. &:hover koppelt de pseudo-klasse aan de ouder zelf, & + & richt zich op een broer of zus van dezelfde soort, en .theme-dark & plaatst de ouder in een andere context.
Een geneste selector zonder & wordt als afstammeling behandeld, dus .card { p { } } betekent .card p. Browsers die vanaf 2023 zijn uitgebracht accepteren ook een losse elementnaam zoals p aan het begin van een geneste regel.
Cascade layers in de praktijk
@layer reset, base, components, utilities; legt vooraf een volgorde vast. Een latere layer wint van een eerdere, ongeacht de specificiteit, en dat beëindigt de meeste gevechten tussen een componentbibliotheek en uw eigen overrides.
Stijlen buiten een layer winnen van elke stijl in een layer. Dat is handig als u een oude stylesheet in een opzet met layers onderbrengt: laat de oude regels eerst buiten de layers en verplaats ze er een voor een in.
Kiezen wat u eerst invoert
Gebruiken uw bezoekers actuele browsers, dan zijn nesting en :is() gratis winst die uw stylesheet alleen korter maakt. Container queries betalen zich terug zodra u herbruikbare componenten hebt die op verschillende breedtes verschijnen. Subgrid is het belangrijkst voor kaartrasters en formulieren met labels.
Native CSS nesting
Een kaart gestyled met geneste regels
De hover, de titel en de donkere variant staan allemaal binnen .card. & verwijst naar .card zelf.
De :has()-ouderselector
Een veld markeren wanneer het selectievakje is aangevinkt
In dit frame draait geen script. Het label stijlt zichzelf omdat er een aangevinkte input in zit.
De layout van een kaart alleen wijzigen als er een afbeelding in staat
Kaarten zonder afbeelding houden de layout met één kolom; kaarten met een afbeelding krijgen twee kolommen.
Container queries
De CSS achter de schuifregelaar-demo
container-type maakt .shelf meetbaar; de @container-regel zet de kaart vervolgens om naar een rij zodra de shelf minstens 420px breed is.
Subgrid
Rijen kaarten die uitlijnen, ongeacht de tekstlengte
Elke kaart beslaat drie rijen van het buitenste grid en gebruikt subgrid voor de eigen rijen, zodat elke titel, tekst en knop op één lijn staan.
@layer, :is(), :where(), color-mix() en text-wrap
Cascade layers bepalen de winnaar op volgorde
De ID-selector staat in een eerdere layer, dus de gewone klasse in de latere layer wint toch.
:is() en :where() korten selectorlijsten in
:is() neemt de specificiteit van het sterkste argument over, :where() telt altijd als nul.
color-mix() voor tinten en hover-schakeringen
Mengen met wit of zwart in de oklab-ruimte geeft gelijkmatige tinten vanuit één merkkleur.
text-wrap: balance voor koppen
De tweede kop verdeelt de woorden gelijkmatig over de regels in plaats van één woord alleen te laten staan. Browsers beperken het balanceren tot korte blokken van een paar regels.
Browserondersteuning (Baseline)
Baseline-status (nieuwste Chrome, Edge, Firefox en Safari), gecontroleerd tegen MDN in oktober 2026
Container style queries staan los hiervan en zijn nog geen Baseline; controleer caniuse
color-mix()
Subgrid
CSS nesting
Losse elementselectors aan het begin van een geneste regel vereisen releases uit 2023 of later
:has()
text-wrap: balance
Oudere browsers negeren het en breken normaal af
Container query-demo
De kaart hieronder luistert naar de breedte van zijn grijze container, niet naar uw venster. Ga over 420px en hij schakelt over naar een layout met twee kolommen.