2022年、注目しておきたいCSSの新機能のまとめ

2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。

ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。

2022年、注目しておきたいCSSの新機能のまとめ

Photo by Jr Korpa on Unsplash
CSS in 2022
by Bramus

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

2021年、CSSの状況は困難でした。CSS Working Groupは既存の機能を磨き、多くの新しい機能を規定するなど、膨大な量の仕事をこなしました。すでにいくつかのブラウザでは実験的な機能として実装されています。

ブラウザのベンダーは新機能のサポート以外にも、開発を容易にするためにブラウザの互換性に関する上位5つの問題点の解決に重点が置かれています。

2022年にブラウザに搭載されると予想されるCSSの機能を見てみましょう。

解説の前に

このリストは私の個人的な予測が含まれています。私は内部情報を持っているわけでも、水晶玉を持っているわけではありません。私が持っているのは、予測の基礎となるリソースです。CSS Working GroupのIssue Trackerを注意深く監視し、さまざまなベンダーのIssue Trackerをフォローすることで、このリストを作成するための十分な情報が得られます。

すべての予測に言えることですが、間違っている可能性もあります。しかし、最終的にはほとんど当たると確信しています 🙂

また、新しい機能についてはまったく新しいもの、あるいはまだブラウザのサポートが普及していないものだけを取り上げていることに注意してください。そのため、論理値、プロパティ、アスペクト比、スペースで区切られた機能的なカラー表記などの機能はこのリストに含まれていません。かなり新しいものでも、一般的に使われていないものでも、すでに適切なブラウザでサポートされています。

注目の新機能(クロスブラウザでサポート)

これらの機能は、2022年中にすべてのブラウザでサポートされると確信しています。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他の機能もそれに続く予定です。2022年に以下のCSS機能を1つでも習得していれば、その効果は絶大です。

1. コンテナクエリ

コンテナクエリ

コンテナクエリ(CSS Containment Module Level 3の一部)は、コンテナのサイズまたは外観に応じて要素のスタイルを設定することができます。サイズベースのコンテナクエリは@mediaクエリに似ていますが、ビューポートではなく親コンテナのサイズに対して評価される点が異なります。

コンテナベースのコンテナクエリでは、別のCSSプロパティの計算値に応じて条件付きでスタイルを適用します。

ブラウザの状況

関連リソース

2. カスケードレイヤー

カスケードレイヤー

CSSの新機能カスケードレイヤーを使用すると、同一生成元ルールに対するカスケード順序を適切に制御できます。@layerルールを使用してスタイルをレイヤー化すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化(階層化)できます。

カスケードレイヤーは、Chromium 99とFirefox 97でサポートされる予定です。Safari TP 133でもサポートされており、2022年の第1四半期にリリースされる予定です。

ブラウザの状況

関連リソース

3. カラー関数

カラー関数

CSS Color Module Level 5の仕様によると、カラーを扱う上でいくつかの利点があります。2つの新しい関数 color-mix(), color-contrast()が追加され、既存の関数に相対色構文が追加されます。

  • color-mix()関数は、特定の色空間で2つのカラーを混合できます。
  • color-contrast()関数は、特定のベースカラーと比較したときにコントラスト基準を満たす、あるいは超える最適なカラーをリストから選択できます。
  • 相対色構文により、あらゆるカラーを操作し、あらゆる形式に変換できます。

これらの機能は、CSSプリプロセッサによって通常提供される機能を追加します。WebKit/Safariでは既にサポートされています。

ブラウザの状況

関連リソース

4. 新しいビューポート単位

新しいビューポート単位

ビューポート単位を使用する場合、iOSのSafariでvh単位でうまく機能しないという、長年にわたる非常に厄介なバグがあります。コンテナを100vhにすると、要素の高さが少し高くなってしまいます。この原因は、スマホのSafariで100vhを計算する際にUIの一部を無視するからです。

CSS Working Groupはvh単位の仕様はそのままにして、CSS Values and Units Module Level 4でいくつかの新しいビューポート単位を導入しました。

  • svh/svw: スモールビューポートの高さ/幅の1%
  • lvh/lvw: ラージビューポートの高さ/幅の1%
  • dvh/dvw: ダイナミックビューポートの高さ/幅の1%

ほかにも、svi/svbのような論理バリアントも利用可能です。

ブラウザの状況

関連リソース

5. :has()擬似クラス

:has()擬似クラス

CSSの:has()擬似クラスは、Selectors Level 4の一つです。:has()に渡された追加のセレクタのいずれかが少なくとも一つの要素と一致する場合にのみ要素が一致するため、要素をより細かく選択できます。「親セレクタ」と呼ばれることもありますが、機能はそれだけではありません。

ブラウザの状況

関連リソース

6. overscroll-behavior

CSSのoverscroll-behaviorプロパティを使用すると、コンテナをオーバースクロールする際のデフォルトのビヘイビアを上書きできます。たとえば、プルからリフレッシュへのジェスチャが実行されたときに完全にリロードされないようにしたり、ラバーバンドを無効にしたり、スクロールを1つのレイヤー内に収めることができます。

See the Pen
overscroll-behavior: contain
by Aaron Iker (@aaroniker)
on CodePen.

overscroll-behaviorプロパティはすでに、Firefox 36, Chromium 63でサポートされており、Safariもようやく追いつきました。

ブラウザの状況

関連リソース

