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

Post on:2022年1月13日

はじめに

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プロパティの計算値に応じて条件付きでスタイルを適用します。

main, aside {
  container: inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

main, aside {

container: inline-size;

}

.media-object {

display: grid;

grid-template: 'img' auto 'content' auto / 100%;

}

@container (inline-size > 45em) {

.media-object {

grid-template: 'img content' auto / auto 1fr;

}

ブラウザの状況

link/Chromium: Issue #1145970
Gecko/Firefox: Issue #1744221
WebKit/Safari: Issue #229659

関連リソース

2. カスケードレイヤー

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

@import(reset.css) layer(reset); /* 1st layer */

@layer base { /* 2nd layer */
  form input {
    font-size: inherit; 
  }
}

@layer theme { /* 3rd layer */
  input {
    font-size: 2rem;
  }
}

@import(reset.css) layer(reset); /* 1st layer */

@layer base { /* 2nd layer */

form input {

font-size: inherit;

}

@layer theme { /* 3rd layer */

input {

font-size: 2rem;

}

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

ブラウザの状況

Chromium: Issue #1095765
Firefox: Issue #1699215
Safari: Issue #220779

関連リソース

3. カラー関数

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

color-mix()関数は、特定の色空間で2つのカラーを混合できます。

CSS

.text-primary-dark { color: color-mix(var(--theme-primary), black 10%); } .text-primary-darker { color: color-mix(var(--theme-primary), black 20%); }

1
2
3
4
5
6

.text-primary-dark {
color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
color: color-mix(var(--theme-primary), black 20%);
}

color-contrast()関数は、特定のベースカラーと比較したときにコントラスト基準を満たす、あるいは超える最適なカラーをリストから選択できます。

/* tan, sienna, #d2691e を比較*/
/* siennaはtanに対して4.273のコンストストを持ち、AA-largeのしきい値を超えているため選択されます */
color-contrast(wheat vs tan, sienna, #d2691e to AA-large)

/* tan, sienna, #d2691e を比較*/

/* siennaはtanに対して4.273のコンストストを持ち、AA-largeのしきい値を超えているため選択されます */

color-contrast(wheat vs tan, sienna, #d2691e to AA-large)

相対色構文により、あらゆるカラーを操作し、あらゆる形式に変換できます。

:root {
  --color: #ff0000;
}

.selector {
  /* 透明度を変更 */
  color: hsl(from var(--color) h s l / .5);
  
  /* 色相を変更 */
  color: hsl(from var(--color) calc(h + 180deg) s l);
  
  /* 彩度を変更 */
  color: hsl(from var(--color) h calc(s + 5%) l);
}

:root {

--color: #ff0000;

}

.selector {

/* 透明度を変更 */

color: hsl(from var(--color) h s l / .5);

/* 色相を変更 */

color: hsl(from var(--color) calc(h + 180deg) s l);

/* 彩度を変更 */

color: hsl(from var(--color) h calc(s + 5%) l);

}

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

ブラウザの状況

Chromium: Issues #1152772, #1092638, #1274133
Firefox: Issue #1679227
Safari: Issues #222530, #222258, #221880

関連リソース

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のような論理バリアントも利用可能です。

ブラウザの状況

Blink/Chromium: Issue #1093055
Gecko/Firefox: Issue #1610815
WebKit/Safari: Issue #219287

関連リソース

5. :has()擬似クラス

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

/* <img>の子要素を含む<a>要素に一致 */
a:has(img) { … }

/* <img>の直接の子要素を含む<a>要素に一致 */
a:has(> img) { … }

/* 見出し要素を含まない<section:not>要素に一致 */
section:not(:has(h1, h2, h3, h4, h5, h6))

/* <h1>要素の直後に<p>要素がある場合のみ一致 */
h1:has(+ p) { … }

/* <img>の子要素を含む<a>要素に一致 */

a:has(img) { … }

/* <img>の直接の子要素を含む<a>要素に一致 */

a:has(> img) { … }

/* 見出し要素を含まない<section:not>要素に一致 */

section:not(:has(h1, h2, h3, h4, h5, h6))

/* <h1>要素の直後に<p>要素がある場合のみ一致 */

h1:has(+ p) { … }

ブラウザの状況

Blink/Chromium: Issue #669058
Gecko/Firefox: Issue #418039
WebKit/Safari: Issue #227702

関連リソース

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もようやく追いつきました。

ブラウザの状況

WebKit/Safari: Issue #176454

関連リソース

7. CSS Gridのsubgrid

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

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

.grid {

display: grid;

grid-template-columns: repeat(9, 1fr);

grid-template-rows: repeat(4, minmax(100px, auto));

}

.item {

display: grid;

grid-column: 2 / 7;

grid-row: 2 / 4;

grid-template-columns: subgrid;

grid-template-rows: subgrid;

}

.subitem {

grid-column: 3 / 6;

grid-row: 1 / 3;

}

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

ブラウザの状況

Blink/Chromium: Issue #618969
WebKit/Safari: Issue #202115

関連リソース

8. accent-colorプロパティ

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

form {
  accent-color: hotpink;
}

form {

accent-color: hotpink;

}

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

ブラウザの状況

Safari: Issue #227587

関連リソース

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

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

/* 古い方法 */
@media (max-width: 750px) {
	…
}
/* 新しい方法 */
@media (width <= 750px) {
	…
}

/* 古い方法 */

@media (max-width: 750px) {

…

}

/* 新しい方法 */

@media (width <= 750px) {

…

}

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

ブラウザの状況

Safari: Issue #180234

関連リソース

Media Queries Level 4: Media Query Range Contexts (Media Query Ranges)

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

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

1. スタイルの入れ子

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

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }
  & th {
    text-align: center;
    background: black;
    color: white;
  }
  @nest footer & {
    font-size: 0.8em;
  }
}

table.colortable {

& td {

text-align: center;

&.c { text-transform: uppercase }

&:first-child, &:first-child + td { border: 1px solid black }

}

& th {

text-align: center;

background: black;

color: white;

}

@nest footer & {

font-size: 0.8em;

}

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

ブラウザの状況

Blink/Chromium: Issue #1095675
Gecko/Firefox: Issue #1648037
WebKit/Safari: Issue #223497

関連リソース

The future of CSS: Nesting Selectors

2. @scope

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

<div class="dark-theme">
  <a href="#">plum</a>
  <div class="light-theme">
    <a href="#">also plum???</a>
  </div>
</div>

</div>

/* .light-themeと.dark-themeが入れ子になっている場合、期待した結果が得られない場合があります */
.light-theme a { color: purple; }
.dark-theme a { color: plum; }

/* スコープを設定することで、a要素は最も近いスコープによってスタイル付けされるため、これを修正することができます。 */
@scope (.light-scheme) {
  a { color: darkmagenta; }
}
@scope (.dark-scheme) {
  a { color: plum; }
}

/* .light-themeと.dark-themeが入れ子になっている場合、期待した結果が得られない場合があります */

.light-theme a { color: purple; }

.dark-theme a { color: plum; }

/* スコープを設定することで、a要素は最も近いスコープによってスタイル付けされるため、これを修正することができます。 */

@scope (.light-scheme) {

a { color: darkmagenta; }

}

@scope (.dark-scheme) {

a { color: plum; }

}

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

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

3. @when / @else

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

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

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
  /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
  /* B */
} @else {
  /* C */
}

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {

/* A */

} @else supports(caret-color: pink) and supports(background: double-rainbow()) {

/* B */

} @else {

/* C */

}

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

ブラウザの状況

Blink/Chromium: Issue #1282896
Gecko/Firefox: Issue #1747727
WebKit/Safari: Issue #234701

関連リソース

Proposal for CSS @when

停滞している新機能

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

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

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

/* (1) キーフレームを定義 */
@keyframes adjust-progressbar {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* (2) ScrollTimelineを定義 */
@scroll-timeline scroll-in-document {
  source: auto;
  orientation: block;
  scroll-offsets: 0, 100%;
}

/* (3) アニメーションのアタッチメント＋ScrollTimelineをアニメーションのドライバとして定義 */
#progressbar {
    animation: 1s linear forwards adjust-progressbar;
    animation-timeline: scroll-in-document;
}

/* (1) キーフレームを定義 */

@keyframes adjust-progressbar {

from {

transform: scaleX(0);

}

to {

transform: scaleX(1);

}

/* (2) ScrollTimelineを定義 */

@scroll-timeline scroll-in-document {

source: auto;

orientation: block;

scroll-offsets: 0, 100%;

}

/* (3) アニメーションのアタッチメント＋ScrollTimelineをアニメーションのドライバとして定義 */

#progressbar {

animation: 1s linear forwards adjust-progressbar;

animation-timeline: scroll-in-document;

}

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

ブラウザの状況

Blink/Chromium: Issue #1023424
Gecko/Firefox: Issue #1676780
WebKit/Safari: Issue #222295

関連リソース

2. @property

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

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {

syntax: '<color>';

inherits: false;

initial-value: #c0ffee;

}

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

ブラウザの状況

Gecko/Firefox: Issue #1273706
WebKit/Safari: Issue #189692

関連リソース

@property: giving superpowers to CSS variables

Safariは「新しいIE6」なのか

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

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

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

終わりに

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

🔥 CSS Features to start learning, as I expect them to ship in all browsers in 2022:

1. Container Queries
2. Cascade Layers
3. Color Functions
4. Viewport Units
5. :has()
6. Overscroll Behaviour
7. Subgrid
8. Accent Color
9. Media Query Ranges

— Bramus (@bramus) December 27, 2021

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

はじめに

解説の前に

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

1. コンテナクエリ

2. カスケードレイヤー

3. カラー関数

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

5. :has()擬似クラス

6. overscroll-behavior

7. CSS Gridのsubgrid

8. accent-colorプロパティ

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

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

1. スタイルの入れ子

2. @scope

3. @when / @else

停滞している新機能

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

2. @property

Safariは「新しいIE6」なのか

終わりに

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

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

はじめに

解説の前に

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

1. コンテナクエリ

2. カスケードレイヤー

3. カラー関数

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

5. :has()擬似クラス

6. overscroll-behavior

7. CSS Gridのsubgrid

8. accent-colorプロパティ

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

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

1. スタイルの入れ子

2. @scope

3. @when / @else

停滞している新機能

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

2. @property

Safariは「新しいIE6」なのか

終わりに

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info