部 I 章 1

CSS

公開日：2021/12/05

更新日：2024/11/16

Hero image of Web Almanac characters measuring and painting a web page.

Eric A. Meyer と Shuvam Manna によって書かれた。

Chris Lilley、 Jens Oliver Meiert、 Estelle Weyl、 Brian Kardell、 Adam Argyle と Lea Verou によってレビュ。

Rick Viscomi による分析。

Shaina Hantsis 編集。

Sakae Kotaro によって翻訳された。

序章

CSS（Cascading Style Sheets）は、ウェブ上のページを構築するための3本柱のひとつで、構造を定義するためのHTML、動作やインタラクションを指定するためのJavaScriptと合わせて、三位一体となっています。

2021年版のWeb Almanacでは、前回と比較して、CSSの使い方が「必要だと思うもの」「実際に制作現場で目にするもの」の領域でどのように異なるかをより深く理解できます。CSSの機能をより強固にすることや、CSSで<div>を中央に配置することへの挑戦がブログやカンファレンスでの発言、Twitterでの発言などで話題になっていましたが、ウェブ上のページでは、まったく相反する結果が示されていました。これはCSSが十分な年齢になったことで、奇抜なおもちゃに、夢中になるのではなく、安定した状態を維持することに重きを置くようになったという事実を裏付けています。

CSS-in-JSの採用は、クロールされた全ページの3％（昨年比1パーセントポイント増）にまで増加しましたが、最先端のHoudiniの機能は、まだほとんどがチュートリアルやサンプルギャラリーに限られています。レスポンシブ対応は、引き続きもっとも関心の高い優先事項の1つであり、max-widthとmin-widthはトップのメディアクエリであり、「calc()」は幅を決定するためにもっともよく使用されるCSS関数です。

ユーザーがウェブに集まり続ける中、第二の故郷、ワークスペース、ガレージ、ウサギの穴のような場所であるインターネットを、私たちがどのように描いてきたのかを知るためのデータに飛び込んでみましょう。

使用方法

CSSはほとんどのページでもっとも重いコンポーネントではありませんが、ウェブの他の部分と同様に、年々そのサイズは増加し続けています。ウェブページの中央値では約7KBのCSSがロードされ、上限値では平均4分のMB強となっています。2020年と比較すると、CSSの総重量の中央値は約7.9％増加し、90パーセンタイルは7％弱増加していますが、すべてのパーセンタイルでモバイルCSSがデスクトップCSSよりも少し小さいという昨年のパターンは維持されています。

すべてのページがこのような制約を受けたわけではありません。最大のCSSウエイトを持つページでは、64,628KBの負荷がかかりました。それに比べて、モバイル用の最大のCSSウェイトはわずか17,823KBと、非常にスリムな印象を受けます。

2020年と同様に、ページの重さはプリプロセッサーによって大きく左右されないことがわかりました。デスクトップページの17％、モバイルページの16.5％がソースマップを含んでおり、昨年の15％からわずかに増加しました。ソースマップを含むCSSのシェアが一貫しているのは、ソースマップのシェアが、ソースマップの採用よりもビルドツールの使用によるものであることを示しているように思われます。

どのようなソースマップが使われているかについては、昨年とほぼ同様の結果となりました。

ソースマップの種類	2020	2021
CSSファイル	45%	45%
Sass	34%	37%
Less	21%	17%

図1.2. 2021年と2020年のソースマップの種類。

これは、SassがLessに比べて優位に立ち続けている証拠とも言えますが、その変化は非常に小さいため、統計的にもそうでなくても、有意であると言うのは難しいでしょう。いつものように、時間が解決してくれるでしょう。

埋め込み型、外部型を問わず、1ページあたりのスタイルシート数の平均は、昨年よりもわずかに増加しています。50パーセンタイルから90パーセンタイルまではそれぞれ1つずつ増加しましたが、10パーセンタイルと25パーセンタイルは変化がありませんでした。

2,368

図1.4. ページで読み込まれる外部スタイルシートの最大数です。

信じられないことに、外部スタイルシートの数がもっとも多い今年の記録は、昨年の記録をほぼ2倍上回っています。2020年の1,379に対して2,368です。これを行った人は誰でも、いくつかのファイルを組み合わせてサーバーを休ませてください。

スタイルシートの数は重要ですが、実際のスタイルルールの数はどうでしょうか？　昨年と比較すると、下位のパーセンタイルは少し増加していますが、上位のパーセンタイルはほとんど変化していません。2021年と2020年で異なるのは、ほぼすべてのパーセンタイルにおいて、デスクトップページの方がモバイルページよりも平均してルール数が多いということです。

セレクターとカスケード

カスケードを理解することは、CSSを扱う上で非常に重要なことです。とくに、ある要素に書いたスタイルがまったく機能していない場合には、なおさらです。

CSSには、クラス、ID、そしてスタイルの重複を避けるために重要なカスケードを使用するなど、ページにスタイルを適用するためのさまざまな方法があります。

クラス名

昨年同様、もっとも人気のあるクラス名は active で、fa、fa-*（Font Awesomeのプレフィックス）、wp-*（WordPressのプレフィックス）のクラス名が非常に強い印象を与えています。selectedとdisabledは昨年と比べて順位が入れ替わっていますが、もっとも心強い変化はclearfixが5％減少したことで、フロートベースのレイアウトが衰退し続けていることを示しています。

