ナビゲーションをスキップ
部 I 章 1

CSS

序章

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

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

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

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

使用方法

図1.1. ページごとのスタイルシート転送サイズの分布

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.3. ページあたりのスタイルシート数の分布。

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

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

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

図1.5. ページごとのスタイルルールの総数の分布。

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

セレクターとカスケード

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

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

クラス名

図1.6. もっとも人気のあるクラス名。

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

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

ID

図1.7. もっとも人気のあるID名。

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

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

属性セレクター

図1.8. もっともポピュラーな属性セレクターです。

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

擬似的なクラスと要素

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

図1.9. もっともポピュラーな疑似クラスです。

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

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

図1.10. もっともポピュラーな接頭辞なしの疑似要素です。

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

!important

図1.11. !importantを使ったページルールの割合の分布。

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

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

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

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

長さ

図1.14. もっともポピュラーな長さの単位です。

ピクセルの長さをどう思うかは別として、ピクセルは圧倒的に人気のある長さ単位で、全ページの約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-alignpadding-inline-startでは、emがもっとも一般的な長さの単位です。

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

図1.16. もっともポピュラーなフォント、相対的な長さの単位です。

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

図1.17. ゼロ長の値に使用される単位(またはその欠如)。

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

計算方法

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

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

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

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

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

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

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

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

グローバルキーワード

図1.22. グローバルキーワードの値の使い方

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

カラー

図1.23. もっとも一般的なカラーバリューのフォーマットです。

さまざまな色の値の種類があるにもかかわらず、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%を占めています。おなじみのwhiteblackredは約12%で、currentColorは2020年と比べて0.5%の増加で5位となっています。

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

図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における画像のフォーマット

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

図1.26. CSSで読み込んだ外部画像のフォーマット分布。

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

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

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

CSS内の画像数

図1.27. CSSで読み込んだ外部画像数の分布。

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

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

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

CSSにおける画像の重さ

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

図1.29. CSSで読み込まれた外部画像の総重量(KB)の分布。

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

図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%でした。しかし、グラデーションが使用されているプロパティには変化が見られ、backgroundbackground-imageが圧倒的な人気を誇っていましたが、グラデーションの約62%がこのプロパティに割り当てられていました。

図1.33. グラデーション画像の値の中でももっともポピュラーなタイプです。

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

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

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

  • グラデーションのカラーストップ数の中央値は、4ストップの90パーセンタイルを除いて、わずか2ストップです。
  • ハードカラーストップ(2つのカラーストップを同じ位置に配置したグラデーション)は、グラデーション全体の半分強に存在している。
  • カラーストップ補間(別名「ミッドポイント」)は、すべてのグラデーションインスタンスの21%で使用されました。
もっとも多くのカラーストップを持つ線形グラデーションです。
図1.34. もっとも多くのカラーストップを持つ線形グラデーションです。

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

レイアウト

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

図1.35. もっとも一般的に宣言されているレイアウトタイプです。

分析したページの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強がこの条件を満たしていることがわかりました。分析が複雑であるため、多くのケースを見逃している可能性があります。しかし、デザイナーがグリッドスタイルのレイアウトに強い関心を持っていることは明らかであり、今後数年間でグリッドへの移行は進む可能性があります。

マルチカラム

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

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

ボックスのサイズ

図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%で使用されています。

図1.39. トランジション効果が与えられたもっとも人気のあるプロパティです。

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

図1.40. 遷移時間の分布

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

図1.41. トランジションディレイの分布

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

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

図1.42. 移行タイミング機能の採用

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

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

図1.43. もっともポピュラーなアニメーションの種類です。

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

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

レスポンシブデザイン

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

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

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

図1.44. メディアクエリとして使用されるもっとも一般的な機能です。

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

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

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

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

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

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

図1.45. もっともポピュラーなメディアクエリのブレークポイントです。

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

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

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

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

図1.46. メディアクエリで変更するのがもっともポピュラーなプロパティです。

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

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

クエリ機能

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

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

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

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

Custom properties

図1.48. カスタムプロパティ使用量の変化(2019-2021年)。

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

ネーミング

図1.49. もっともポピュラーなカスタムプロパティ名です。

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

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

使用方法

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

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

図1.51. カスタムプロパティ値の種類の分布

各カスタムプロパティには、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 は大きくなります。

図1.52. カスタムプロパティの深さの中央値の分布

意外かもしれませんが、カスタムプロパティの値の深さは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-startpadding-inline-endなどの「論理的」なプロパティや、text-alignなどのプロパティのstartendなどの値があります。これらのプロパティと値により、ボックスの機能を、上、右、下などの物理的な方向ではなく、テキストの流れの方向に関連付けることができます。

