Nøsting av CSS-velgere er kanskje den aller mest etterspurte CSS egenskapen blant utviklere. Er det noe utviklere hater så er det å gjenta kode, men hittil har man måttet lene seg på språk som Sass for å kunne skrive en CSS-velger inni en annen.
![Klassisk CSS uten nøsting til venstre. CSS med nøsting i Sass til høyre. 📸: Skjermbilde webkit.org Klassisk CSS uten nøsting til venstre. CSS med nøsting i Sass til høyre. 📸: Skjermbilde webkit.org](https://www.kode24.no/images/78508917.jpg?imageId=78508917&x=0&y=0&cropw=100&croph=100&width=644&height=216)
Vel, nå ser det ut til at vi endelig skal få støtte på tvers av nettlesere. Apple har nemlig sendt ut sin første versjon av nettleseren Safari med støtte for CSS Nesting.
![image: Container queries, :has(), CSS subgrid - dette skal nettleserne støtte i år](https://www.kode24.no/images/78431554.jpg?imageId=78431554&x=0&y=0&cropw=100&croph=100&width=154&height=87&compression=80 640w, https://www.kode24.no/images/78431554.jpg?imageId=78431554&x=0&y=0&cropw=100&croph=100&width=245&height=139&compression=80 1024w, https://www.kode24.no/images/78431554.jpg?imageId=78431554&x=0&y=0&cropw=100&croph=100&width=308&height=176&compression=70 320w)
Container queries, :has(), CSS subgrid - dette skal nettleserne støtte i år
Det tredje valget
Som CSS-evangelist og Apple-ansatt Jen Simmons skriver i blogginnlegget sitt, har det ikke vært en enkel vei å komme frem til CSS-nøsting-standarden.
CSS Working Group, gruppen som vedlikeholder CSS-standarden, har nemlig debattert i årevis om hvordan implementasjons-standarden for CSS-nøsting skal se ut.
I sommer klarte gruppen å korte ned lista til tre forskjellige forslag til implementasjon, hvorav det tredje forslaget - som minner veldig om Sass sin gjøremåte - ble valgt.
![Da CSS Working Group landet på valg 3 dukket det opp et par forslag til. Her ser du forskjellen i nøsting. Da CSS Working Group landet på valg 3 dukket det opp et par forslag til. Her ser du forskjellen i nøsting.](https://www.kode24.no/images/78508933.jpg?imageId=78508933&x=0&y=0&cropw=99.382716049383&croph=100&width=644&height=167)
Men det stoppet ikke der. Like etter dukket det nemlig opp et fjerde og femte forslag, med bitte litt endring i syntaks fra valg 3.
Dermed bestemte gruppen seg for å legge ut en avstemming hvor utviklere kunne velge mellom implementasjon 3, 4 eller 5. Her vant det tredje valget med 83 prosent.
Både i WebKit og Chrome
Om du er interessert i å teste nøsting kan du laste ned Safari Technology Preview 162 om du bruker macOs.
Hvordan selve standarden nå vil funkere kan du lese om i detalj på W3C sine GitHub-sider og i Simmons sitt blogginnlegg.
Og om du bruker Chrome har du også tilgang. CSS-nøsting ble nemlig inkludert i versjon 112, bare pass på at du skrur på "Experimental Web Platform Features".
![image: Har du sjekka CSS-ytelsen din? - Har aldri tenkt over det selv](https://www.kode24.no/images/78323481.jpg?imageId=78323481&x=0&y=0&cropw=100&croph=100&width=154&height=103&compression=80 640w, https://www.kode24.no/images/78323481.jpg?imageId=78323481&x=0&y=0&cropw=100&croph=100&width=245&height=164&compression=80 1024w, https://www.kode24.no/images/78323481.jpg?imageId=78323481&x=0&y=0&cropw=100&croph=100&width=308&height=208&compression=70 320w)