また、Bootstrapのアクセシビリティ機能であるsr-only-focusableが配置されているのも心強いですね。これはBootstrapのアクセシビリティ機能で、要素を画面外に配置しても、スクリーンリーダーがアクセスできるようにするものです。

ID

ページは引き続きIDを使用しており、その割合は2020年に見られたものとほぼ同じです。人気のあるID名のリストも一貫しています。”content”が約14％でトップに立ち、”footer”と “header”がそれに続きます。後者の2つのIDは、昨年に比べて約1％減少していますが、これだけで決定的なことは言えず、開発者は可能な限り対応するHTML要素の<header>と<footer>に置き換えるべきでしょう。

rc-で始まるIDは、GoogleのreCAPTCHAシステムの一部であり、そのほとんどのバージョンは、さまざまな方法でアクセスできません。

属性セレクター

もっとも一般的な属性セレクターは引き続き type で、チェックボックスやラジオボタン、テキスト入力などのフォームコントロールを選択する際に使用されることが多いです。

擬似的なクラスと要素

擬似クラス、擬似要素ともに、順位や分布は2020年のWeb Almanacから大きく変わっていませんでした。いくつかの順位は変わりましたが、全体的にはほとんど変化がないようです。これが常識の定着を示しているのか、デザイナーの関心事のスナップショットを示しているのか、あるいは単に分析の性質を示しているのかは議論の余地があります。

2020年と同様に、ユーザーアクション擬似クラスの :hover, :focus, :active がトップ3を占め、いずれも全ページの3分の2以上に登場しています。構造的な擬似クラスも数多く登場しましたが、もっとも興味深い変化は、否定の擬似クラスである :not() は :visited よりも人気を博し、ページの50％のシェアを獲得したことです。

今年、とくにチェックしたのは、:focus-visibleという、フォーカスされた要素をユーザーの期待に合うようにスタイルする方法の使用です。この機能は、2020年にChromiumへ搭載され、2021年1月にはFirefoxに搭載され、（発表時点では）Safari 15で実験的なフラグを立てて利用できるようになっています。最近の導入状況を反映してか、分析したページの1％未満にしか登場しませんでした。この数字が今後数年間で変化するかどうかが注目されます。

現在使用されている擬似要素のほとんどは、特定のインタフェースコンポーネント、chromeの一部、またはハイライトされたテキストなどを選択するためのブラウザ固有の方法です。これらを除外すると、::first-letterが使用されているページは非常に少ないことがわかりますが、それでも::first-lineよりは多くのページで使用されていることがわかります。::marker は、箇条書きやカウンターのようなリストアイテムのマーカーを順序付きリストとして選択する方法で、ページシェアは1％にも満たないが、リストに入っています。ここで注意すべきなのは、::markerのクロスブラウザサポートは、比較的新しいということです（2020年10月）。今後数年間で利用者が増えるかどうかが注目されます。

`!important`

その古い戦斧 !important は、2020年のWeb Almanacと比較して、マークされたルールのシェアがほとんど変わらず、ウェブ上で持ちこたえています。

!importantと書かれたルールが17,990個もあるモバイルページを発見しました。この数字は、もっとも重要なデスクトップページの17,648個のルールを上回っています。これがスクリプトやプリプロセッサのミスによるものであることを願ってやみません。

!importantが何に適用されるかというと、昨年と同様にdisplayであり、その他の項目は2020年と同じ順番であるが、最後の項目を除いてpositionがfloatを上回っています。

!importantの対象となるもっとも人気のあるプロパティです。 — 図1.12. `!important`の対象となるもっとも人気のあるプロパティです。

セレクターの特異性

パーセンタイル	デスクトップ	モバイル
10	0,1,0	0,1,0
25	0,2,0	0,1,3 (up 0,0,1)
50	0,2,0	0,2,0
75	0,2,0	0,2,0
90	0,3,0	0,3,0

図1.13. ページごとのセレクターの特異性の中央値の分布。

多くのCSSメソドロジーでは、作者が単一のクラスに限定することを推奨しています。これは、すべてのセレクターの特異性を、より管理しやすい単一のレイヤーに押し込めるためです。たとえば、BEMの手法は、全ページの34％に見られました。セレクターの特異性の中央値の10パーセンタイルは、デスクトップとモバイルの両方の特異性の平均値が（0,1,0）であることから、この種の考え方のさらなる証拠を示しています。これは昨年の調査結果と同様で、ほぼすべての中央値が一致しています。ただし、モバイルの25パーセンタイルは若干上昇しています。

値と単位

CSSには、値や単位を指定する方法が複数用意されており、設定された長さや、グローバルキーワードに基づく計算などがあります。

長さ

ピクセルの長さをどう思うかは別として、ピクセルは圧倒的に人気のある長さ単位で、全ページの約71％に登場しています。2位の「パーセンテージ」は、「ピクセル」に圧倒的な差をつけています。

