Gå til innhold
The State of HTML 2024 survey is currently open! Take the survey now →

State of CSS 2024

CSS Usage

Uansett hvordan du bruker CSS, viser dataene at det fortsatt er en bekymring å sikre at koden din fungerer på tvers av alle nettlesere, spesielt for nyere funksjoner som :has().

Testing Environments

Et oppmuntrende tegn på tilgjengelighetens økende betydning er at testing med skjermlesere har økt fra 16,6 % til 19 % fra år til år.

0%
20%
40%
60%
79%
99%
1

Datamaskin

7,133
2

Smarttelefon

4,820
3

Nettbrett

3,108
4

Datamaskin med kun tastatur

2,027
5

Testverktøy (Axe, Lighthouse, etc.)

1,907
6

Feature phone

1,800
7

Skjermleser

1,330
8

Printer

685
9

Simulator for endret syn (fargeblindhet, etc.)

398
10

TV

138
11

Smartklokke

34
12

Spillkonsoll

28
13

Andre svar

56
0%
20%
40%
60%
79%
99%
% besvarelser på spørsmål
7,185
74%
Which form factors or environments do you test on?
💡
Å dele denne undersøkelsen på Twitter, Facebook eller via e-post er vitenskapelig bevist å forbedre kodingen din med opptil 15 %.

What do you mainly use CSS for?

Selv om disse dataene ikke er overraskende, er det en fin påminnelse om at CSS kan gjøre mye mer enn bare å formatere nettsider.

0%
17%
34%
51%
68%
85%
1

Web apps

6,036
2

Blogs or other text-heavy sites

3,394
3

Marketing sites & landing pages

3,221
4

Design systems

2,792
5

Desktop apps

1,862
6

Mobile apps

1,665
7

Emails

1,202
8

CSS art & illustrations

581
9

Printed documents

572
10

E-Commerce sites

11

Andre svar

118
0%
17%
34%
51%
68%
85%
% besvarelser på spørsmål
7,114
73%
What kind of project do you usually use CSS for?
Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

Mine valg for 2024: linear()

linear() easing-funksjonen har gjort fin-tuning på avslutninger av interaksjoner mye bedre.
Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

Adam Argyle

Google

Bransje

Visste du at du kan filtrere dataene fra denne undersøkelsen etter bransje? Bare klikk på "Legg til filtre…" på hvilket som helst diagram!

0%
8%
16%
23%
31%
39%
1

Programmering og tekniske verktøy

2,447
2

Konsulenttjenester

1,394
3

E-handel og detaljhandel

1,235
4

Markedsføring/Salg/Analyseverktøy

846
5

Utdannelse

842
6

Finans

731
7

Underholdning

613
8

Nyheter, media og blogging

583
9

Helsesektor

468
10

Statlig

444
0%
8%
16%
23%
31%
39%
% besvarelser på spørsmål
6,310
65%
Hvilken bransje(r) jobber du i?

CSS Usage

Enten du bygger nettsider profesjonelt eller bare prøver deg litt, finnes det ingen feil måte å bruke CSS på!

0%
18%
36%
54%
72%
90%
1

Profesjonelt

6,384
2

Som student

186
3

Som hobby

501
4

Andre svar

34
0%
18%
36%
54%
72%
90%
% besvarelser på spørsmål
7,061
73%
In what context do you primarily use CSS?

Design Methodology

Selv om et stort flertall av respondentene bruker CSS til å implementere allerede eksisterende design, blir det interessant å se om dette endrer seg etter hvert som designapper utvikler seg, og AI-verktøy blir i stand til å gå direkte fra idé til kode.

0%
12%
24%
36%
48%
60%
1

I implement other people's designs

4,216
2

I create my own designs in design apps, and then implement them in CSS

1,004
3

I implement my own designs directly in CSS

1,765
4

Andre svar

129
0%
12%
24%
36%
48%
60%
% besvarelser på spørsmål
6,985
72%
Which of these best describes how you primarily design with CSS?

CSS vs JavaScript Balance

Selv i sammenheng med en CSS-undersøkelse viser det seg at et flertall av respondentene fortsatt tilbringer mesteparten av tiden sin på å skrive JavaScript. Bare tiden vil vise om også dette vil endre seg nå som CSS blir mer kraftfullt.

0%
5%
11%
16%
21%
27%
1

100% CSS

107
2

|

568
3

|

958
4

|

616
5

50%–50%

1,127
6

|

882
7

|

1,913
8

|

914
9

100% JS