図1.53. 論理的なプロパティのプロパティタイプの分布

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

Ruby

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

CSSとJS

図1.54. CSS-in-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。

Meta

このセクションでは、宣言の繰り返しの頻度や、作者がCSSを書く際にどのようなミスをするかなど、CSSのより一般的な概念を見ていきます。

宣言の繰り返し

2020年版Web Almanacでは、「宣言の繰り返し」の量を分析しています。これは、同じプロパティや値を使用している宣言がいくつあるか、ページのスタイル内でユニークな宣言がいくつあるかを判断することで、スタイルシートの効率を大まかに見積もるための指標です。

2021年の数字が発表され、すべてのパーセンタイルで反復回数の中央値がわずかに低下していることがわかりました。

図1.55. ページごとの宣言文の繰り返しの分布。

この低下の度合いは、10%、50%、90%で2%のオーダーなので、これが統計的なノイズである可能性は十分にあります。これを判断する唯一の方法は、今後も分析を継続し、長期的なトレンドをグラフ化することです。

ショートハンドとロングハンド

CSSでは、非常に具体的なプロパティの集合体が、単一の宣言でより具体的なプロパティの値を設定できる単一の「umbrella」プロパティによってもカバーされている部分が多くあります。たとえば、fontは、font-familyfont-sizeline-heightfont-weightfont-stylefont-variantの値を包含します。umbrellaプロパティの font は、いわゆる「ショートハンド」プロパティで、作者がある種のショートハンドで多くのことを設定できるようにするものです。これに対応する具体的なプロパティ(たとえば、font-family)は、「ロングハンド」プロパティと呼ばれます。

ロングハンドの前にショートハンド

スタイルシートの中で、backgroundのような短縮形プロパティとbackground-sizeのような長音部プロパティが混在している場合は、長音部が短縮形の後に来るのが常にベストです。私たちは、どのロングハンドがもっとも一般的であるかを調べるために、著者がこのようにした例を調べました。

図1.56. 対応する短縮形プロパティの後に表示される、もっとも一般的なロングハンドプロパティです。

2020年と同様にbackground-sizeが選ばれましたが、昨年はモバイルで41%、今年は15%の割合でしか見られませんでした。

バックグラウンド

バックグラウンドロングハンドのプロパティが前節のチャートの上位にあったので、バックグラウンドショートハンドとロングハンドの使用に目を向けてみました。

図1.57. もっともよく使われるバックグラウンドのプロパティです。

むしろ、これらを設定していないページがあったことに小さな驚きを感じました。圧倒的に96%のページがbackgroundというショートハンドを使用していますが、これは1996年のCSS1に遡ります。同年代のロングハンドプロパティも同様で、85%以上のページで適用されていることがわかりました。

しかし、最近の background-size は急速に普及しており、82% のページで採用されていることから、作者にとっての有用性の高さがわかります。一方、background-originは、昨年の12%から今年はわずか5%にまで落ち込んでいます。

marginとpadding

図1.58. もっともよく使われるmarginとpaddingのプロパティです。

続いて、marginとpaddingのプロパティを見てみましょう。背景と同じように、これらのプロパティを設定しているページが多いことよりも、設定していないページがあることの方が驚きです。今年の関心事は、ロングハンドのmargin-leftがショートハンドのmarginを抑えて1位になったことです。

フォント

図1.59. よく使われるフォントのプロパティ

2020年と同様に、短縮形のfontは一般的なロングハンドのfont-weightと比較して、font-sizeがリードし、昨年のfont-weightから首位を奪いました。

ここでは、font-variantfont-stretchという2つの異なったストーリーがあります。font-variantは、CSS1の頃から存在していましたが、デザイナーにはあまり浸透しませんでした。おそらく、長い間、small-capsを設定できなかったからでしょう。現在では、それとダウンロード可能なフォントを使って多くのことができるようになりましたが、著者はこの能力を活用していないようです。その使用率は今年大きく低下し、2020年の43%から2021年には23%に低下しました。

font-variantをもう少し詳しく見てみましょう。モバイルページの23%で使用されていますが、現在省略されているロングハンドのプロパティはほとんど使用されていません。以下は、font-variantだけでなく、それに対応するロングハンドをそれぞれ使用しているページの実際の数です。

プロパティ デスクトップ モバイル
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
図1.60. font-variantプロパティを使用しているページ数です。