プロパティ	`px`	`<number>`	`em`	`%`	`rem`	`pt`
`font-size`	(▼1%) 69%	2%	(▼1%) 16%	(▼1%) 5%	(▲1%) 5%	2%
`line-height`	(▼5%) 49%	(▲3%) 34%	(▲1%) 14%	(▼1%) 2%	(▲1%) 1%	0%
`border-radius`	65%	(▼1%) 20%	3%	10%	(▲2%) 2%	0%
`border`	71%	(▲1%) 28%	2%	0%	0%	0%
`text-indent`	(▼1%) 31%	(▲1%) 52%	8%	(▼1%) 8%	0%	0%
`gap`	(▼8%) 13%	(▲2%) 18%	(▼1%) 0%	0%	(▲7%) 69%	0%
`vertical-align`	(▼11%) 18%	12%	(▲11%) 66%	4%	0%	0%
`grid-gap`	(▲3%) 66%	(▼1%) 10%	9%	(▼1%) 0%	(▼2%) 14%	0%
`padding-inline-start`	(▼7%) 26%	(▲2%) 7%	(▲4%) 66%	0%	0%	0%
`mask-position`	0%	0%	(▼1%) 49%	(▲1%) 51%	0%	0%
`margin-inline-start`	(▼7%) 31%	(▲5%) 51%	(▲1%) 15%	(▲2%) 2%	1%	0%
`margin-block-end`	(▲1%) 5%	(▲7%) 38%	(▼9%) 56%	0%	(▲1%) 1%	0%

図1.15. プロパティごとの長さタイプの分布

面白くなるのは、さまざまな長さの単位がどのように使われているかを正確に分析することです。一例を挙げると、line-heightでもっともよく使われる長さの単位はピクセルで、次に<number>の値（単位のないゼロ長さの値のすべてのインスタンスを含む）が続きます。また、vertical-alignやpadding-inline-startでは、emがもっとも一般的な長さの単位です。

この表の数字の横の括弧内の正負は、2020年の結果からの変化を示しています。ほとんどの物件で、他の長さの単位に比べて画素数が少なくなっていますが、2つの例外があります。もっとも大きな変更点はvertical-alignで、供給される値がbaselineのようなキーワードではなくlengthの場合、選択される単位がpixelsからemに11ポイント変更されました。

フォントのサイジングに関しては、emがremに対して圧倒的な優位性を保っていますが、変化の兆しもあります。2020年から2021年にかけて、emからremへ7ポイントの変動がありました。

裸の <number> 単位を許可するプロパティはいくつかありますが（例：line-height）、<length> 値には、長さがゼロであれば単位を必要としないという特殊なケースがあります。すべての長さゼロの値を調べたところ、ほぼ88％が単位を省略していました。ゼロの長さで単位を含むものは、ほぼすべてがピクセル（0px）を使用していました。ゼロの長さには単位が必要なく、単位を含めることはかなり無意味なので、これは嬉しい結果となりました。今後、単位のないゼロの長さのシェアが拡大することを期待しています。

計算方法

calc()関数を使った代表的なプロパティです。 — 図1.18. `calc()`関数を使った代表的なプロパティです。

例年通り、calc()のもっとも一般的な使い方は幅の設定ですが、widthに占めるcalc()の値の割合は、2020年と比較して20ポイントも減少しました。これは、calc()がwidthに使われることが減ったのではなく、他のプロパティに使われることが増えたことを反映していると考えられます。

関数calc()で使われるもっとも一般的な長さの単位です。 — 図1.19. 関数`calc()`で使われるもっとも一般的な長さの単位です。

ピクセル単位は計算上の使用率ではまったく変化がなかったが、パーセントは他の単位のロングテールと比較して少し負けており、2020年から4ポイント低下しました。

関数calc()で使われる代表的な演算子です。 — 図1.20. 関数`calc()`で使われる代表的な演算子です。

昨年同様、演算子は引き算が断トツで、シェアはほとんど変化しませんでした。2位と3位の変化は大きく、足し算が割り算を上回って6ポイント増加し、割り算は同程度減少しました。

関数calc()で使用されるユニークなユニットの数です。 — 図1.21. 関数`calc()`で使用されるユニークなユニットの数です。

calc()の値は比較的シンプルで、パーセント値の計算結果からピクセルを引くなど、2つの異なる単位を使った計算が圧倒的に多いです。全calc()式の99％は、1種類または2種類の単位を使用しています。

グローバルキーワード

2020年版Web Almanacと比較して、initialなどのグローバルキーワードの使用率が大幅に上昇しました。 inheritは2～3ポイントしか上昇していませんが、initialは約8ポイント、unsetは約10ポイント上昇しています。また、revertも1ポイント上昇しました。

カラー

さまざまな色の値の種類があるにもかかわらず、Netscape 1.1の時代から使われている#RRGGBBという構文が、色の宣言の半分に使われています。2位はCSSの革新的な#RGB略記法で、カラーバリューの4分の1を占めています。言い換えれば、すべての色の値の75％は、16進数のRGB構文で表現されているということです。第3位のrgba()というフォーマットは、作者が古典的な16進法のフォーマットを超える理由を示しています：アルファ値にアクセスするためです。(実際、どちらのシェアも小さいですが、hsla()はhsl()よりも人気があり、rgba()が普通のrgb()よりもはるかに一般的であるのと同じです。)

たとえばrgba(0, 0, 0, 1)のように、これまで機能的な構文の中で値にカンマが使われていたカラーフォーマットでは、著者はカンマを削除し、スラッシュでカラーとアルファを分けることができるようになりました（例：rgb(0 0 / 1)）。2020年以降、このカンマなしの構文の使用率は倍増し、機能的な色の構文全体の0.12％から0.25％になりました。