40
0%
5%
11%
16%
21%
27%
% besvarelser på spørsmål
7,125
73%
4.4
5
How do you divide your time between writing CSS (including HTML markup) and JavaScript code?

Browser Incompatibilities

Få ting føles verre enn å vite at en ny funksjon ville løst problemet ditt perfekt, men at du ikke kan bruke den på grunn av dårlig nettleserstøtte.

Dette er tilfellet med Anchor Positioning, en ny funksjon som er på vei, men som dessverre ikke har noe bred støtte enda.

Container Queries, derimot, er tilgjengelige på et grunnleggende nivå og klare til bruk, til tross for at de fortsatt dukket opp i svarene til mange respondenter!

0%
15%
29%
44%
59%
73%
1

2

3

4

5

6

7

8

Scrollbar styling

9

Browser support

10

Animate on Scroll

0%
15%
29%
44%
59%
73%
% besvarelser på spørsmål
1,549
16%
Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?
Fritekstformat
Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

Mine valg for 2024: Getting Stuck: All the Ways position:sticky Can Fail

I løpet av alle mine år med CSS må position: sticky være en av de mest frustrerende funksjonene, samtidig som den kan være ekstremt nyttig. Jeg har alltid ønsket å skrive en guide for å hjelpe folk med dette, men heldigvis trenger jeg ikke å gjøre det nå som Kilian har skrevet dette mesterverket.
Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

Andy Bell

Designer, utviklger og grunnlegger av Piccalilli og Set Studio.

Missing Features

I fravær av en tryllestav som lar oss mane fram hvilken som helst CSS-funksjon vi kan drømme om, er det beste vi kan håpe på at disse dataene kan bidra til å presse nettleserleverandørene i riktig retning!

Den gode nyheten: betinget logikk, mixins og murverkslayouts er alle under utvikling i en eller annen form!

0%
20%
39%
59%
78%
98%
1

Mixins

2

Conditional Logic

3

Masonry Layout

4

Parent Selector

5

6

CSS Functions

7

Better Animations

8

For Loops

9

Browser Support

10

Scrollbar Styling

0%
20%
39%
59%
78%
98%
% besvarelser på spørsmål
1,223
13%
What features do you feel are currently missing from CSS altogether?
Fritekstformat

Other CSS Pain Points

Selv om nettleserstøtte forblir et evig problem med CSS, viser Tailwind CSS seg også å være en kilde til frustrasjon for noen – mens andre klager på at det ikke brukes nok!

0%
19%
38%
56%
75%
94%
1

Browser support

2

3

Excessive complexity

4

Safari

5

6

7

Conditional Logic

8

Debugging

9

Animations

10

Layout & positioning

0%
19%
38%
56%
75%
94%
% besvarelser på spørsmål
1,090
11%
Any other pain points related to writing CSS?
Fritekstformat

Favorite New Features

Den etterlengtede funksjonen, god implementering og nettleserstøtte: :has() har alt, og topper rangeringen av den beste nye CSS-funksjonen i 2024!

0%
9%
19%
28%
37%
47%
1

2

3

4

5

6

7

8

9

10

0%
9%
19%
28%
37%
47%
% besvarelser på spørsmål
2,431
25%
What are your favorite new CSS features that you started using this year?
Fritekstformat
Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

Mine valg for 2024: Scroll-driven animasjoner

Dette er en gamechanger som snart vil få støtte i alle store nettlesere. Det er utrolig at det som en gang krevde mye JavaScript nå kan oppnås med bare noen få linjer med CSS.
Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

Ahmad Shadeed

Design Engineer og forfatter av Debugging CSS

State of Web Technologies

Selv om vi elsker å klage over tilstanden til ting, viser det seg at vi er overraskende stabilt fornøyd gjennom årene.

0
1
2
3
4
2020
2021
2022
2023
2024
0
1
2
3
4
Gjennomsnitt
7,099
73%
2.9
3
How happy are you with the general state of web technologies?

State of CSS

Vi ser til og med en liten økning når det gjelder CSS spesifikt, noe som beviser at det harde arbeidet fra nettleserleverandører, arbeidsgrupper og CSS-samfunnet generelt ikke går ubemerket hen!

0
1
2
3
4
2020
2021
2022
2023
2024
0
1
2
3
4
Gjennomsnitt
7,106
73%
3.1
3
How happy are you with the general state of CSS?

Anbefalte ressurser

SVG Essentials & Animation, v2
Sarah Drasner
Netlify

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
Design for Developers
Sarah Drasner
Netlify

Design for Developers

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation.
Takk til våre partnere for deres bidrag! Lær mer.