メインコンテンツにスキップ

The State of CSS 2021

[ja-JP] general.back_to_intro

オピニオン

現在あなたを悩ませていることや、いまのCSSに足りず今後使いたい機能など、CSSについて思っていることを言うところでした。

CSSを学ぶのは簡単だ

Customize Data
まったく同意しない
同意しない
どちらでもない
同意する
とても同意する
20192020202120192020202110.1%19.5%19.9%27.8%23.2%24.2%34.4%43.4%43.1%24.7%10.6%10%

CSSの発展は遅すぎる

Customize Data
まったく同意しない
同意しない
どちらでもない
同意する
とても同意する
20192020202120192020202111.9%5.7%6.3%22.4%38%42.3%38.6%33.6%30.8%16.4%17.9%16.7%11%5%4.1%
💡

もうひとつ。Tシャツを購入すると、あなたのプログラミングスコアが9000以上になります。これも科学的知見です！

セマンティックではない、ユーティリティクラス（.center、.large-textなど）は避けるべきだ

Customize Data
まったく同意しない
同意しない
どちらでもない
同意する
とても同意する
20192020202120192020202118.6%14.1%14.1%13.7%24.8%25.9%32.3%31.4%29.9%14.9%19.3%19.8%20.7%10.6%10.7%

CSSを書いていて楽しい

Customize Data
まったく同意しない
同意しない
どちらでもない
同意する
とても同意する
2019202020212019202020214%6.3%6.2%5.7%14.4%14.5%12.8%26.9%42.2%43.5%48.7%34.7%36.3%
We asked members of the CSS community to share their “pick of the year”

My 2021 Pick: CSS Noise

CSS generated texture and randomness makes for unique and interesting paint jobs in your design. Noise tools have made the technique accessible.

We asked members of the CSS community to share their “pick of the year”

Adam Argyle

CSS at Google

ブラウザの差異

ブラウザの差異が原因で使うのに苦労したCSSの機能はありますか？

0.0501001502000.050100150200ユーザー数Centeringcolor-contrast()color()Exclusionsprefers-reduced-dataProgressive Web AppsCSS RegionsresizeScopingContaindirectionFunctions:has SelectorParent Selectorblend-modeCSS content-visibili…pointer-eventsAnimationcalc()initial-letterMaskingMasonry LayoutMulti-Column Layoutoverscroll-behaviorPerspectiveaccent-colorPrint Support::markerAnimationsclampclip-pathCSS Logical Properti…object-fitForm Elements StylingBrowser Support@supportsCSS Houdinioverflowscroll-behaviorScroll Snapline-clampCSS position:sticky:focus-visibleCSS property: @conta…backdrop-filterScrollbar StylingFlexboxCSS property: aspect…Flexbox GapGrid151617172025304046535780114159
回答者数：725（完了度8.4％）

CSSのつらいところ

CSSについて、最も悪戦苦闘している点はなんでしょうか？結果はトーナメントの各ラウンドの勝者の数で並べています。

ラウンド1勝者
ラウンド2勝者
ラウンド3勝者
0.02.0k4.0k6.0k8.0k10k12k0.02.0k4.0k6.0k8.0k10k12kユーザー数スコープ・詳細度インタラクションパフォーマンスの問題レイアウト・配置レスポンシブデザインフォーム要素のスタイル設計・管理ブラウザの互換性2393256224272608292033423955393789082111901130129517332456254081514791601

CSSに足りていない機能

CSSについて、いま使えたらなと最も思う機能はなんでしょうか？結果はトーナメントの各ラウンドの勝者の数で並べています。

ラウンド1勝者
ラウンド2勝者
ラウンド3勝者
0.02.0k4.0k6.0k8.0k10k0.02.0k4.0k6.0k8.0k10kユーザー数色関連の関数サブグリッドミックスインスコープネストブラウザのサポート親セレクタコンテナークエリー1963189724892664330334413897391795111301658208223432366798133411781360

ウェブ技術の現状に満足しているか

Customize Data
0%10%20%30%40%50%％の質問回答数とても不満不満どちらでもない満足とても満足No Answer0%10%20%30%40%50%0.6%0.6%3%3%12.9%12.9%50%50%9.4%9.4%24.1%24.1%
回答者数：6585（完了度75.6％）

CSSの現状に満足しているか

Customize Data
0%10%20%30%40%50%％の質問回答数とても不満不満どちらでもない満足とても満足No Answer0%10%20%30%40%50%0.7%0.7%3.3%3.3%14%14%48.2%48.2%9.9%9.9%23.9%23.9%
回答者数：6607（完了度75.9％）