キーワード	デスクトップ	モバイル
`transparent`	82.24%	82.93%
`white`	7.97%	7.59%
`black`	2.44%	2.29%
`red`	2.23%	2.17%
`currentColor`	1.94%	2.03%
`gray`	0.68%	0.64%
`silver`	0.56%	0.55%
`grey`	0.39%	0.37%
`green`	0.32%	0.31%
`blue`	0.15%	0.12%
`whitesmoke`	0.12%	0.11%
`orange`	0.12%	0.10%
`lightgray`	0.08%	0.08%
`lightgrey`	0.07%	0.07%
`yellow`	0.07%	0.06%
`gold`	0.04%	0.03%
`magenta`	0.03%	0.03%
`Background`	0.02%	0.03%
`Highlight`	0.02%	0.03%
`pink`	0.03%	0.03%

図1.24. もっとも人気のある色の名前キーワード値です。

色の名前領域では、依然としてtransparentが圧倒的な人気を誇っており、色の名前キーワード全体の約82％を占めています。おなじみのwhite、black、redは約12％で、currentColorは2020年と比べて0.5％の増加で5位となっています。

昨年のWeb Almanacでは「Canvas や ThreeDDarkShadow など、かつては非推奨であったが、現在は部分的に非推奨ではなくなったシステムカラー」が、かろうじて使用されているという記述がありました。これは今でも正しいのですが、奇妙なことに、トップ20にはこのような値が1つ（Highlight）ではなく2つあります。とはいえ、どちらもごくわずかなページ数の領域での出来事なので、このような変化は目立たないでしょう。

79％

図1.25. display-p3の色のうち、sRGB空間外にある色の割合。

display-p3色空間の使用率は、2020年に発見された時と同様に、消え入るように少ないままです。これはおそらく、この記事を書いている時点では、Safari（デスクトップとモバイルの両方）でのみサポートされているためです。デスクトップは90ページ、モバイルは105ページと約3倍になりました。モバイルでdisplay-p3を使って表現された色の79％がsRGB色空間では表現できない色だったからです。color()関数がブラウザで広くサポートされるようになるまでは、Webは画面が実際に表示できる色の約3分の2を許容するsRGBに留まります。

イメージ

「百聞は一見にしかず」と言いますが、バイト換算すると一桁も、二桁も高いことが、多いのが画像です。JavaScriptで画像を埋め込んだり、HTMLで画像を埋め込んだりと、さまざまなアプローチがありますが、ここではCSSで読み込んだ画像がどのように使われているかを見てみました。

CSSにおける画像のフォーマット

まず、探した画像フォーマットの内訳と、それぞれのフォーマットの出現頻度を紹介します。

PNGが圧倒的な人気を誇り、GIF、SVG、JPGが驚くほど僅差で続いています。かなり新しいWebPフォーマットは、CSSで読み込まれる画像の3.7％しか占めておらず、一番上の小さなスライスは、認識されない値とICOフォーマットに対応しています。

また、アニメーションの有無については確認していません。

なお、今回の分析では、CSSで読み込まれる画像のみを対象としており、HTMLで何が読み込まれているかは確認していません。したがって以下の結果は、Webページの重さ、あるいはCSSの重さ、重くないことを示す指標とはなりません。あくまでも、CSSで読み込まれた画像がページの総重量にどれだけ貢献しているかを示すものです。

CSS内の画像数

下位2パーセンタイルはそれぞれ1枚、90パーセンタイルでも10枚程度と、すべての画像タイプにおいて、ほとんどのCSSでは画像の読み込み量は多くないことがわかりました。

6,089

図1.28. ページのCSSで読み込まれる外部画像の最大数。

デスクトップ版のCSSで6,088枚のPNG画像を読み込んでいるサイトがありました。モバイル版では実際に画像が追加され、6,089枚のPNGになっていました。効率化のために、すべての画像が小さく、カラーインデックス化されていることを願っています。

CSSにおける画像の重さ

画像の数もさることながら、その重さも重要です。たとえば、10MBの背景を1枚読み込むのと、100KBの画像を10枚読み込むのとでは、サーバーでの圧縮を考慮しても劣ります。

中央のページのCSSによる画像の読み込みは、合計16KBほどでした。また、CSSによるモバイルの画像読み込み量は、デスクトップに比べて全体的に一貫してやや少なめで、CSS開発者がモバイルのコンテキストの制限を多少なりとも念頭に置いていることがうかがえます。

314,386

図1.30. CSSで読み込まれたイメージのもっとも重い総量をKBで表しています。

たまにはね。CSSで読み込まれた画像の総重量が314,386.1KBと、GBの3分の1という膨大な量になっているページがありました。

パーセンタイル	JPG	PNG	GIF	(その他)	SVG	WebP
10	4.5	0.7	0.5	0.3	0.4	1.7
25	28.2	2.2	1.7	0.3	0.6	14.2
50	114.3	7.0	3.7	0.3	1.7	39.6
75	350.7	36.4	8.3	48.1	5.4	133.9
90	889.3	173.6	13.0	229.2	20.0	361.8

図1.31. モバイルページでCSS経由で読み込まれた外部画像の総重量（KB）の画像フォーマット別分布。

画像の重さをフォーマット別に分類してみると、興味深いことがわかりました。90パーセンタイルでは、GIF画像がSVGファイルよりも平均的に軽いのです。

また、驚くことではないかもしれませんが、もっとも重い画像フォーマットがJPGであることも興味深いことでした。これはおそらく、ホームページのトップなどでよく見かける大きな写真にはJPGが好まれ、圧縮やその他の最適化トリックを使っても、すべてのピクセルが加算されてしまうからでしょう。

グラデーション

プロパティ	デスクトップ	モバイル
`background`	62%	62%
`background-image`	62%	61%
`-webkit-mask-image`	5%	5%
`--*`	1%	1%
`mask-image`	1%	1%
`border-image`	1%	1%

