CSS利用動向調査の最新版「State of CSS 2020」が公開:各種CSS技術の満足度や使用率が明らかに
CSSの利用動向に関する年次調査の最新版の結果が発表された。世界102カ国のCSSユーザー1万1000人超の回答が集計、分析されている。最も利用者が多く、満足度が高かったのはスタイルシート言語「Sass」だった。
CSS(Cascading Style Sheets)の利用動向に関する年次調査の最新版「State of CSS 2020」が2020年12月に発表された。世界102カ国のCSSユーザー1万1492人の回答を集計、分析したものだ。
この年次調査はCSSの最新の利用状況を浮かび上がらせることを目指している。その背景には「CSS Grid」「CSS-in-JS」「Tailwind CSS」の台頭など、CSSが現在、これまで以上に急速に進化しているとの認識があるという。
以下では2020年に発展した機能や技術、ユーザーの評価などについて主な内容を紹介する。
導入が最も進んだ機能「CSS Grid」
State of CSS 2020は4つの機能、技術を選んで表彰している。CSS Grid、Tailwind CSS、PostCSS、CSS Modulesだ。
今回の調査で導入が最も進んだ機能は、CSS Gridだった。2020年調査で「使っている」と答えた回答者の割合が73.3%となり、2019年調査の54.7%から18.6ポイント増えている。この増加幅は、調査したCSS機能の中で最も大きかった。
「object-fit」(17.8ポイント増)と「Variables」(15.2ポイント増)がこれに続いた。
最も評価が上がった技術「Tailwind CSS」
Tailwind CSSは、2020年調査で「また使いたい」と答えた回答者の割合が、2019年調査と比べて17.8ポイント増えた。この増加幅は、調査したCSS技術の中で最も大きかった。
増加幅が2番目に大きかった技術は「Atomic CSS」(Utility-first CSS、10.8ポイント増)、3番目は「CSS Modules」(10.1ポイント増)だった。
最も満足度が高い技術「PostCSS」
「PostCSS」は、満足しているユーザーの割合が91.4%と最も高かった。CSS Modules(86.8%)、Tailwind CSS(86.6%)がこれに続いた。
開発者の学習意欲が最も高い技術「CSS Modules」
学びたいと考えている開発者の割合が75.1%と最も高かったのはCSS Modulesだ。2番目に高かったのはTailwind CSS(62%)、3番目は「Styled Components」(60%)だった。
なかなか普及が進まないCSSの新機能
近年、新しい機能がCSSに続々登場している。コミュニティーが新機能を吸収するのに時間がかかることから、普及は遅れ気味だ。
State of CSS 2020では、CSSの機能を次の7つのグループに分け、各グループに属する個々の機能について、認知度や使用率などを明らかにした。
- Layout(レイアウト)
- Shapes & Graphics(外観とグラフィックス)
- Interactions(操作)
- Typography(タイポグラフィ)
- Animations & Transforms(アニメーションと変形)
- Media Queries(メディアクエリ)
- Other Features(その他の機能)
次の図にある7つの点線の円は、各機能グループについて知っているユーザー数を示す。点線の円の内側にある二重の円はそれぞれ、個々の機能について知っているユーザー数(外側)と使っているユーザー数(内側)を示す。
State of CSS 2020のWebサイトでは、この図の二重の円をマウスホバーの対象にすると、個々の機能について知っているユーザー数、使っているユーザー数、使用率をオーバーレイ表示する。
よく使われる単位とセレクタは
State of CSS 2020では、CSSのさまざまな単位、疑似要素、セレクタの使用状況を報告している。最も利用者が多かった単位は「px」、次いで「%」「vh」または「vw」「em」「rem」だった。
セレクタでは、「:first-child」「:nth-child()」「:last-child」の順に利用者が多かった。
CSS関連技術の満足度はどうだったのか
調査では「プリプロセッサ/ポストプロセッサ」「フレームワーク」「方法論」「CSS-in-JS」という4つのカテゴリーでそれぞれの技術について、満足度、興味(開発者が学びたいか)、使用状況、認知度を明らかにした。
これを基に、満足度とユーザー数の観点から、これらの技術を分類したのが次の図だ。
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
- 利用者調査「State of JavaScript」最新版が公開、2万人強が参加
JavaScriptの利用動向に関する年次調査(2019年版)が発表された。開発者2万1717人の回答を集計、分析したものだ。勢いのあるフレームワークやツール、JavaScriptのスーパーセット言語が分かる。 - 「VS Code」内から「Microsoft Edge」の開発者ツールが利用可能に
Microsoftはオープンソースコードエディタ「Visual Studio Code」向けの拡張機能「Microsoft Edge Tools for VS Code」の一般提供を開始した。Webアプリケーションやサービスを開発する際にツールを切り替える必要がなくなり、開発者の負担も減るという。 - デザインは知識と理屈で設計できる 色、書体、字間・行間のポイント
今日から使えるデザインに関する知識をあれこれ紹介する本連載。初回はデザインやデザイナーとはどんな役割を持っているのか、最低限知っておくべき色、書体、字間・行間のポイントについて。