7. CSS Gridのsubgrid

CSS Gridのsubgrid

CSS Gridで入れ子にする場合、入れ子になっているGridアイテムをメイングリッドに揃えるのは困難です。そこでsubgridの出番です。grid-template-columnsまたはgrid-template-rowssubgridに設定すると、親グリッドと一直線に整列します。

Firefoxですでにサポートされており、Chromiumは進行中です。

ブラウザの状況

関連リソース

8. accent-colorプロパティ

accent-colorプロパティ

accent-colorプロパティは、CSS Basic User Interface Module Level 4の一つです。仕様によると、accent-colorは1行のCSSで要素にカラーを適用し、要素にブランドカラーを簡単に適用する方法を提供することで、カスタマイズの手間を省きます。

すでにChromium 93, Firefox 92でサポートされています。

ブラウザの状況

関連リソース

9. メディアクエリで範囲を定義

メディアクエリで範囲を定義

Media Queries Level 4の新機能により、比較演算子を使用した構文Media Query Rangesで、これまでのメディアクエリを書き直すことができます。

Safariが積極的にこれを追求しているというシグナルは拾えませんでしたが、この件に関して私が間違っていると仮定しましょう。

ブラウザの状況

関連リソース

まだ先の新機能(実験的/シングルブラウザでサポート)

これらの機能は、ほとんどのブラウザでサポートされないか、あるいはフラグの背後でのみサポートされています。あなたが望むなら、それらに時間を費やすことができますが、2022年末までに完全なブラウザサポートになることはないでしょう。

1. スタイルの入れ子

2021年夏に公開されたCSS Nesting Moduleに、あるスタイルルールを別のスタイルルールの中に入れ子にする機能を導入するモジュールがあります。

これはCSSの画期的な機能なので、上記の注目の機能(クロスブラウザサポート)に入れたかったのですが、残念ながらChromium(とあと1つ)だけがサポートすると思われます。これについては私が間違っていることを祈ります。プリプロセッサ拡張機能はおそらく、2022年に積極的に使用する道を開くことができます。

ブラウザの状況

関連リソース

2. @scope

CSS Cascading and Inheritance Level 6はすでに始まっています。DOMツリーの一部にスタイルをスコープする方法「Scoping in the Cascade」が導入されています。

また、スコープリミット(下限値)を定義することもできます。

現在、この機能を掘り下げるには時期尚早です。 Chromiumが2022年の終わりまでに実験することを期待しています。

3. @when / @else

@when / @else

2021年末(12/21)に草案が公開された仕様は、CSS Conditional Rules Module Level 5です。

仕様によると、CSS Conditional 4の機能を包含・拡張し、一般化した条件ルール@whenと連鎖した条件ルール@elseを追加し、さらに@supportsルールで使われているsupportsクエリ構文にフォント処理クエリが導入されます。

これも素晴らしい機能追加です。
しかし、どのベンダーからもシグナルがないので、2022年末までにすべてのブラウザがこの機能を搭載することはないと思われます。

ブラウザの状況

関連リソース

停滞している新機能

残念ながら、次の機能は2022年に動きはそれほどないでしょう。機能自体は便利ですが、実際に使用するにはブラウザのサポートが必要です。

1. スクロール連動アニメーション

Scroll-linked Animationsの仕様にある@scroll-timelineアットルールおよびanimation-timelineプロパティのおかげで、CSSアニメーションをスクロールコンテナのスクロールオフセットにリンクさせることができます。コンテナを上下にスクロールすると、リンクされたアニメーションがそれに応じて動作します。

スクロール連動アニメーションは現在 Chromiumでのみフラグとしてサポートされています。Gecko/Firefox ではすでに構文解析のサポートが追加されていますが、実装はまだされていません。私はこの機能の大ファンで、いくつかの記事を書いてきましたが、構文が議論中であるため、開発が停滞するのではないかと心配しています。

ブラウザの状況

関連リソース

2. @property

@property

CSS Properties and Values APIは、CSS Houdiniに含まれるものです。このAPIが提供する@propertyを使用すると、CSSカスタムプロパティを登録し、特定のタイプ(構文)、初期値を与え、その継承性を制御することができます。

Houdini、特にProperties and Values APIの部分がすべてのブラウザで利用できるようになることを心から望んでいますが、残念ながら動きがありません。WebKitとGeckoのバグは過去数ヵ月(数年!)まったく動きがありません😭

ブラウザの状況

関連リソース

Safariは「新しいIE6」なのか

Safariは去年から散々な言われようで、「新しいIE6」と呼ばれることがよくあります。私自身、以前からそう言ってきましたが、もはや心からそう思います。

Safariチームはそのことについて粉砕し、積極的に取り組んでいるように見えます(Color Functions, :has(), カスケードレイヤーなど)。その上、彼らはチームのメンバーを活発に雇用しています。2022年にSafariが「追いついた」としても、私はそれほど驚かないでしょう。

しかし、それでもiOSにおけるWebKitの独占には何の変化もないので、私は好きではありません。Safariの人たちもそうだとは思います。これは彼らの頭上でなされた決定だとしか思えません。

終わりに

2022年にCSSに登場する可能性が高いものをリスト化しました。あなたが特に楽しみにしているのはどの機能ですか? また、CSSの機能で見逃しているものはありますか? @bramusにお知らせください 🙂

sponsors

top of page

©2022 coliss