これは、著者がショートハンドのみを使用し、ロングハンドを無視しているということでしょうか。しかし、昨年から font-variant の使用が急減していることから、一般的なフレームワークやツールがデフォルトスタイルから font-variant を削除したのではないかと考えています。いずれにしても、広くサポートされている多くのフォント機能を、作者は見逃しているのかもしれません。

もうひとつの低得点プロパティであるfont-stretchは、フォントファミリーがワイドまたはナローフェースを利用できるか、そして作者がそれらを利用することを選択するか(または知っているか)に大きく依存しているため、そのシェアが5%(昨年の8%から減少)となったことはあまり驚きではありません。

Flexbox

図1.61. もっともよく使われるFlexbox関連のプロパティです。

Flexboxのロングハンドとショートハンドのプロパティの中には、激動の歴史を持つものもあります。たとえば、CSS Flexboxの仕様自体、作者が flex-growflex-shrinkflex-basis の使用を避け、代わりに flex ショートハンドを使用することを推奨しています。これにより、設定されていないプロパティが適切な値を持つようになります。残念ながら、実際にはこれはうまくいっていないようで、モバイルページでは flex-basisflex よりも多く使用されており、その差は10%以上にもなります。

この数字には、モバイルではflex-basisの使用率が2倍になる一方、デスクトップではあまり変化がないなど、昨年と比較して大きな変動があることに留意する必要があります。これは、モバイル開発で使用される共通のフレームワークが変更されたことによるものかもしれませんし、その他の要因によるものかもしれません。

Grid

図1.62. もっともよく使われるグリッド関連のプロパティです。

ここ数年の傾向として、グリッドのショートハンドプロパティ(grid-templategridなど)は、それらが包含するロングハンドプロパティよりもはるかに少ない頻度で使用されていることがわかっています。 実際には、両方とも0%という驚異的な数字で、ランキングでは隣り合っています。残りの略語はすべてこの2つに集約されており、grid-template-rowsgrid-columnなどのロングハンドのプロパティは広く使用されています。実際、注目すべき使用率の高いロングハンドプロパティはgrid-gapだけで、モバイルのグリッドページでは24%の使用率となっています。今後、より新しい、そして一般的なgapgrid-gapを追い越すかどうか、興味深いところです。

CSSの間違い

人は成功からだけでなく、失敗からも多くのことを学ぶことができます。私たちはこの機会に、よくある間違いだけでなく、正しいように見えて正しくないものを探しました。

回復不能なシンタックスエラー

今年の解析作業では、2020年と同様にReworkというCSSパーサーを使用しましたが、より心強い数字が得られました。デスクトップページのわずか0.94%、モバイルページの0.55%に回復不能なエラーが含まれていました。つまり、Reworkでスタイルシート全体を解析不可能なほどひどいエラーです。確かに、回復可能な小さなCSSエラーが発生したページの数は格段に多かったかもしれませんが、今年の回復不可能なエラーの数は、昨年に比べて大幅に減少しています。これは、シンタックスクリーンアップが突然発生したのではなく、Reworkが変更されたことを示していると考えられます。

存在しないプロパティ

図1.63. もっとも一般的な未知のプロパティです。

私たちがチェックしたいことのひとつに、構文的には有効だが、実際には存在しないプロパティを使用している宣言の存在があります。これは、ベンダー接頭辞付きのプロパティは数えませんが、不正なベンダー接頭辞付きのプロパティは含みます。実際、もっとも広く見られた存在しないプロパティはwebkit-transition(適切なベンダープレフィックスに必要な先頭の-がない)で、存在しないプロパティを含むすべてのページの14%に見られました。本質的に結びついていたのは font-smoothing で、これは -webkit-font-smoothing の接頭辞なしのバージョンで、実際には存在しませんし、すぐに存在する可能性もありません

ショートハンドの前にロングハンド

本章の前のセクションでは、どのロングハンドプロパティが対応するショートハンドプロパティの後に出てくる可能性が高いかを調べました(たとえば、backgroundの後にbackground-sizeが続くこともあります)。

図1.64. 対応するロングハンド・プロパティの後に(不適切に)表示されるもっとも一般的なショートハンド・プロパティです。

ロングハンドの後にショートハンドを置くという逆のことをするのは、気が滅入るほどよくある間違いで、背景のプロパティでよく起こります。ロングハンドの後に対応するショートハンドを置く場合、背景のロングハンドプロパティは、backgroundショートハンドプロパティの値で上書きされます。

Sass

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

図1.65. もっとも一般的に使用されるSassの関数呼び出しです。

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

図1.66. もっとも一般的に使用されるSassのフロー制御構造です。

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

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

図1.67. Sassでのルールネストの普及について。

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

結論

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

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

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

著者