ベースライン 2023 年

レイチェル・アンドリュー

caniuse.com にベースラインが登場します。この投稿では、このインテグレーションの概要と、2023 年に Baseline に追加されたいくつかの機能について説明します。

ベースラインの新しい定義では、機能のライフサイクルには 2 つのステージがあります。1 つ目は、リリースが開始されてから、30 か月後に一般公開された時点です。機能は、以下のブラウザで相互運用可能になると、新たにベースラインに組み込まれます。

  • Safari（macOS と iOS）
  • Firefox（パソコンと Android）
  • Chrome（パソコン、Android）
  • Edge（デスクトップ）

ベースラインは使用可能

機能の可用性を明確にするための次のステップとして、ベースラインは本日より [Can I Use] の項目に着目し始めます。[使用可能] のページにアクセスすると、その機能がベースラインで利用できるようになったことを示すバッジが表示されます。

CSS グリッド レイアウトで広く利用可能なバッジと併用できるかのスクリーンショット。

Baseline で新たに利用可能になった機能には、利用可能になった年とともにバッジが表示されます。そのため、今年リリースされた主要ブラウザ全体で相互運用可能なものはすべて、Baseline 2023 に含まれます。

[コンテナクエリ] に新たに追加されたバッジを示す [使用可能] のスクリーンショット。

本投稿の残りの部分では、2023 年にこのマイルストーンを達成した機能をご紹介します。これらの機能はすべて、新たに利用可能になった Baseline 2023 です。

コンテナクエリとコンテナクエリ単位のサイズを設定する

サイズ コンテナクエリを使用すると、メディアクエリでビューポートのサイズをクエリできるのとほぼ同じ方法で、要素のサイズをクエリできます。配置された領域のサイズに反応するコンポーネントを作成できるため、再利用可能なコンポーネントの作成がはるかに容易になります。

対応ブラウザ

  • 105
  • 105
  • 110
  • 16

ソース

次のカードのデザインは、コンポーネントの幅に応じて変わります。詳しくは、コンテナクエリが安定版のブラウザに渡されるをご覧ください。

新しい色空間と関数

CSS で、sRGB 色域外の色にアクセスできる色空間がサポートされるようになりました。つまり、HD 色域の色を使用した HD（高解像度）ディスプレイをサポートできます。

新しいカラーモデル

ベースラインでは、色関数 lch()、lab()、oklch()、oklab() を使用して、LCH、Lab、OKLCH、OKLab のカラーモデルにアクセスできます。

対応ブラウザ

  • 111
  • 111
  • 113
  • 15

ソース

ピンクから青への鮮やかなグラデーションを適用した grade.style エディタのスクリーンショット。
gradient.styleを使用して新しい色空間を試してみましょう。

color-mix() 関数

さらに、新しいカラー関数が Baseline の一部になりました。color-mix() 関数を使用すると、任意の色空間で、ある色を別の色に混在させることができます。次の CSS では、sRGB 色空間で青の 25% が白色に混ざり合っています。

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

対応ブラウザ

  • 111
  • 111
  • 113
  • 15

ソース

color-mix() についての詳細

color() 関数

color() 関数は、R、G、B チャネルで色を指定する任意の色空間に使用できます。color() は、最初に色空間パラメータを受け取り、次に RGB の一連のチャンネル値と、必要に応じてアルファを受け取ります。srgb、srgb-linear、display-p3、a98-rgb、prophoto-rgb、rec2020、xyz、xyz-d50、xyz-d65 のいずれかを使用できます。次に例を示します。

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

CSS の高精細カラーガイドには、新しい色空間と関数の例が多く、それぞれをどのような場合に使用するかに関する情報が記載されています。

圧縮ストリーム

Compression Streams API は、データ ストリームを圧縮および解凍するための JavaScript API です。この組み込みの圧縮を使用することで、アプリケーションに圧縮ライブラリを含める必要がなくなりました。

対応ブラウザ

  • 80
  • 80
  • 113
  • 16.4

ソース

詳しくは、すべてのブラウザで圧縮ストリームがサポートされるようになりましたをご覧ください。

画面外キャンバス

OffscreenCanvas を使用する前は、キャンバスの描画機能は <canvas> 要素に関連付けられていました。つまり、DOM に直接依存していました。OffscreenCanvas は、その名が示すように、DOM と Canvas API が画面外に移動することで分離されます。

