-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcss2023.yml
539 lines (424 loc) · 28.9 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
locale: vi-VN
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: Phiên bản năm 2023 của cuộc khảo sát hàng năm về xu hướng mới nhất trong hệ sinh thái CSS.
- key: general.css2022.js2022_banner
t: Cuộc khảo sát State of JS 2022 đang diễn ra bạn có thể [tham gia ngay bây giờ](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!
- key: general.css2023.results_intro
t: |
Tôi không hề nói dối, việc theo kịp CSS gần đây không phải dễ dàng. May mắn thay, năm nay [Chen Hui Jing](https://chenhuijing.com/) đã dẫn dắt quá trình thiết kế khảo sát, xây dựng dựa trên công việc mà [Lea Verou](https://lea.verou.me/) đã làm vào năm trước.
Chúng tôi cũng may mắn nhận được sự hỗ trợ từ nhóm Google Chrome, người (cùng với các nhà cung cấp trình duyệt khác) sử dụng kết quả này để giúp xây dựng lộ trình của họ.
Nhờ nhiều sự giúp đỡ, chúng tôi đã có thể giới thiệu một loạt các tính năng mới, bắt đầu với khả năng **tùy chỉnh biểu đồ**. Bằng cách nhấp vào biểu tượng <span class="customize-chart-icon">“cài đặt”</span> ngay cạnh một biểu đồ, bạn giờ đây có thể lọc nó theo mức lương, quốc gia, hoặc bất kỳ biến số nào bạn muốn!
Với tất cả những điều này, hãy xem CSS đã phát triển như thế nào trong năm 2023!
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2023
t: |
CSS đang trải qua một giai đoạn phát triển chưa từng có. Từ `:has()`, container queries, subgrid, và nhiều hơn nữa, các tính năng mới đang được đưa vào trình duyệt dường như mỗi tháng.
Hậu quả của sự phát triển này là mọi thứ có thể trở nên hơi lộn xộn. May mắn thay, năm nay chúng tôi có [Chen Hui Jing](https://chenhuijing.com/) để giúp thiết kế khảo sát và hướng dẫn chúng tôi qua khu rừng CSS này.
Và nói về khảo sát, bạn có biết rằng các nhà cung cấp trình duyệt sử dụng dữ liệu của nó như một phần của sáng kiến [Interop](https://web.dev/interop-2023/) để giúp ưu tiên các tính năng cần làm tiếp theo không?
Cuối cùng, chúng tôi giới thiệu một tính năng mới năm nay: khả năng **tùy chỉnh biểu đồ** với các bộ lọc dữ liệu của riêng bạn. Chúng tôi rất hào hứng để xem bạn sẽ đưa ra những hiểu biết mới nào!
<span class="conclusion__byline">– Sacha Greif</span>
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: T-shirt
- key: sections.tshirt.description
t: |
## Hỗ trợ Cuộc khảo sát với áo thun State of CSS
Giữa những video chất lượng kém, băng cassette cồng kềnh phải tua lại, không có nhiều điều để nhớ về thời đại VHS (viết tắt của Video Home System). Nhưng một điều chúng tôi *đặc biệt* nhớ là những hình ảnh tuyệt vời của thập kỷ 90s mà thường được trang trí trên các băng VHS trắng.
Nhưng giờ đây, nhờ tài năng của Christopher Kirk-Nielsen, bạn có thể tận hưởng tất cả điều này đồng thời thể hiện tình yêu của bạn dành cho CSS!
- key: tshirt.about
t: Thông tin về chiếc áo
- key: tshirt.description
t: |
Chúng tôi sử dụng những chiếc áo siêu mềm, chất lượng cao với kiểu dáng thon gọn được in bởi các đối tác của chúng tôi tại Cotton Bureau.
- key: tshirt.getit
t: Get It
- key: tshirt.price
t: USD $29 + shipping
- key: tshirt.designer.heading
t: Thông tin về nhà thiết kế
- key: tshirt.designer.name
t: Christopher Kirk-Nielsen
- key: tshirt.designer.bio
t: |
Gốc Pháp nhưng hiện đang sống ở Mỹ, Chris không chỉ là một front-end developer tuyệt vời mà còn là một họa sĩ minh họa tài năng chuyên về retro visuals. Trên thực tế, chúng tôi khuyến khích bạn xem [các thiết kế áo thun khác](https://chriskirknielsen.com/designs) của anh ấy!
###########################################################################
# Sections Introductions
###########################################################################
- key: sections.user_info.description.css2023
t: |
Cuộc khảo sát năm nay đã tiếp cận **9,190** lập trình viên trên toàn thế giới.
- key: sections.features.description.css2023
t: |
CSS đã có những bước tiến vượt bậc gần đây, và nhiều tính năng mới được giới thiệu
và dần dần được cộng đồng lập trình viên tiếp nhận.
- key: sections.css_frameworks.description.css2023
t: |
Một lần nữa, Tailwind CSS nổi bật như một framework UI lớn mà lập trình viên vui mừng tiếp tục sử dụng; trong khi Open Props đang tạo ra một cộng đồng nhỏ nhưng đam mê.
- key: sections.css_in_js.description.css2023
t: |
Sau một số sự tăng trưởng ban đầu, dường như ngành CSS-in-JS đã đạt đến mức ổn định, và
việc CSS gốc đang tiếp nhận nhiều ưu điểm chính của nó có lẽ là một yếu tố đóng góp lớn.
- key: sections.other_tools.description.css2023
t: |
30 năm sau khi trình duyệt được phát minh, chúng ta vẫn thấy sự đổi mới trong lĩnh vực này với những nhân tố mới như Brave và Arc; hoặc các công cụ chuyên biệt như Polypane đang chiếm lĩnh thị trường.
- key: sections.usage.description.css2023
t: |
Bất kể bạn sử dụng CSS như thế nào, dữ liệu cho thấy việc đảm bảo code của bạn hoạt động trên tất cả các trình duyệt vẫn là một vấn đề, đặc biệt là với các tính năng mới như `:has()`.
- key: sections.resources.description.css2023
t: |
Giữa các blog, kênh YouTube và podcast, cộng đồng CSS trở nên sôi động hơn bao giờ hết.
###########################################################################
# 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: >
Phân chia người trả lời giữa các nhóm thu nhập thấp và thu nhập cao cho chúng ta
hai danh sách các quốc gia rất khác nhau.
- key: user_info.higher_education_degree_by_gender.description.css2023
t: >
Sự đại diện của phụ nữ cao hơn dự kiến trong số những người trả lời
có bằng giáo dục cao hơn trong các lĩnh vực không liên quan đến CSS,
có thể chỉ ra rất nhiều sự thay đổi nghề nghiệp.
- key: user_info.source_by_gender.description.css2023
t: >
Mặc dù tổng số lượng thấp khiến việc rút ra bất kỳ kết luận nào trở nên khó khăn,
tỷ lệ phụ nữ cao nhất trong số những người trả lời đã tìm thấy cuộc khảo sát
từ nơi làm việc của họ hoặc thông qua lời truyền miệng, đặc biệt so với các mạng xã hội
như Twitter hoặc YouTube.
- key: user_info.source_by_race_ethnicity.description.css2023
t: >
Một lần nữa, hãy nhớ rằng kích thước mẫu thấp, khi xem xét chủng tộc và dân tộc,
YouTube nổi bật là một trong những nguồn đa dạng nhất đưa họ đến cuộc khảo sát.
- key: user_info.average_income_by_company_size.description.css2023
t: >
Chúng tôi tìm thấy những người trả lời có thu nhập cao nhất làm việc cho các công ty lớn,
mặc dù đáng chú ý là những người làm việc độc lập có một lợi thế thu nhập nhẹ nhàng hơn so với các công ty nhỏ.
- key: user_info.yearly_salary_usa_vs_the_world.description.css2023
t: >
Khi so sánh thu nhập ở Mỹ với phần còn lại của thế giới, rõ ràng là các nhà phát triển Mỹ
được đại diện quá mức trong các nhóm thu nhập cao.
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: |
t: |
Thuộc tính `gap` cho Flexbox là một bổ sung hữu ích đến mức không ngạc nhiên khi nó có
sự tiến bộ **{value}** trong năm 2023
- key: award.most_commented_feature_award.comment
t: Với **{value}** bình luận, không có tính năng nào khác thậm chí còn gần như tạo ra nhiều phản hồi như Subgrid.
- key: award.tool_satisfaction_award.comment
t: |
Trong tất cả các giải pháp CSS-in-JS, Open Props là cái duy nhất duy trì
tỷ lệ giữ chân **{value}** cao ngất ngưởng.
# - 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: |
Với **{value}** đề cập, Panda là công cụ được đề cập nhiều nhất trong các câu hỏi tự do.
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.css2023.chen_hui_jing
t: |
<span class="first-line">Khi việc sử dụng các tính năng CSS mới hơn đang có xu hướng tăng lên, việc sử dụng các framework CSS đã đi xuống.</span>
Điều này có thể là một dấu hiệu cho thấy mọi người đang bắt đầu quen với ý tưởng rằng bạn không nhất thiết phải chờ để sử dụng các tính năng CSS mới hơn, bởi vì trình duyệt sẽ bắt kịp nhanh chóng hơn trước.
Với sự nhận biết cao về các tính năng CSS gốc như nesting và `:has()` (có thể hoạt động như một parent selector, nhưng nhiều hơn thế nhiều!), có vẻ như chúng ta đang ở trên bờ vực của việc tiếp nhận rộng rãi.
Trong tất cả các tính năng này, tôi có một ưu thích cá nhân cho năm nay, đó là `text-wrap: balance`. Nó cung cấp một giải pháp chỉ trong một dòng cho một yêu cầu mà tôi đã liên tục nhận được trong suốt sự nghiệp phát triển web của mình: “liệu có thể điều chỉnh tiêu đề đó để từ cuối cùng không phải là một từ lẻ?”
Cũng thú vị khi có rất nhiều nhà phát triển cảm thấy rằng việc tạo hiệu ứng chuyển động cho auto và masonry layout là những tính năng CSS đang thiếu. Thật đúng là việc xác định kích thước của phần tử (đặc biệt là chiều cao) luôn là một vấn đề khó khăn cho trình duyệt khi chúng không được khai báo rõ ràng.
Nhưng như [Lea Verou](https://lea.verou.me/) đã đề cập vào năm ngoái, với các sáng kiến như [Interop](https://wpt.fyi/interop-2023) đưa các trình duyệt lại gần nhau, các tính năng từng được cho là không thể nay có thể trở thành hiện thực!
- key: conclusion.css2023.chen_hui_jing.bio
t: Developer Experience Engineer @ Interledger Foundation
###########################################################################
# Picks
###########################################################################
- key: picks.my_pick
t: "Lựa chọn của tôi năm 2023: "
- key: picks.intro
t: Chúng tôi đã hỏi các thành viên của cộng đồng CSS để chia sẻ “lựa chọn của năm” của họ
# - 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 Evangelist
- key: picks.kevin_j_powell.description
t: |
Blog của Ahmad là nguồn kiến thức và cảm hứng, với việc khám phá sâu rộng các chủ đề, bao gồm cả hình ảnh tuyệt vời và các trường hợp sử dụng.
# - 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: Podcast CSS
- key: picks.josh_comeau.bio
t: Giảng viên, CSS cho Lập trình viên JavaScript
- key: picks.josh_comeau.description
t: |
Podcast này là một chuyến tham quan thú vị về một loạt các tính năng CSS quan trọng và hiện đại.
Nó được dẫn dắt bởi Una Kravets và Adam Argyle, hai người tuyệt vời.
- key: picks.adam_argyle.name
t: Zag.js
- key: picks.adam_argyle.bio
t: Google Chrome Developer Relations
- key: picks.adam_argyle.description
t: |
Những người tài năng tại ChakraUI đang xây dựng một số thành phần và ý tưởng thế hệ tiếp theo,
không thể chờ đợi để xem họ sẽ tạo ra điều gì khác.
# - 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: |
Bộ chọn `:has()`
- key: picks.jhey_tompkins.bio
t: CEO của Fancy CSS
- key: picks.jhey_tompkins.description
t: |
`:has()` là phép màu mà bạn có thể sử dụng để kết hợp các API khác như container queries, anchor positioning, v.v. lại với nhau. Tôi rất hào hứng để xem cộng đồng sẽ tìm ra những cách sử dụng mới và sáng tạo như thế nào.
# - 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: Scroll-Driven Animations
- key: picks.ahmad_shadeed.bio
t: Kỹ sư thiết kế và tác giả tại [ishadeed.com](https://ishadeed.com/)
- key: picks.ahmad_shadeed.description
t: |
Nếu tôi quay lại 2 năm trước, tôi sẽ không bao giờ tưởng tượng ra CSS
có các scroll-driven animation. Tuy nhiên, chúng ta đã ở đây!
# - 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: Kỹ sư thiết kế và giáo viên
- key: picks.sara_soueidan.description
t: |
Phiếu bầu của tôi dành cho color-contrast() vì tôi nghĩ rằng nó xứng đáng nhận được nhiều sự chú ý hơn.
Đây là một trong số ít tính năng giúp chúng ta (nhà phát triển) dễ dàng hơn trong việc
thiết kế cho người dùng của mình. Sự hỗ trợ trên nhiều trình duyệt không thể đến sớm hơn.
- key: picks.adam_wathan.name
t: Lightning CSS
- key: picks.adam_wathan.bio
t: Người tạo ra Tailwind CSS
- key: picks.adam_wathan.description
t: |
Một công cụ xử lý CSS cực kỳ nhanh, tất cả trong một, xử lý các vấn đề như vendor prefixes, minification, và modern feature transpilation, tất cả trong khi là một nền tảng tuyệt vời cho các nhà phát triển khác để xây dựng các công cụ CSS trên đó.
# - 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: Người tạo ra Polypane, trình duyệt cho nhà phát triển.
- key: picks.kilian_valkhof.description
t: |
Các công cụ phát triển trong tất cả các trình duyệt đều rất mạnh mẽ. Những mẹo nhỏ giúp bạn
tận dụng tối đa chúng, bất kể bạn sử dụng trình duyệt nào.
- key: picks.ahmad_awais.name
t: |
`text-wrap: balance`
- key: picks.ahmad_awais.bio
t: Phó Chủ tịch DevRel & thành viên sáng lập Hội đồng Tư vấn Google Developers
- key: picks.ahmad_awais.description
t: |
Tiêu đề nên lấp lánh và dễ đọc như một cơn gió, ngay cả khi màn hình khó đoán trước.
Tôi đã chiến đấu với những từ đơn độc ở cuối dòng (xin chào, từ góa phụ!),
nhưng bạn có biết gì không? Nhập text-wrap: balance - phép thuật sửa chữa trong một dòng mà thật sự là phép màu!
# - 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: "Câu hỏi 01"
- key: quiz.quiz_dave_shea.question
t: >
Vào tháng 5 năm 2003, Dave Shea đã khởi chạy một trang web giới thiệu sự linh hoạt và thích ứng của CSS. Tên của trang web đó là gì?
- 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: >
[CSS Zen Garden](https://www.csszengarden.com/) đã tạo ra ấn tượng lớn bằng cách minh họa những gì có thể thực hiện khi bạn giữ markup và styling riêng biệt.
- key: quiz.quiz_dave_shea.description
aliasFor: quiz.quiz_dave_shea.question
- key: quiz.quiz_css_spec
t: "Câu hỏi 02"
- key: quiz.quiz_css_spec.question
t: >
Tổ chức nào trong số những tổ chức này duy trì thông số kỹ thuật CSS?
- 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: >
[Nhóm làm việc CSS của W3C](https://www.w3.org/groups/wg/css) duy trì thông số kỹ thuật CSS, sau đó được các nhà cung cấp trình duyệt thực hiện.
- key: quiz.quiz_css_spec.description
aliasFor: quiz.quiz_css_spec.question
###########################################################################
# Sponsors
###########################################################################
- key: sponsors.frontendmasters.description
t: Nâng cao kỹ năng của bạn với các khóa học kỹ sư giao diện người dùng hiện đại, sâu rộng.
- key: sponsors.polypane.description
t: Trình duyệt dành cho các nhà phát triển tham vọng. Xây dựng các trang web đáp ứng, dễ truy cập và nhanh chóng một cách dễ dàng.
- key: sponsors.nijibox.description
t: Tư vấn Phát triển Sản phẩm và UX ngay tại trung tâm Tokyo.
- key: sponsors.renderatl.description
t: Hội nghị công nghệ lớn nhất với một đường ray thiết kế & CSS riêng biệt.
- key: sponsors.google_chrome.description
t: Cảm ơn nhóm Google Chrome đã hỗ trợ công việc của chúng tôi.
###########################################################################
# FAQ/About
###########################################################################
- key: about.content
t: >
Cuộc khảo sát State of CSS 2023 diễn ra từ ngày 15 tháng 6 đến ngày 15 tháng 7 năm 2023, và thu thập được 9,108 phản hồi. Cuộc khảo sát được thực hiện bởi [Devographics](https://www.devographics.com/), với sự giúp đỡ từ một nhóm người đóng góp mã nguồn mở và các tư vấn viên.
Logo và áo thun State of CSS được thiết kế và tạo hình động bởi [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
### Mục tiêu Khảo sát
Cuộc khảo sát này, cùng với cuộc khảo sát [State of JavaScript](https://stateofjs.com/), được tạo ra để xác định các xu hướng sắp tới trong hệ sinh thái phát triển web để giúp các nhà phát triển lựa chọn công nghệ.
Do đó, những cuộc khảo sát này tập trung vào việc dự đoán những gì sẽ đến trong những năm tiếp theo thay vì phân tích những gì đang phổ biến ngay bây giờ, đó là lý do tại sao các tính năng hoặc công nghệ hiện đang phổ biến nhất không luôn được bao gồm.
Ngoài ra, dữ liệu khảo sát cũng được sử dụng bởi các nhà cung cấp trình duyệt để ưu tiên các tính năng và thông báo cho các sáng kiến như [Interop 2023](https://web.dev/interop-2023/).
### Thiết kế Khảo sát
Năm nay, thiết kế khảo sát được dẫn dắt bởi [Chen Hui Jing](https://chenhuijing.com/) nhờ vào một khoản tài trợ từ nhóm Google Chrome. Tất cả các câu hỏi khảo sát đều là tùy chọn.
### Đối tượng Khảo sát
Cuộc khảo sát được mở trực tuyến và người trả lời không bị lọc hoặc chọn lọc theo bất kỳ cách nào. Người trả lời chủ yếu là sự kết hợp của người trả lời từ các cuộc khảo sát trước (được thông báo qua danh sách gửi thư) và lưu lượng truy cập từ mạng xã hội.
### Quỹ Dự án
Quỹ cho dự án này đến từ nhiều nguồn khác nhau:
- **Bán áo thun**.
- **Liên kết Tài trợ**: các liên kết đến các nguồn tài nguyên được đề xuất ở cuối mỗi trang được cung cấp bởi đối tác của chúng tôi [Frontend Masters](https://frontendmasters.com/).
- **Biểu đồ Tài trợ**: bắt đầu từ năm ngoái, bất kỳ ai cũng có thể chọn tài trợ trực tiếp cho một biểu đồ với 10 đô la hoặc nhiều hơn, và nhận được hình đại diện Twitter của họ hiển thị bên cạnh.
- **Google**: năm nay, nhóm [Google Chrome](https://www.google.com/chrome/) đã dành một ngân sách để thuê Lea giúp thiết kế cuộc khảo sát, cũng như tài trợ trực tiếp cho tôi để hỗ trợ công việc của tôi.
- **Nijibox**: [Nijibox](https://nijibox.jp/) có trụ sở tại Nhật Bản cũng đã ân cần chấp nhận tài trợ cho nỗ lực của tôi để giúp những cuộc khảo sát hàng năm trở nên bền vững hơn.
### Tổng quan Kỹ thuật
Bạn có thể tìm hiểu sâu hơn về kỹ thuật dùng để chạy các cuộc khảo sát [tại đây](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Code của chúng tôi là [open-source](https://github.com/Devographics/Monorepo/).
### Feedback
- [Báo cáo một vấn đề kỹ thuật](https://github.com/Devographics/Monorepo/issues)
- [Đưa ra đề xuất cho năm sau](https://github.com/Devographics/surveys/issues/193)
- [Các vấn đề không kỹ thuật khác](https://github.com/Devographics/surveys/issues)
- [Tham gia Discord của chúng tôi](https://discord.gg/tuWRUWVyJs)