図1.32. グラデーション画像の値が与えられたプロパティの割合。

CSSグラデーションを使用しているページの割合は、昨年とほぼ同じでした。デスクトップページの77％、モバイルページの76％でした。しかし、グラデーションが使用されているプロパティには変化が見られ、backgroundとbackground-imageが圧倒的な人気を誇っていましたが、グラデーションの約62％がこのプロパティに割り当てられていました。

線形グラデーションの人気は引き続き高く、2020年版Web Almanacで見られた放射状グラデーションに対する5対1のリードを維持しています。

グラデーションの接頭辞付きバージョン（例：-webkit-linear-gradient）を含めると、結果的には昨年のグラフと同じになりました。

その他、グラデーションの値を分析してわかったことがあります。

グラデーションのカラーストップ数の中央値は、4ストップの90パーセンタイルを除いて、わずか2ストップです。
ハードカラーストップ（2つのカラーストップを同じ位置に配置したグラデーション）は、グラデーション全体の半分強に存在している。
カラーストップ補間（別名「ミッドポイント」）は、すべてのグラデーションインスタンスの21％で使用されました。

また、グラデーションの複雑さの上限でも、劇的な減少が見られました。昨年、もっとも多くのカラーストップを使用したグラデーションの数は646ストップでした。今年の受賞者のカラーストップ数はわずか81個でした。

レイアウト

ウェブ上のレイアウトにテーブルを使用していた時代からFlexbox、Grid、Multicolumn、そしてfloat、positioning、さらにはCSSテーブルプロパティなど、さまざまな選択肢が用意されている時代になりました。どのようなプロパティと値の組み合わせがあるのか、スタイルシートを簡単に検索してみたところ、次のような数値が出てきました。

分析したページの93％が絶対配置を使ってレイアウトされていると主張しているわけではありません。分析したページの93％が絶対配置でレイアウトされていると主張しているわけではありません！　むしろ、このチャートが示しているのは、分析したページの93％のスタイルにposition: absoluteが登場しているということです。同様に、display: gridが36％のページのスタイルに登場しているかもしれませんが、それは全ページの37％がGridページであることを意味するものではなく、単にスタイルシートのどこかにこの組み合わせが登場しているということです。

このセクションでは、プロパティ値の組み合わせだけでなく、ページでの実際の使用状況の証拠を見て、より詳細な分析をしています。

フレックスボックスとグリッドの採用

図1.36. モバイルデバイスでのFlexboxおよびGridレイアウトの採用。

Flexboxとグリッドの採用が進み続けています。2019年のFlexboxの採用率は41％、2020年は63％でした。今年、Flexboxはモバイルで71％、デスクトップで73％を記録しました。一方、グリッドは、Web Almanacでは毎年2％から4％、そして現在は8％と倍増しています。前のセクションとは対照的に、ここで計測されているのは、単にスタイルシートにFlexboxやGridのプロパティが含まれているページではなく、実際にFlexboxやGridをレイアウトに使用しているページの割合であることに注意してください。

異なるグリッドレイアウト技術の使用

さまざまなグリッドのプロパティを調べてみると、いくつかの興味深いパターンが見つかりました。

全グリッドページの約15％が、グリッドの名前付きエリアを定義するために grid-template-areas を使用しています。
グリッドのテンプレートにある角括弧は、名前付きのグリッド線があることを示していますが、約700万ページの分析のうち、1万ページ弱しか見つかりませんでした。

また、Flexboxのレイアウトを分析し、フレックスの成長値と縮小値をゼロに設定し、すべてのフレックスアイテムの幅をパーセンテージやピクセル幅などの静的なものに設定したレイアウトを確認しました。これらは「グリッドライクのFlexbox」と呼ばれ、Flexboxレイアウトの4分の1強がこの条件を満たしていることがわかりました。分析が複雑であるため、多くのケースを見逃している可能性があります。しかし、デザイナーがグリッドスタイルのレイアウトに強い関心を持っていることは明らかであり、今後数年間でグリッドへの移行は進む可能性があります。

マルチカラム

20％

図1.37. マルチカラムレイアウトを使用しているページの割合。

マルチカラムレイアウトはユーザーが列の一番下までスクロールしてから次の列の一番上まで戻ってこなければならないという、ウェブ上では少々面倒なものですが、分析したページの20％でマルチカラムの使用が検出され、これは2020年版Web Almanacよりも5％上昇しています。これほど多くのページに掲載されていることに驚きを隠せませんし、その採用率が高まっていることにも驚きを隠せません。

ボックスのサイズ

1ページあたりのborder-box宣言の数の中央値の分布。 — 図1.38. 1ページあたりの`border-box`宣言の数の中央値の分布。

W3Cのオリジナルボックスモデルの原則は、引き続き否定されています。box-sizing: border-boxを使用しているページがどれくらいあるかを調べたところ、2020年から約5％増加し、90％という圧倒的な数字になりました。分析したページの約半数が、ユニバーサルセレクター(*)を使って、ページ上のすべての要素にボーダーボックスのサイズを適用しています。このような「1つのサイズがすべてに適合する」アプローチは、ページあたりの border-box 宣言の数の中央値が下位3つのパーセンタイルで非常に低いことの説明に役立つかもしれません。

また、約4分の1のページでは、チェックボックスやラジオボタンにbox-sizingを適用しています。

トランジションとアニメーション

