forked from Devographics/locale-zh-Hant
-
Notifications
You must be signed in to change notification settings - Fork 0
/
state_of_css_2022.yml
434 lines (332 loc) · 20.6 KB
/
state_of_css_2022.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
locale: zh-Hant
translations:
###########################################################################
# General
###########################################################################
- key: general.results.description
t: 每年舉辦的 CSS 生態系最新趨勢調查：2022 年版。
- key: general.css2022.js2022_banner
t: The State of JS 2022 survey is currently open, you can [go take it right now](https://survey.devographics.com/survey/state-of-js/2022?source=css2022)!
- key: general.css2022.results_intro
t: |
CSS 持續以空前的速度進化。不只是有新功能和屬性，甚至還有巢狀結構與階層圖層等新功能，讓語言基礎獲得重組與改進。
今年，我們很幸運地，獲得站在這些改變最前線的人士協助：W3C 工作小組成員 [Lea Verou](https://lea.verou.me/) 來選擇今年的調查問題，特別專注在矚目的 CSS 新功能，或是即將到來的。
還有，調查結果會協助瀏覽器開發廠商，將未來藍圖進行排序，使得瀏覽器之間的相容更好。
帶著以上提到的，開始看看 CSS 在 2022 如何進化吧！
###########################################################################
# Introduction
###########################################################################
- key: introduction.css2022
t: |
<span class="first-letter">本</span>來以為 CSS 已經靠著 Flexbox、Grid 和 CSS 變數等強化，進化成強大的語言。結果，這還不是它的最終型態。
上層選擇器、原生巢狀結構、Container Queries、Cascade Layers... 想到就令人訝異：清單上，改變遊戲規則的功能已經即將到來。
而令人由衷感謝的是，在渡過這些水域時，有最好的嚮導協助引領前進：[Lea Verou](http://lea.verou.me/) 主持今年的調查設計，期待的成果是：這份調查可以涵蓋所有令人注目的關鍵新發明。
<span class="conclusion__byline">– Sacha Greif</span>
P.S. 也是今年的新東西：在調查過程中，答題者可以在每個提到的功能或函式庫進行留言！務必要在圖表的側邊欄看一下。
###########################################################################
# Tshirt
###########################################################################
- key: sections.tshirt.title
t: T-shirt
- key: sections.tshirt.description
t: |
## 贊助調查，獲得 CSS 現況調查 T-Shirt
糟糕的影片品質、成堆的錄影帶，還得要倒帶，VHS 時代沒什麼好留戀的。但是，我們*確實*想念裝飾空白錄影帶，令人驚豔的 90 年代視覺。
現在，才華洋溢的 Christopher Kirk-Nielsen 讓大家可以享受復古風潮的同時，也慶祝對 CSS 的愛！
- key: tshirt.about
t: 關於這件 T-shirt
- key: tshirt.description
t: |
我們使用高品質、超柔軟的 Tri-blend 合身剪裁，由 Cotton Bureau 的合作夥伴進行印刷。
- key: tshirt.getit
t: 入手
- key: tshirt.price
t: $29 美金 + 運費
- key: tshirt.designer.heading
t: 設計師
- key: tshirt.designer.name
t: Christopher Kirk-Nielsen
- key: tshirt.designer.bio
t: |
來自法國，現住在美國。Chris 不僅是厲害的前端開發者，也是擅長復古視覺的優秀插畫家。我們也希望大家去看看他的 [T-Shirt 設計作品](https://chriskirknielsen.com/designs)！
###########################################################################
# 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
###########################################################################
# Awards
###########################################################################
- key: award.feature_adoption_delta_award.comment
t: |
Flexbox 的 `gap` 實在是個太好用的強化屬性，在 2022 年增加了 **{value}** 也不令人意外。
# - 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}** 筆對 Subgrid 的留言，遠遠超越其它功能可以引起的討論。
- key: award.tool_satisfaction_award.comment
t: |
CSS Module 是所有 CSS-in-JS 解決方案中，唯一能維持 **{value}** 極高滿意度比例。
# - 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: |
Arc 瀏覽器是自由填答的問題裡，目前被提及最多次的工具，達到 **{value}** 次。
###########################################################################
# Conclusion
###########################################################################
- key: conclusion.css2022
t: |
<span class="first-line">[去年](https://2021.stateofcss.com/en-US/conclusion/)，Kilian 預測我們撰寫 CSS 的方法會開始永遠改變，而今年的結果證實他的預測。</span>
[Interop 2022](https://wpt.fyi/interop-2022) 把瀏覽器齊聚一堂，朝著相同目標努力，有些功能從「這不可能發生」變成了「這正在進行」。上層選擇器 (`:has()`) 和 Container Queries (`@container`) 是其中兩個最大聲的。多年以來，效能因素讓開發者們根深蒂固地認為這些不可能實現。只不過，到頭來兩者還是有可能的。
另一方面，Subgrid 就一直停留在藍圖上，因為這是非常龐大的工作。現在，已經支援 Firefox 和 Safari，並且積極地在 Chrome 實做。因此，可以期待明年可能有更高的使用率。
我預測 2023 年的明星是原生巢狀結構，還有顏色控制。
巢狀結構目前是大家還在使用預處理器的[最主要原因](https://twitter.com/leaverou/status/806936438797307904)，所以，能夠原生使用的話，是重大的鬆綁。
使用 CSS 顏色也極將要令人振奮起來。就在這時候，有一長串會造成全面影響的功能正在實做。2023 年結束之前，我們可能在使用著廣色域、各別裝置的顏色 (`color()`, `lab()`, `lch()`, `oklab()`, `oklch()`)，透過 `color-mix()` 控制顏色已經是基本常識。
綜合以上，代表 2023 年對 CSS 來說，很可能非常振奮的一年。不管我的預測是否正確，還是期望這些令人驚艷的實做到來。真是個寫 CSS 的美好時代！
- key: conclusion.css2022.bio
t: W3C 技術架構小組成員，MIT CSAIL
###########################################################################
# Picks
###########################################################################
- key: picks.my_pick
t: '我的 2022 精選：'
- key: picks.intro
t: 我們詢問 CSS 社群的成員，分享「年度精選」
- 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: Jhey Tompkins
- key: picks.kevin_j_powell.bio
t: CSS Evangelist
- key: picks.kevin_j_powell.description
t: |
Jhey is always pushing the limits of what we can do with CSS with
fun and impressive demos and Codepens. With all the new features landing in CSS recently,
Jhey is at the forefront of explaining how they work.
- 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: Modern CSS
- key: picks.josh_comeau.bio
t: Software developer and educator
- key: picks.josh_comeau.description
t: |
CSS has changed so much over the past few years.
Stephanie shows us how to leverage modern CSS features
to solve old problems in new ways.
- key: picks.adam_argyle.name
t: The `:has()` Selector
- key: picks.adam_argyle.bio
t: UI/CSS DevRel at Google
- key: picks.adam_argyle.description
t: |
CSS just because even stronger at orchestrating UI interaction across components.
We've barely scratched the surface of the impact of `:has()` on our styles.
- 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.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: Container Queries
- key: picks.ahmad_shadeed.bio
t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com)
- key: picks.ahmad_shadeed.description
t: |
If I would pick one highlight for 2022, it's container queries!
They are finally here in stable browser near you
# - 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: The `:has()` Selector
- key: picks.sara_soueidan.bio
t: Independent inclusive design engineer
- key: picks.sara_soueidan.description
t: |
We've been wishing and waiting for CSS container queries for so long.
But then `:has()` arrived shortly after,
and it felt like it was "everything we never knew we always wanted".
- key: picks.adam_wathan.name
t: Empty CSS Variables
- key: picks.adam_wathan.bio
t: Creator of Tailwind CSS
- key: picks.adam_wathan.description
t: |
Not many people know this but `--my-var: ;` is totally valid CSS,
and it's way more useful than you think.
We use it in Tailwind CSS all the time to make it
possible to decompose a single CSS property into multiple classes.
# - 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: Interop 2022
- key: picks.kilian_valkhof.bio
t: Web developer and creator of Polypane
- key: picks.kilian_valkhof.description
t: |
Started in 2021 as Compat 2021, browser engine makers
have started coordinating which features they prioritize.
Not only is this closing the various feature gaps that exist
between between browsers, it's also increasing the speed with which new
features like @layer lands across browsers.
# - 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.
###########################################################################
# Sponsors
###########################################################################
- key: sponsors.frontendmasters.description
t: 加入深入、現代的前端工程課程，讓技能更進階。
- key: sponsors.nijibox.description
t: 給有野心的開發者使用的瀏覽器。輕鬆打造響應式、無障礙且速度飛快的網站。
- key: sponsors.renderatl.description
t: 最大的技術研討會，深入討論設計與 CSS。
- key: sponsors.google_chrome.description
t: 感謝 Google Chrome 團隊支援我們的作品。
###########################################################################
# FAQ/About
###########################################################################
- key: about.content
t: >
2022 CSS 現況調查從 2022 年 10 月 1 日開始，至 2022 年 11 月 1 日，收到 14,310 份回應。這份調查由我 [Sacha Greif](https://sachagreif.com/) 經營，並且有一群開源貢獻者與顧問的協助。
今年的 Logo 和 T-Shirt 由 [Christopher Kirk-Nielsen](http://chriskirknielsen.com/) 設計，並製作成動畫。
### 問卷目標
這份調查與 [JavaScript 現況調查](https://stateofjs.com/)是為了發掘網站開發生態系接下來的趨勢，幫助開發者們在技術上做選擇。
因此，這些調查專注在期盼接下來會發生的事情，而不是分析現在受到歡迎的。這就是即使有些功能或技術目前非常流行，卻也不都包含在內的原因。
還有，瀏覽器開發廠商會使用調查資料安排優先順序，並促成倡議的發起，像是 [Interop 2022](https://wpt.fyi/interop-2022)。
### 問卷設計
今年，受惠於 Google Chrome 團隊的資金協助，由 [Lea Verou](https://lea.verou.me/) 主持問卷設計，且[在 Github](https://github.com/orgs/Devographics/projects/1) 公開討論。問卷問題都是選填。
此外，我們計劃進一步透過[工作小組郵寄清單](https://www.devographics.com/working-group/)掌握問卷的設計、檢討與回饋。
### 問卷閱聽眾
這份調查在網路上公開提供存取，答題者沒有經過任何形式的篩選、挑選。答題者主要來自先前調查（透過完整功能的郵寄清單通知）與社群媒體流量。
### 專案資金來源
從這個專案獲取的資金，來源有幾個：
- **T-shirt 販售**。
- **贊助連結**：每頁底部的推薦資源連結，由夥伴 [Frontend Masters](https://frontendmasters.com/) 提供。
- **贊助圖表**：去年開始，任何人都可以選擇以至少 10 美金直接贊助圖表，讓 Twiiter 頭像照片在旁邊顯示。
- **Google**：今年，[Google Chrome](https://www.google.com/chrome/) 團隊撥出一些預算，找來 Lea 協助設計問卷，同時也直接贊助我的作品。
- **Nijibox**：位於日本的 [Nijibox](https://nijibox.jp/) 也對我的行動慷慨提供贊助，讓這些每年一次的調查更有維持的動力。
### 技術概要
在[這裡](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb)可以找到調查進行的深入技術概要。程式碼是[開源的](https://github.com/Devographics/Monorepo/)。
- **資料收集**：運行在 [Vercel](https://vercel.com/) 的 [Next.js](https://nextjs.org/) 應用程式。
- **資料存放/處理**：運行在 [MongoDB Atlas](https://cloud.mongodb.com/) 的 MongoDB & MongoDB Aggregations。
- **資料 API**：運行在 [Render](https://render.com/) 的 Node.js GraphQL API.
- **結果網站**：運行在 [Netlify](https://netlify.com/) 的 [Gatsby](https://www.gatsbyjs.com/) React 應用程式。
- **資料視覺化**：[Nivo](https://nivo.rocks/) React 資料視覺化函式庫。
- **字型**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) 和 [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)。
### 回饋
- [回報技術問題](https://github.com/Devographics/Monorepo/issues)
- [未來建議](https://github.com/Devographics/surveys/issues/66)
- [其它非技術問題](https://github.com/Devographics/surveys/issues)
- [加入 Discord](https://discord.gg/tuWRUWVyJs)
- [加入 Devographics 工作小組](https://www.devographics.com/working-group/)，參與之後調查的設計與檢討。