State of CSS 2022: これからのCSS新機能について

概要

Google IOでCSSのこれからの新機能について発表されました。いくつか紹介してみます。 https://web.dev/state-of-css-2022/

2022 Browser compatibility

機能についての話す前に、まずはInterop 2022というブラウザーベンチマークについてです。 https://web.dev/interop-2022/

WebブラウザメーカーでもあるApple、Google、Microsoft、Mozilla、ソフトウェアコンサルタント企業BocoupおよびIgaliaが集まって互換性問題を解決を目指す会があり、ブラウザ側のサポート状況を評価する指標として作ったものがInterop2022です。

ちなみに、その前の2021年の取り組みであるCompat2021はGoogle、Microsoft、Mozillaが参加しましたが、appleは参加してませんでした。

Interop2022のダッシューボードも公開しています。ダッシュボードについて詳細内容はこちらで確認できます。

State of CSS 2022

今回の発表では、Fresh in 2022(2022まで対応すると約束されているもの)と2022 and beyond(今後開発される機能) という大きく二つの項目で分かれています。

また、各機能ごとにブラウザのサポート状況も書いてあります。

Fresh in 2022

Cascade Layout

CSSでスタイルを上書きさせるために、やむを得ずimportant使う場合があります。ですが、importantはperformance面でも、保守性の面でも良くないため、なるべく避けなければなりません。

layerを利用すると、スタイリングの優先順位を決めることが可能です。一番上にlayerを記入してで優先順位を決めて、各layerごとstyleingをします。高い順位のlayerが適応される仕組みです。

@layer base, special;

@layer special {
    .item {
        color: rebeccapurple;
    }
}

@layer base {
    .item {
        color: green;
        border: 5px solid green;
        font-size: 1.3em;
        padding: .5em;
    }
}

ブラウザの開発者モードで見れる例です。

https://web.dev/state-of-css-2022/#cascade-layers

Container queries

今までのレスポンスデザインは画面のサイズ(viewport)に合わせることしかできませんでした。

Container queriesを使うと、画面のサイズではなく、親要素に合わせてレスポンスデザインが可能になります。最近はcomponent別に分離して開発するため、便利そうです。

https://web.dev/state-of-css-2022/#container-queries

accent-color

checkbox, radio buttonみたいなhtml要素はデフォルトデザインがあります。このデザインを変えるにはかなりのCSSを書かないといけません。

accent-colorを使うと基本色を一行で簡単に色を変えることができます。サービスのブランド色に簡単に変えられたりするのでとても良さそうです。現在は、checkbox, radio, range, progressのだけ可能です。

/* tint everything */
:root {
    accent-color: hotpink;
}

/* tint one element */
progress {
    accent-color: indigo;
}

https://web.dev/state-of-css-2022/#accent-color

color-contrast

背景比べてみやすい色を選んでくれるものです。黒、白文字どっちにするかを選ぶ他にも、明暗比を計算計算して文字が見えやすい色を選ぶことも可能です。

例えばこのソースコードでcolor(文字色)は変数として受け取っている--_swatch-bgによって、 black or whiteで決まります。

.swatch {
    background: var(--_swatch-bg);
    display: grid;
    place-content: center;
    color: color-contrast(var(--_swatch-bg) vs black, white);
/ / < - ここ！
}

上記のソースコードはこちらで確認できます。safariで開発モードでcolor-contrastを有効にする必要はありますが、このサイトでも試すことができます。（有効にする方法もサイトに書いてまります。） https://css-tricks.com/exploring-color-contrast-for-the-first-time/

https://web.dev/state-of-css-2022/#color-contrast()

has()

今までは親要素の子要素だけスタイリングができたが、 has()を使うと、英語の意味の通りにこの子要素を持っている親要素にスタイリングをすることができます。例えばこのようにimgをラッピングしているanchorタグにスタイリングが可能です。

a:has(> img) {
. . .
}

https://web.dev/state-of-css-2022/#:has()

2022 and beyond

2022度、また今後対応して行きたい機能のことです。

@scope

BEMの書き方でスタイリングが適応される範囲を確認しやすくしてきましたが、scopeではそのような命名規則は不要になります。

既存の書き方

.card__header {
    color: var(--text);
}

scopeの書き方

@scope (
    .card
) {
    header {
        color: var(--text);
    }
}

またこのように範囲を指定することもできます。

@scope (
    .media-block
)
    to
(
    .content
) {
    img {
        border-radius: 50%;
    }

    .content {
        padding: 1em;
    }
}

https://web.dev/state-of-css-2022/#scoping-styles-is-really-hard

@nest

やっと出るのかな感はありますが、SASSの書き方のように、ネストを利用することができます。対応はまだまだ先のようですが、これができるようになるとpreprocessorが不要になるかも知れまんせね。

既存の書き方

article {
    color: darkgray;
}

article > a {
    color: var(--link-color);
}

nestの書き方

article {
    color: darkgray;

&
> a {
    color: var(--link-color);
}

}

https://web.dev/state-of-css-2022/#nesting-selectors-is-so-nice

まとめ

全部は載せませんでしたが、いくつか内容について書いてみました。内容はドキュメントだけではなくyoutube(英語)でも確認できます。 https://youtu.be/Xy9ZXRRgpLk

CSSが段々便利になり、またブラウザ側も積極的に対応していくらしく、とてもいい流れかなと思いました。早く互換性を気にせずに使えるようになって欲しいです。