アニメーションは引き続き広く使用されており、animationプロパティは、分析対象となった全モバイルページの77％、全デスクトップページの73％で使用されています。さらに人気の高いtransitionは、モバイルページの85％、デスクトップページの90％で使用されています。

これらのトランジションの中で、もっとも一般的なアプリケーションは、allキーワードを使ったすべてのanimatable propertyへの適用であり、分析されたページの46％で発生しています（明示的であれデフォルトであれ）。これに続くのはopacityで、トランジションを含むすべてのページの42％です。

私たちは、これらのトランジションの持続時間と遅延時間を見てみました。90パーセンタイルの場合でも、トランジションの持続時間の中央値はわずか0.5秒でした。

トランジションの遅延の中央値がもっとも高かったのは1.7秒でしたが、さらに興味深いことに、10パーセンタイルの中央値の遅延は負の3分の1秒とまではいかない程度で、多くのトランジションがアニメーションの途中で開始されていることを示しています（これは負の遅延が引き起こす現象です）。

遷移の継続時間と遅延の範囲を詳しく見てみると、非常に長時間かかることがわかりました。もっとも大きな値は9,999,999,999,996秒で、これは約3億1700万年に相当します。別の言い方をすると、月がたった1ピクセルだったら水平方向のスクロール遷移にこの期間を使用した場合、1ピクセルだけ右へスクロールするのに2世紀以上かかることとなります。しかし、私たちが発見したもっとも長い移行遅延である31.7 兆年年に相当するミリ秒の値に比べれば、その差は歴然としています。

トランジションの際に使用されるタイミング関数については、デフォルト値であるeaseが断トツのトップ。2位はease-in-outとlinearの事実上の同点でしたが、意外だったのは4位のcubic-bezierでした。これはライブラリやある種のツールから来ている可能性が高いと思われます。なぜなら、三次ベジエ曲線の作成方法を手で学ぶことは可能ですが、わざわざそうする人はほとんどいないからです（そうする理由もあまりありませんが）。

なるほど、でも、どんなアニメーションが行われているのでしょうか？　そのために、さまざまなアニメーションラベルを、実行されているアニメーションの種類によって分類しました。たとえば、fa-spin、spin、spinner-spinなどと表示されているアニメーションは「回転」アニメーションに分類され、もっとも人気がありました。