この分離により、OffscreenCanvas のレンダリングは DOM から完全に分離され、両者の同期が存在しないため、通常のキャンバスよりも速度が上がります。さらに、利用できる DOM がない場合でも、レンダリング処理を Web Worker に移行できるため、メインスレッドが解放され、アプリケーションの応答性が向上します。

対応ブラウザ

  • 69
  • 79
  • 105
  • 16.4

ソース

詳しくは、OffscreenCanvas - ウェブワーカーでキャンバスのオペレーションを高速化するをご覧ください。

モジュールのプリロード

モジュールをプリロードすると、ダウンロードと処理の時間を短縮できます。JavaScript モジュールを参照するリンク要素に rel="modulepreload" を追加します。ブラウザはモジュールを取得し、解析してコンパイルし、実行可能なモジュール マップに結果を格納します。

対応ブラウザ

  • 66
  • 79 以下
  • 115
  • 17

ソース

詳しくは、モジュールのプリロードをご覧ください。

CSS の三角関数

2023 年には、CSS 値と単位レベル 4 の仕様の三角関数が相互運用できるようになりました。つまり、関数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() は Baseline 2023 に含まれています。

対応ブラウザ

  • 111
  • 111
  • 108
  • 15.4

ソース

このデモでは、三角関数を使用して、中心点を中心とした円形の経路上のアイテムを移動します。

CSS の三角関数では、これらの関数の使用方法と使用例をご紹介しています。

inert 属性

不活性とは、動く能力に欠けることを意味します。不活性なものをマークすると、その DOM 要素から動きや相互作用が失われます。inert 属性を使用すると、ブラウザはその要素を無視します。

  • ユーザーが要素をクリックしても、click イベントは呼び出されません。
  • 要素はフォーカスされません。
  • 要素とそのコンテンツがユーザー補助ツリーから除外されている。

対応ブラウザ

  • 102
  • 102
  • 112
  • 15.5

ソース

この属性は、画面外にある要素や非表示の要素に追加する必要があります。詳しくは、inert 属性をご覧ください。

CSS グリッド レイアウトのサブグリッド

grid-template-columns と grid-template-rows に subgrid 値を指定すると、親グリッドで定義されたトラックを、ネストされたグリッドで使用できます。つまり、これらのネストされたグリッド内の要素を互いに整列させることができます。

対応ブラウザ

  • 117
  • 117
  • 71
  • 16

ソース

記事「CSS サブグリッド」には、サブグリッドのユースケースに焦点を当てた例と、他の多くの投稿へのリンクと例が含まれています。

NumberFormat V3

Intl.NumberFormat V3 は、2023 年に Baseline の一部となった Intl.NumberFormat の新機能のセットです。追加機能は次のとおりです。

  • 数値の範囲を書式設定する 3 つの関数（formatRange、formatRangeToParts、selectRange）を新たに追加しました。
  • グループ化の列挙型
  • 丸めと精度の新しいオプション
  • 丸め処理の優先度
  • 文字列を小数として解釈する
  • 丸めモード
  • 負の符号表示

対応ブラウザ

  • 106
  • 106
  • 116
  • 15.4

ソース

それぞれの新機能については、NumberFormat V3 の提案で詳しく説明しています。

Fullscreen API

Fullscreen API を使用すると、requestFullscreen() メソッドを呼び出して、<video> などの要素を全画面モードにできます。また、要素が全画面モードかどうかや、ドキュメントが全画面モードをリクエストできる状態かどうかを検出するメソッドも用意されています。

対応ブラウザ

  • 71
  • 79
  • 64
  • 16.4

ソース

詳しくは、MDN の Fullscreen API ガイドをご覧ください。

CSS :has() セレクタ

Baseline 2023 を作成するだけの :has() セレクタは、12 月 19 日に Firefox 121 でリリースされます。なかでも、このセレクタは「親セレクタ」として機能し、内部にある要素に基づいて要素を選択できるという点で特に便利です。たとえば、要素内に画像があるかどうかに応じて、異なる CSS を適用できます。

対応ブラウザ

  • 105
  • 105
  • 121
  • 15.4

ソース

詳しくは、:has(): ファミリー セレクタをご覧ください。

今年ベースラインに追加された機能

この投稿では、今年ベースラインに組み込まれた主な機能の一部をご紹介しましたが、その他にも多くの機能があります。

これらの機能の多くは、Interop 2023 での共同作業を通じて相互運用性を実現しました。このプロセスを経て、新しい機能がリリースされ、新たに利用可能になったことが Baseline に導入されるのを見るのは、非常に楽しみです。これにより、プロジェクトに機能を導入するタイミングをより明確に判断できます。