-
Notifications
You must be signed in to change notification settings - Fork 0
/
css2023.yml
541 lines (421 loc) · 26.3 KB
/
css2023.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
locale: hu-HU
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: A CSS ökoszisztéma legújabb trendjeiről szóló éves felmérés 2023-as kiadása.
- key: general.css2022.js2022_banner
t: A State of JS 2022 felmérés jelenleg is fut, [itt vehetsz részt](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!
- key: general.css2023.results_intro
t: |
Nem fogok hazudni, az elmúlt időszakban a CSS követése nem volt egyszerű. Szerencsére idén [Chen Hui Jing](https://chenhuijing.com/) vette át a felmérés tervezésének irányítását, [Lea Verou](https://lea.verou.me/) tavalyi munkájára építve.
Szerencsések vagyunk, hogy a Google Chrome csapata is támogatott minket, akik (más böngésző gyártókkal együtt) a felmérés eredményeit is felhasználják a fejlesztési irányvonalak meghatározásához.
Köszönjük ezt a sok extra segítséget, sikerült bevezetnünk néhány új funkciót, kezdve a **diagramok testreszabásával**. A diagramok mellett található <span class="customize-chart-icon">„beállítások”</span> ikonra kattintva most már szűrheted a fizetést, az országot vagy bármilyen más változót, amit szeretnél!
Most hogy mindezt tisztáztuk, lássuk, hogyan alakult a CSS 2023-ban!
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2023
t: |
<span class="first-letter">A</span> CSS egyre gyorsabban fejlődik. A `:has()`, a konténer lekérdezések, a subgrid és még sok más új funkció egyre több böngészőben válik elérhetővé.
Ennek a gyors fejlődésnek a következménye, hogy a dolgok egy kicsit zavarossá válhatnak. Szerencsére idén [Chen Hui Jing](https://chenhuijing.com/) segített a felmérés tervezésében és a CSS dzsungelben való eligazodásban.
És ha már így szóba került a felmérés, tudtad, hogy a böngészőgyártók is felhasználják az eredményeket? Az [Interop](https://web.dev/interop-2023/) kezdeményezés keretében a felmérés eredményeit használják fel a fejlesztési prioritások meghatározásához.
Végezetül, idén egy új funkciót is bevezetünk: a **diagramok testreszabását**. Nagyon kíváncsiak vagyunk, hogy milyen új meglátásaid lesznek!
<span class="conclusion__byline">– Sacha Greif</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: Póló
- key: sections.tshirt.description
t: |
## Támogasd a felmérést a State of CSS pólóval
A rossz videóminőség, a nagyméretű kazetták és a visszatekerés között nem sok minden hiányzik a VHS korszakból. De egy dolog, amit *hiányolunk*, az a VHS kazettákra nyomtatott 90-es évek retro dizájnja.
Most azonban, köszönhetően a tehetséges Christopher Kirk-Nielsen-nek, élvezheted ezt a retró dizájnt, miközben ugyanakkor a CSS iránti szeretetedet is kifejezheted!
- key: tshirt.about
t: A pólóról
- key: tshirt.description
t: |
A pólók kiváló minőségű, szuper puha tri-blend anyagból készülnek, szűk fazonnal, a Cotton Bureau partnereinknél nyomtatva.
- key: tshirt.getit
t: Megrendelem
- key: tshirt.price
t: $29 USD + szállítási költség
- key: tshirt.designer.heading
t: A tervezőről
- key: tshirt.designer.name
t: Christopher Kirk-Nielsen
- key: tshirt.designer.bio
t: |
Christopher Kirk-Nielsen egy francia származású, de jelenleg az Egyesült Államokban élő fejlesztő, aki nem csak egy fantasztikus front-end fejlesztő, hanem egy tehetséges illusztrátor is, aki a retró vizuális megjelenítésre specializálódott. Valójában arra is ösztönözzük, hogy nézd meg a [többi pólótervét](https://chriskirknielsen.com/designs)!
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description.css2023
t: |
A felmérésebben az évben **9,190** fejlesztőt ért el világszerte.
- key: sections.features.description.css2023
t: |
A CSS igazán formában van mostanában, és a fejlesztői közösség egyre inkább elfogadja az új funkciókat.
- key: sections.css_frameworks.description.css2023
t: |
A Tailwind CSS most megint újra kiemelkedik a többi UI keretrendszer közül, amelyet a fejlesztők szívesen használnak; míg az Open Props egy kis, de szenvedélyes követőtáborral rendelkezik.
- key: sections.css_in_js.description.css2023
t: |
A kezdeti növekedés után úgy tűnik, hogy a CSS-in-JS szektor stagnál, és az, hogy a natív CSS maga is átveszi a fő funkcióit, valószínűleg nagy hozzájáruló tényező.
- key: sections.other_tools.description.css2023
t: |
30 évvel a böngésző feltalálása után még mindig innovációkat látunk ezen a területen, új szereplőkkel, mint a Brave és az Arc; vagy szakosodott eszközökkel, mint a Polypane, amelyek piaci részesedést szereznek.
- key: sections.usage.description.css2023
t: |
Mindegy, hogy hogyan használod a CSS-t, az adatok azt mutatják, hogy a kódod működésének biztosítása minden böngészőben még mindig fontos, különösen az újabb funkciók, mint a `:has()` esetében.
- key: sections.resources.description.css2023
t: |
A CSS közösség egyre élénkebb, és a blogok, YouTube csatornák és podcastek száma is egyre nő.
###########################################################################
# Charts
###########################################################################
- key: options.features_categories.layout
aliasFor: sections.layout.title
- key: options.features_categories.shapes_graphics
aliasFor: sections.shapes_graphics.title
- key: options.features_categories.interactions
aliasFor: sections.interactions.title
- key: options.features_categories.typography
aliasFor: sections.typography.title
- key: options.features_categories.accessibility
aliasFor: sections.accessibility.title
- key: options.features_categories.other_features
aliasFor: sections.other_features.title
- key: options.features_categories.colors
aliasFor: sections.colors.title
- key: options.features_categories.selectors
aliasFor: sections.selectors.title
- key: user_info.country_low_vs_high_income.description.css2023
t: >
A válaszadók megosztása alacsony és magas jövedelemi kategóriák között két nagyon különböző országlistát eredményez.
- key: user_info.higher_education_degree_by_gender.description.css2023
t: >
A nők aránya magasabb volt, mint amire számítottunk a CSS-sel nem kapcsolatos
területeken végzett magasabb képzési diplomával rendelkező válaszadók körében,
ami arra utalhat, hogy sokan karrierváltást terveznek.
- key: user_info.source_by_gender.description.css2023
t: >
Bár a kevés összesített adat miatt nehéz következtetéseket levonni,
a nők aránya a munkahelyükről vagy szóbeszédből értesülő válaszadók körében volt a legmagasabb,
különösen a Twitter vagy a YouTube közösségi hálózatokhoz képest.
- key: user_info.source_by_race_ethnicity.description.css2023
t: >
A kevés összesített adat miatt itt is nehéz következtetéseket levonni,
a YouTube a legdiverzebb forrásnak tűnik a felméréshez vezető forgalom szempontjából.
- key: user_info.average_income_by_company_size.description.css2023
t: >
A legjobban fizetett válaszadók a nagy cégeknél dolgoznak, bár érdemes megjegyezni,
hogy a szabadúszók a kis cégeknél dolgozókhoz képest egy kicsit több jövedelemmel rendelkeznek.
- key: user_info.yearly_salary_usa_vs_the_world.description.css2023
t: >
Ha az amerikai jövedelmeket összehasonlítjuk a világ többi részével,
akkor egyértelművé válik, hogy az amerikai fejlesztők túlreprezentáltak a magasabb jövedelmi kategóriákban.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: |
A `hézag` tulajdonság a Flexbox számára olyan hasznos kiegészítés, hogy nem meglepő,
hogy 2023-ban **{value}**-os fejlődésen esett át
# - key: award.tool_usage_delta_award.comment
# t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.
- key: award.most_commented_feature_award.comment
t: |
**{value}** kommenttel, a Subgrid volt, amelyiket a legtöbb visszajelzést kapta, és egyéb funkciók még közel sem érték el ezt a számot.
- key: award.tool_satisfaction_award.comment
t: |
A CSS-in-JS megoldások közül az Open Props az egyetlen, amelyiknek nagyon magas, **{value}**-os az elégedettségi mutatója.
# - key: award.tool_interest_award.comment
# t: With a **{value}** ratio, CSS Modules again generated the most interest among CSS developers this year.
- key: award.most_write_ins_award.comment
t: |
**{value}** megemlítéssel, a Panda volt a legtöbbet említett eszköz a szabadon válaszolható kérdések között.
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.css2023.chen_hui_jing
t: |
<span class="first-line">Ahogy az új CSS funkciók használata felfelé ível, a CSS keretrendszerek használata lefelé ível.</span>
Ez annak a jele lehet, hogy a fejlesztők egyre inkább hozzászoknak, hogy nem kell várni az új CSS funkciók használatával, mert a böngészők sokkal gyorsabban felzárkóznak, mint korábban.
Mivel egyre nagyobb tudatossággal használják a natív CSS funkciókat, mint az egymásba ágyzást vagy a `:has()`-t (amely úgy viselkedik, mint egy szülő szelektor, de sokkal több annál!), úgy tűnik, hogy széleskörű elfogadás küszöbén állunk.
Ezek közül a funkciók közül nekem a `text-wrap: balance` a kedvencem. Egyetlen sorban megoldást nyújt egy olyan kérésekre, amelyekkel egész webfejlesztői karrierem során folyamatosan találkoztam: „meg tudnánk változtatni a címsorokat, hogy az utolsó szó ne legyen egyedül?”
Az is érdekes volt, hogy sok fejlesztő úgy érezte, hogy az animálás auto-ba és a téglalap elrendezés hiányzó CSS funkciók. Igaz, hogy a böngészők számára mindig is nehéz volt meghatározni az elemek méreteit (különösen a magasságot), ha azokat nem deklarálták explicit módon.
De ahogy [Lea Verou](https://lea.verou.me/) tavaly említette, különböző kezdeményezéseknek köszönhetően, mint amilyen az [Interop](https://wpt.fyi/interop-2023), amely a böngészőket összehozza, olyan funkciók, amelyek korábban lehetetlennek tűntek, most potenciálisan valósággá válhatnak!
- key: conclusion.css2023.chen_hui_jing.bio
t: Fejlesztői élmény mérnök @ Interledger Foundation
###########################################################################
# Picks
###########################################################################
- key: picks.my_pick
t: "A 2023-as választásom:"
- key: picks.intro
t: Megkérdeztük a CSS közösség tagjait, hogy osszák meg a évi választásukat.
# - key: picks.david_east.name
# t: CSS Subgrid
# - key: picks.david_east.bio
# t: Advocate for building on the web
# - key: picks.david_east.description
# t: |
# CSS Subgrid allows child elements to inherit their parents grid properties.
# Soon, it will be much easier to lay elements out to the same grid
# lines across the entire page.
# - key: picks.bramus_van_damme.name
# t: The `:has()` Selector
# - key: picks.bramus_van_damme.bio
# t: Chrome Developer Relations Engineer at Google
# - key: picks.bramus_van_damme.description
# t: |
# You might know this one as the so-called “parent selector” but that name does it
# no justice as it only covers a small part of what it can do.
# This selector has essentially changed the way I write my CSS.
- key: picks.kevin_j_powell.name
t: Ahmad Shadeed
- key: picks.kevin_j_powell.bio
t: CSS evangélista
- key: picks.kevin_j_powell.description
t: |
Ahmad blogja tudás és inspiráció forrása, mélyreható elemzésekkel, beleértve a nagyszerű vizuális és használati eseteket is.
# - key: picks.samuel_kraft.name
# t: The `:has()` Selector
# - key: picks.samuel_kraft.bio
# t: Design Engineer
# - key: picks.samuel_kraft.description
# t: |
# The new :has() selector is super powerful and unlocks new styling possibilities.
# This great article from Jen Simmons breaks it down with explanations and practical examples.
- key: picks.josh_comeau.name
t: CSS Podcast
- key: picks.josh_comeau.bio
t: Oktató, CSS a JavaScript fejlesztőknek
- key: picks.josh_comeau.description
t: |
Ez a podcast egy csodálatos túra egy csomó fontos és modern CSS funkció körül.
Una Kravets és Adam Argyle a házigazdák, két abszolút csodálatos ember.
- key: picks.adam_argyle.name
t: Zag.js
- key: picks.adam_argyle.bio
t: Google Chrome fejlesztői kapcsolatok
- key: picks.adam_argyle.description
t: |
A ChakraUI tehetséges emberei következő generációs komponenseket és ötleteket építenek,
alig várom, hogy lássam, hogy mi más jut még eszükbe.
# - key: picks.eric_w_bailey.name
# t: “Style with Stateful, Semantic Selectors” by Ben Myers
# - key: picks.eric_w_bailey.bio
# t: Accessibility advocate and CSS nerd
# - key: picks.eric_w_bailey.description
# t: |
# Ben demonstrates how utilizing ARIA
# attribute selectors can simply and powerfully tie appearance to state.
# - key: picks.michelle_barker.name
# t: Interop 2022
# - key: picks.michelle_barker.bio
# t: Writer and creator of front-end blog CSS { In Real Life }
# - key: picks.michelle_barker.description
# t: |
# Interop is a collaboration between all of the major browser vendors,
# agreeing 15 key areas of focus for implementation —
# including game-changing new CSS features like container queries,
# cascade layers and color functions.
- key: picks.jhey_tompkins.name
t: |
A `:has()` szelektor
- key: picks.jhey_tompkins.bio
t: A Fancy CSS vezérigazgatója
- key: picks.jhey_tompkins.description
t: |
A `:has()` egy varázslat, amit arra használhatsz, hogy összekombinálhass egyéb API-kat, mint a konténer lekérdezések, horgony pozícionálás, stb. Nagyon kíváncsi vagyok, hogy a közösség hogyan fogja használni.
# - key: picks.gift_egwuenu.name
# t: Learn CSS
# - key: picks.gift_egwuenu.bio
# t: Developer Advocate at Cloudflare
# - key: picks.gift_egwuenu.description
# t: |
# My recommended resource for anyone looking to learn CSS from the ground up,
# I also use it as a reference everytime I need to look up any CSS property.
- key: picks.ahmad_shadeed.name
t: Scrollozással vezérelt animációk
- key: picks.ahmad_shadeed.bio
t: Design mérnök és író a [ishadeed.com](https://ishadeed.com/) oldalon
- key: picks.ahmad_shadeed.description
t: |
Ha visszamennék 2 évvel az időben, soha nem gondoltam volna,
hogy a CSS képes lesz scrollozással vezérelt animációkat létrehozni. Mégis, itt vagyunk!
# - key: picks.georgedoescode.name
# t:
# - key: picks.georgedoescode.bio
# t:
# - key: picks.georgedoescode.description
# t: |
# - key: picks.jen_simmons.name
# t: The `:has()` Selector
# - key: picks.jen_simmons.bio
# t: Web technologies evangelist at Apple
# - key: picks.jen_simmons.description
# t: |
# For two decades, “parent selector” was a top requested feature for CSS.
# Then in 2022, in a total surprise, the :has() pseudo-class arrived to solve this and far more.
- key: picks.sara_soueidan.name
t: |
`color-contrast()`
- key: picks.sara_soueidan.bio
t: Befogadó design mérnök és oktató
- key: picks.sara_soueidan.description
t: |
Az én szavazatom a `color-contrast()`-nak megy, mert szerintem több figyelmet érdemel.
Ez az egyik kevés funkció, amely megkönnyíti a dolgunkat (fejlesztőként) a felhasználóink számára való tervezésben.
A cross-browser támogatás nem jöhet elég hamar.
- key: picks.adam_wathan.name
t: Lightning CSS
- key: picks.adam_wathan.bio
t: A Tailwind CSS készítője
- key: picks.adam_wathan.description
t: |
Egy rendkívül gyors, minden-az-egyben CSS feldolgozó eszköz, amely kezeli az olyan dolgokat, mint a vendor prefixek, a minifikálás és a modern funkciók transzformációja, miközben egy fantasztikus platform a fejlesztők számára, hogy CSS eszközöket építsenek rá.
# - key: picks.christianoliff.bio
# t: Front-end developer for Trimble MAPS
# - key: picks.christianoliff.description
# t: |
# One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.
- key: picks.kilian_valkhof.name
t: Devtoolstips
- key: picks.kilian_valkhof.bio
t: A Polypane készítője, a fejlesztők böngészője.
- key: picks.kilian_valkhof.description
t: |
A böngészők devtooljai nagyon erősek. Ezek a rövid tippek segítenek kihozni
belőlük a maximumot, függetlenül attól, hogy melyik böngészőt használod.
- key: picks.ahmad_awais.name
t: |
`text-wrap: balance`
- key: picks.ahmad_awais.bio
t: VP DevRel & Google Developers Advisory Board alapító tagja
- key: picks.ahmad_awais.description
t: |
A főcímeknek ragyogniuk kell, és úgy kell olvasniuk, mint a szellő, még akkor is,
ha a képernyők nehézkesek. Harcoltam azokkal a bosszantó egy szavas sorokkal a sor végén (hello, özvegy szavak!),
de kitaláltam, hogy mi a megoldás: a `text-wrap: balance` – egy sor javító varázslat, ami tiszta varázslat!
# - key: picks.piccalilli_.bio
# t: Freelance designer & dev who runs piccalil.li
# - key: picks.piccalilli_.description
# t: |
# This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
# - key: picks.piccalilli_.bio
# t: Freelance designer & dev who runs piccalil.li
# - key: picks.piccalilli_.description
# t: |
# This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
# - key: picks.sarasoueidan.bio
# t: Independent UI/design engineer
# - key: picks.sarasoueidan.description
# t: |
# My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.
# - key: picks.5t3ph.bio
# t: Software Engineer @ Microsoft
# - key: picks.5t3ph.description
# t: |
# In this conference talk, Manuel Matuzovic provides thoughtfully
# crafted examples that are engaging, approachable, and actionable.
# - key: picks.hugogiraudel.bio
# t: Non-binary accessibility & diversity advocate
# - key: picks.hugogiraudel.description
# t: |
# Fela is an amazing piece of software.
# It’s pretty powerful, relatively easy to use and very performant
# - key: picks.foolip.bio
# t: Software Engineer @ Google
# - key: picks.foolip.description
# t: |
# Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
# notably bringing flex gap to WebKit,
# which means that soon it will be available on all modern browsers.
# - key: picks.jina.bio
# t: Design systems advocate and practitioner
# - key: picks.jina.description
# t: |
# The media query to reduce motion, which helps avoid
# triggering dizziness and discomfort.
###########################################################################
# Quiz
###########################################################################
- key: quiz.quiz_dave_shea
t: "1. kérdés"
- key: quiz.quiz_dave_shea.question
t: >
2003 májusában Dave Shea elindított egy weboldalt, amely bemutatta a CSS rugalmasságát és alkalmazkodóképességét. Mi volt ennek az oldalnak a neve?
- key: options.quiz_dave_shea.css_playground
t: CSS Playground
- key: options.quiz_dave_shea.style_jungle
t: Style Jungle
- key: options.quiz_dave_shea.css_zen_garden
t: CSS Zen Garden
- key: quiz.quiz_dave_shea.answer
t: >
A [CSS Zen Garden](https://www.csszengarden.com/)-nek nagy hatása volt, mert bemutatta, hogy milyen lehetőségek rejlenek a markup és a stílus elkülönítésében.
- key: quiz.quiz_dave_shea.description
aliasFor: quiz.quiz_dave_shea.question
- key: quiz.quiz_css_spec
t: "2. kérdés"
- key: quiz.quiz_css_spec.question
t: >
Ezek közül a szervezetek közül melyik gondozza a CSS specifikációt?
- key: options.quiz_css_spec.w3c
t: W3C
- key: options.quiz_css_spec.w3schools
t: W3Schools
- key: options.quiz_css_spec.mdn
t: MDN
- key: quiz.quiz_css_spec.answer
t: >
A W3C's [CSS munkacsoport](https://www.w3.org/groups/wg/css) gondozza a CSS specifikációt, amelyet aztán a böngészőgyártók implementálnak.
- key: quiz.quiz_css_spec.description
aliasFor: quiz.quiz_css_spec.question
###########################################################################
# Sponsors
###########################################################################
- key: sponsors.frontendmasters.description
t: Fejleszd a készségeidet mélyreható, modern front-end fejlesztői kurzusokkal.
- key: sponsors.polypane.description
t: A ambíciózus fejlesztők böngészője. Készíts reszponzív, akadálymentesített és gyors weboldalakat könnyedén.
- key: sponsors.nijibox.description
t: UX és termékfejlesztési tanácsadás Tokió szívében.
- key: sponsors.renderatl.description
t: A legnagyobb tech konferencia, amelynek dedikált Design & CSS szekciója van.
- key: sponsors.google_chrome.description
t: Köszönjük a Google Chrome csapatának a munkánk támogatását.
###########################################################################
# FAQ/About
###########################################################################
- key: about.content
t: >
A 2023-as State of CSS felmérés 2023 június 15-től július 15-ig futott, és 9,190 fejlesztőt ért el világszerte. A felmérés a [Devographics](https://www.devographics.com/) által készült, egy nyílt forráskódú csapat által támogatott projekt.
A State of CSS logóját és pólóját [Christopher Kirk-Nielsen](http://chriskirknielsen.com/) tervezte és animálta.
### A felmérés célja
Ez a felmérés a [State of JavaScript](https://stateofjs.com/) felméréshez hasonlóan arra szolgál, hogy azonosítsa a webfejlesztési ökoszisztéma közelgő trendjeit, hogy segítsen a fejlesztőknek technológiai döntéseket hozni.
Mint ilyen, ezek a felmérések arra összpontosítanak, hogy mi várható a következő években, és nem arra, hogy mi a jelenleg a legnépszerűbb, ezért a jelenleg legelterjedtebb funkciók vagy technológiák nem mindig szerepelnek.
Továbbá, a felmérés adatai arra is szolgálnak, hogy a böngészőgyártók prioritizálják a funkciókat és segítsék az olyan kezdeményezéseket, mint az [Interop 2023](https://web.dev/interop-2023/).
### A felmérés tervezése
Ebben az évben a felmérés tervezését [Chen Hui Jing](https://chenhuijing.com/) vezette, a Google Chrome csapatának támogatásával. Az összes kérdés opcionális volt.
### A felmérés közönsége
Ez a felmérés nyíltan elérhető volt az interneten, és a válaszadókat semmilyen módon nem szűrték vagy válogatták. A válaszadók többsége a korábbi felmérésekből származó válaszadók keveréke volt (egy dedikált e-mail listán keresztül értesítve), valamint a közösségi médiából származó forgalom.
### A felmérés finanszírozása
A felmérés finanszírozását több forrásból fedeztük:
- **Póló eladások**.
- **Szponzorált linkek**: az oldal alján található ajánlott források linkei a partnerünk, a [Frontend Masters](https://frontendmasters.com/) által biztosítottak.
- **Szponzorált grafikonok**: tavaly óta bárki directben támogathat egy-egy grafikont $10 vagy annál több összeggel, és ezután a Twitter avatarjuk megjelenik mellette.
- **Google**: ebben az évben a [Google Chrome](https://www.google.com/chrome/) csapata külön költségvetést szánt arra, hogy Lea-t felbérelje a felmérés tervezéséhez, valamint közvetlenül támogatott engem is, hogy segítse a munkámat.
- **Nijibox**: A Japánban található [Nijibox](https://nijibox.jp/) szintén nagylelkűen támogatta a munkámat, hogy segítsen a felmérések fenntarthatóbbá tételében.
### Technikai áttekintés
[Itt](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a) találsz egy részletesebb technikai áttekintést arról, hogy hogyan futnak a felmérések. A kódunk [nyílt forráskódú](https://github.com/Devographics/Monorepo/).
### Visszajelzés
- [Egy technikai probléma jelentése](https://github.com/Devographics/Monorepo/issues)
- [Javaslat a következő évre](https://github.com/Devographics/surveys/issues/193)
- [Egyéb nem technika probléma jelentése](https://github.com/Devographics/surveys/issues)
- [Csatlakozz a Discordunkhoz](https://discord.gg/tuWRUWVyJs)