「不明・その他」の順位が高い理由の1つは、アニメーションのラベルaで、名前のついたアニメーション全体の約6〜7％でした。(これにもっとも近いと思われるbは2％の普及率でした）。

「移動」や「スライド」スタイルのアニメーションが弱いのは意外かもしれませんが、これらは具体的にはanimationのタイプであることを忘れないでください。このサンプルでは、transitionプロパティで駆動するトランジションは表現されていません。多くの単純な動き（およびフェード）はトランジションで処理され、animationはより複雑な効果のために確保されていると考えられます。

レスポンシブデザイン

FlexboxやGridなどの組み込みツールの登場により、ウェブを閲覧する際のさまざまなスクリーンサイズに対応したサイトを作ることが非常に容易になりました。また、media-queriesを使用することで、さらに効果的になります。

使用されているメディア機能

作者がメディアクエリを作成する際には、ビューポートの幅をテストすることがほとんどです。max-widthとmin-widthが圧倒的に多いクエリで、これは2020年と同じでした。3位と4位の結果にも順位の変動はありませんでした。

顕著な変化が見られたのは、prefers-reduced-motionクエリのランキングでした。このクエリは、2020年には24％のシェアで7位でしたが、今年は32％のシェアで5位に上がり、orientationをわずかに上回っています。

また、最下位には新参者が登場しました。昨年19位だったpointerは、ディスプレイデバイスの主な入力機構がマウスなどのポインティングデバイスであるかどうかをチェックするクエリで、21位に転落してしまいました。一方、hover メディア機能は、20位にランクインしました。hover は、ディスプレイデバイスの主要な入力メカニズムが、ページ上の要素にホバー状態を引き起こすことができるかどうかをテストするために使用されます。

どちらのクエリも目的は似ていて、（簡単に言うと）ページを表示するために使用されているデバイスがマウス駆動であるかどうかを調べることです。モバイルファーストのデザイン哲学と組み合わせると、デスクトップのスタイルがモバイルのデフォルトスタイルを上書きするように追加され、pointerやhoverのようなクエリがどのように役立つかがわかります。どちらかが優位に立つかどうかを判断するのはまだ早いですが、今年のトレンドはhoverに傾いています。

また、今年はprefers-color-schemeが登場し、7％となりました。これは、昨年のレポート以降、iOSデバイスがダークモードに対応したためと思われますが、いずれにしても、デザイナーが配色の好みを考慮するようになったことは喜ばしいことです。

一般的なブレークポイント

2020年と同様、もっともよく使われたブレークポイントは767ピクセルと768ピクセルで、これはiPadのポートレートモードの解像度と疑わしいほどよく一致しています。767pxは最大幅のブレークポイントとして使われることが圧倒的に多く、最小幅の値として使われることはほとんどありませんでした。一方、786pxは最小値、最大値としてもよく使われていました。

767-768の範囲を超えて、次に人気があったのは600ピクセルと1,200ピクセルで、その次が480ピクセルでした。

ブレークポイントのクエリをすべてピクセルに変換したのかと思われるかもしれませんが、残念ながら変換していません。今回分析したすべてのブレークポイントのうち、ピクセル以外の値として最初に挙げられたのは48emで、ランキングでは76位、デスクトップでは1％、モバイルでは2％のスタイルに現れています。次のemベースの値である40emは、85位に見られます。

メディアクエリ内のプロパティ

では、これらのメディアクエリブロックの中で、作者は実際に何をスタイリングするのでしょうか？　もっともよく設定されるプロパティは display で、次いで color、width、height となります。

2020年から2021年にかけてのもっとも注目すべき変化の1つは、メディアブロック内に設定されるプロパティとしてのfont-sizeの凋落です。2020年には、全メディアブロックの73％に登場し、ランキング5位となっていました。今年は全メディアブロックの約6割に登場し、12位にランクインしました。

margin-rightとmargin-topはさらに大きく落ち込み、それぞれ8位と9位から25位と17位になりました。このような変化は、共通のフレームワークやソフトウェアの変更を強く示唆しています。WordPressのデフォルトテーマの変更もその一例ですが、これが変化の正確な原因であるかどうかはわかりません。

クエリ機能

クエリ機能（@supports）の使用率は伸び続けています。2019年には30％のページが使用していることが判明し、昨年は39％でした。2021年には、ほぼ48％のページが、どのコンテキストでどのCSSを適用するかを決めるために、クエリ機能を使用しています。

では、作者は何を条件にCSSを使うのでしょうか？　もっとも多かったのは「スティッキーポジショニング」で、全体の半数以上を占めています。

CSSの代表的な機能を@supportsで照会できます。 — 図1.47. CSSの代表的な機能を`@supports`で照会できます。

グリッドをサポートしているかどうかを確認したクエリ機能はわずか3％で、グリッドをサポートしているかどうかを確認したページは261,406ページになります。グリッドレイアウトが使用されていたのは、モバイルページで270万ページ、デスクトップページで230万ページであったことを考えると、この数字が正確であれば、グリッドレイアウトの大部分はフォールバックなしで導入されていると考えられます。

Custom properties

Web Almanacの3年間で、カスタムプロパティ（CSS変数とも呼ばれる）の使用率がもっとも高まったものの1つです。2019年の使用率は全サイトの5％程度でしたが、昨年はモバイルが20％近く、デスクトップが15％と急増していました。今年は、全モバイルページの28.6％、デスクトップページの28.3％でカスタムプロパティが定義されていることがわかりました。さらに、モバイルページの35.2％、デスクトップページの35.6％に、少なくとも1つの var() 関数値が含まれていることがわかりました。

ネーミング

最初に確認したこと、”開発者は自分のカスタムプロパティを何と呼んでいるのか？　”ということでした。結論から言うと、ここではWordPressの普及率が出ていて、WPコアで定義されたリンクカラーリングのカスタムプロパティがトップエントリーになっています。

その後、たくさんの色名が見つかりました。名前のついた色 blue がすぐそこにあり、--blue へカスタム値を定義する必要があるとは奇妙に思えるかもしれませんが、実際には、開発者は基本的な色名にカスタムシェードを割り当てています。そのため、--blue: blueではなく、--blue: #3030EAです。

使用方法

図1.50. custom-propertyの値を与えられるもっとも人気のあるプロパティ。

色にちなんだすべてのカスタムプロパティに加えて、カスタムプロパティの値を受け取る（var()関数を使用する）もっとも一般的な4つのプロパティは、いずれも何らかの形で色を設定しています。

各カスタムプロパティには、1種類のCSS値が設定されます。たとえば、--red: #EF2143 は --red に色の値を割り当て、--multiplier: 2.5 は数字の値を割り当てます。その結果、「色」がもっとも多く、次いで「寸法（長さ）」、そして「フォントファミリー」の順で単独、グループ共に人気だということがわかりました。

複雑さ

カスタムプロパティを他のカスタムプロパティの値に含めることは可能です。2020 Web Almanacの例を見てみましょう。

:root {
  --base-hue: 335; /* depth = 0 */
  --base-color: hsl(var(--base-hue) 90% 50%); /* depth = 1 */
  --background: linear-gradient(var(--base-color), black); /* depth = 2 */
}

前述の例のコメントにあるように、これらの下位参照を連鎖させればさせるほど、カスタムプロパティの depth は大きくなります。

意外かもしれませんが、カスタムプロパティの値の深さは0のものが圧倒的に多く、他のカスタムプロパティの値を自分の値に含めていません。3分の1近くは値の深さが1段階で、2段階以上の値を持つカスタムプロパティはほとんどありません。

2020年と同様に、カスタムプロパティの値が使用されているセレクターも確認しました。約60％がルート要素（:rootまたはhtmlセレクターを使用）に設定されており、約5％が<body>要素に適用されていました。残りは、ルート要素の子孫である <body> 以外の要素に適用されています。つまり、全カスタムプロパティの約3分の2が、実質的にグローバルな定数として使用されていることになります。これは、昨年の結果と同じです。

国際化

英語は横書きで、文字を左から右に読む。しかし、アラビア語、ヘブライ語、ウルドゥー語などの言語は右から左に書きますし、モンゴル語、中国語、日本語のように、上から下へ縦に書く言語や文字もあります。そのため、非常に複雑な構造になっています。HTMLとCSSには、このような問題を解決する方法があります。

方向性

テキストの方向は、CSSプロパティのdirectionを使って、明示的に強制できます。このプロパティは、全ページの11％の <html> 要素で使用されており、3％の <body> 要素で使用されていることがわかりました（重複した結果をチェックしていないので、重複している可能性があることに注意してください）。

CSSで方向性を設定しているページのうち、<html>要素の92％、<body>要素の82％がltr（左から右）に設定されていました。全体的に見ると、CSSで方向性を設定しているページのうち、rtl（右から左）が使われているのは9％だけでした。これは、ほとんどの言語が右から左ではないことを考えると、大体予想できることです。

論理的・物理的特性

また、国際化に役立つCSSの機能として、margin-block-start、padding-inline-endなどの「論理的」なプロパティや、text-alignなどのプロパティのstartやendなどの値があります。これらのプロパティと値により、ボックスの機能を、上、右、下などの物理的な方向ではなく、テキストの流れの方向に関連付けることができます。

2021年半ばの時点で、何らかの論理的プロパティを使用しているページは、わずか4％でした。使っているページのうち、約33％がtext-alignをstartやendへ設定するために使っていました。また、46％ほど（合計）が論理的なマージンやパディングを設定していました。繰り返しになりますが、これらの数字は重複してる可能性があります。

Ruby

CSSは、方向性や論理的な機能に加えて、CSS Rubyによる国際化にも対応しています。これは、インターリニアアノテーション（原文の横に短い文章を並べたもの）のレイアウトに影響を与えるプロパティの集まりです。CSS Rubyの使用率は非常に低く、デスクトップでは8,157ページ、モバイルでは9,119ページと、分析した全ページの0.1％にも満たないことが分かりました。

CSSとJS

『CSS in JS」の話題は、少なくともTwitterでの炎上騒ぎの1つや2つにはもってこいですが、自然界での使用は非常に少ない状態が続いています。今年の調査では、ページの約3％が何らかの形でCSS-in-JSを使用していることがわかりましたが、これは2020年の2％から増加しています。さらに、そのほぼすべてがこの目的のために構築されたライブラリによるものであり、その半分以上がStyled Componentsライブラリによるものです。

Houdini

CSS Houdiniは、ある意味ではCSS-in-JSの逆を行くもので、作者がCSSに少しだけJSを混ぜることを可能にします。おそらく、仕様の中核部分の遅い実装（Blinkベースではないブラウザで）が原因で、Houdiniはその地位を確立するのに苦労しています。 We find that it’s effectively not used on the open web in 2021: only 1,030 desktop pages and 1,175 mobile pages show evidence of animated custom properties, a feature of Houdini. This is a threefold increase over the 2020 findings, but it looks like it will still be some time before Houdini finds an audience。

プロパティ	デスクトップ	モバイル
`font-variant`	3,098,211	3,641,216
`font-variant-numeric`	153,932	166,744
`font-variant-ligatures`	107,211	112,345
`font-variant-caps`	81,734	86,673
`font-variant-east-asian`	20,662	20,340
`font-variant-position`	5,198	5,842
`font-variant-alternates`	4,876	5,511

Sass

CSSプリプロセッサの大きな利点の1つは、CSS自体に欠けているものを明らかにできるため、将来的にCSSをどのように拡張していくべきかの指針となることです。これは以前にもあったことで、変数はプリプロセッサで非常に人気があったため、CSSは最終的にカスタムプロパティをそのレパートリーに加えました。色の変更やネストされたセレクターなど、プリプロセッサの他の機能も基本言語に組み込まれています。そこで本章では、現在ウェブ上でもっとも人気のあるプリプロセッサの1つであるSassを、開発者がどのように使っているかを紹介します。

使用されているSass関数は、比率に若干の変更はあるものの、2020年版Web Almanacで見つかったものとほぼ同じでした。タイプ別に分類すると、全Sass関数の28％が色を変更するもの（例：darken、mix）で、さらに6％が色成分を読み取るために使用されていることがわかりました（例：alpha、blue）。

条件付きで動作させたいという要望は、if()関数がSass関数全体の15％で3位になったことからもわかります。

この同じ欲求は、@ifのようなSassのフロー制御構造の使用でより明確に見ることができます。文字通り、すべてのSassスタイルシートの3分の2が @if を使用しており、半分以上が @for または @each（またはその両方）を使用しています。この人気の機能は、最近CSSに追加されました。対照的に、@while構造を使用しているのはわずか2％です。

Sassのもう1つの大きな魅力は、他のルールの中にルールを入れ子にできるので、繰り返しのセレクタパターンを書く必要がないことです。この機能は、ネイティブのCSSで開発中であり、その理由を我々の分析が示しています。すべてのSassスタイルシートの87％が、検出可能な形式のルールの入れ子を使用しています。特殊文字を必要としない暗黙的なネスティングは測定されませんでした。

結論

最後に、2021年版Web Almanacは、安定しつつも進化し続けるテクノロジーを物語っています。昨年のAlmanacと今年のAlmanacの間に大きな変化はほとんど見られず、明らかに成長しているプラクティスやウェブ機能もあれば、衰退し始めているものもありますが、全体的には継続性が非常に強く感じられました。

これはCSSが停滞しているということでしょうか？　そうではなくて、新しいレイアウト手法が増えたり、大きな新機能が開発されたりしていますが、その多くはプリプロセッサの領域で培われた手法に基づいています。私たちは、CSSが「解決済み」であるとか、「最善の方法がすでに確立されている」などとは考えていません。実務者が経験を積むことで、CSSという言語とCSSという実務の両方に変化が訪れるでしょう。その変化は、急激なものではなく徐々に、破壊的なものではなく着実なものになるかもしれませんが、これは成熟した技術に期待されることでもあります。

今後、CSSがどのように成長していくのか、楽しみにしています。