– Vi kommer til å se tilbake på 2024 som vendepunktet mellom "CSS Classic" og "New CSS".
Det skriver Sacha Greif, utvikleren som står bak undersøkelsen State of CSS 2024, som kom ut denne uken. Han står også bak den kjente State of JS-undersøkelsen.
Det Greif kaller "CSS Classic" er hvordan de fleste utviklere har skrevet CSS i alle år – ved å bruke begrenset funksjonalitet i CSS, og kompensere for begrensningene ved å bruke tilleggsverktøy som biblioteker, pre- og post-prosessorer, og så videre.
"New CSS" på den andre siden, er den moderne måten å skrive CSS på, der man bruker ting som Subgrid, :has(), variabler, container queries og annen ny funksjonalitet som har kommet de senere årene. Da trenger man ofte ikke noe ekstra "tooling", og kan ofte gjøre ting direkte i CSS som man tidligere måtte bruke JavaScript for å få til.
Årets State of CSS-undersøkelse byr på mange overraskelser, vi har oppsummert noen av hovedpunktene.
Glemmer å teste på mobil
Utvikleren og CSS-eksperten Josh Comeau har laget en gjennomgang av State of CSS, med fokus på de tingene han synes er mest interessant eller viktig.
Det er én ting som overrasker han veldig: én tredjedel av utviklere tester tilsynelatende ikke applikasjonene sine på mobil.
– Dette er ganske forbausende; mesteparten av internettrafikken i dag er på mobil, så jeg skjønner ikke hvordan man kan unngå å teste på mobil! skriver Comeau.
Comeau mener også at altfor få ifølge undersøkelsen ser ut til å teste tilgjengelighet (accessibility):
- 28 % tester tastaturnavigasjon på desktop
- 27 % bruker verktøy som aXe
- 19 % tester ved hjelp av skjermlesere
– Kanskje spørsmålet var skrevet på en måte som noen ikke forsto. Jeg er skeptiske til tallene for mobilbruk. Forhåpentligvis er alle disse tallene høyere i den virkelige verden!
CSS-funksjonene vi bruker mest
I State of CSS 2024 har man spurt om hele 50 CSS-funksjoner og hvorvidt man har prøvd den, hørt om den eller aldri hørt om den. Det spørres også om folk liker eller ikke liker en CSS-funksjon.
En av de mest etterlengtede og omtalte CSS-funksjonene de siste årene er has()-pseudoklassen. Denne lar deg style et element basert på dens underelementer. Nesten 73 prosent oppgir at de har brukt has():
De mest uventede mye brukte CSS-funksjonene er imidlertid CSS filter-effekter som blur() og contrast() – med hele 75,3 prosent som oppgir at de har brukt dem.
"Alle" bruker Tailwind CSS
Selv om det er mulig å gjøre veldig mye nå med bare "vanilla CSS", viser undersøkelsen at veldig mange fortsatt bruker ulike verktøy, rammeverk og biblioteker på toppen.
Det aller mest populære CSS-rammeverket er med solid margin Tailwind CSS, som brukes av hele 75 prosent av alle utviklere (som har svart på undersøkelsen). Men også Bootstrap er fortsatt mye brukt, med 54 prosent.
Josh Comeau kommenterer imidlertid dette punktet i undersøkelsen, og det faktum at det er bare 50 prosent av de spurte som har besvart dette spørsmålet.
– Da jeg svarte på undersøkelsen i år, hoppet jeg over dette spørsmålet siden jeg ikke bruker noen av disse verktøyene. Så for total bruk, er det 37,5 prosent (75 % av 50 % av respondentene som svarte på spørsmålet), skriver Comeau.
Mange bruker også CSS-in-JS-biblioteker som CSS Modules, Styled Components og Emotion:
Arc og Safari vokser, Chrome faller
I år som i fjor er det de store og kjente nettleserne som dominerer på listen over nettlesere vi bruker når vi utvikler.
Andelen utviklere som bruker Chrome har imidlertid falt fra 81,6 til 76 prosent fra 2023- til 2024-undersøkelsen (blant dem som har svart på spørsmålet). Også Firefox-bruken har falt – fra 56,8 prosent i 2023 til 51 prosent i 2024. Edge har falt fra 23 til 17 prosent.
Nettlesere som har økt siden 2023-undersøkelsen er blant annet Safari, som har gått opp fra 18,8 til 24 prosent.
Det er også interessant å se at bruken av Arc-nettleseren fra The Browser Company har steget kraftig – fra 7,8 prosent i fjor til 12 prosent i årets undersøkelse.
State of CSS 2024-undersøkelsen inneholder også en masse annen interessante resultater som du kan lese mer om på nettsiden deres.
Få også med deg den rykende ferske State of Frontend-undersøkelsen:
