ベースライン 2023 年

Rachel Andrew

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

ベースラインの新しい定義では、機能のライフサイクルには 2 つのステージがあります。新たに利用可能になったときと、30 か月後に一般提供になったときです。機能は、以下のブラウザで相互運用可能になると、ベースラインに新たに組み込まれます。

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

ベースラインは使用可能

機能の可用性を明確にする次のステップとして、ベースラインは本日から使用可能になります。[Can I Use] のページにアクセスすると、その機能が Baseline で広く利用できるかどうかを示すバッジが表示されます。

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

新たに利用可能になったベースラインの機能には、利用可能になった年とともにバッジが表示されます。今年設定されたコアブラウザ全体で相互運用可能なものはすべて、Baseline 2023 に含まれます。

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

この投稿の残りの部分では、2023 年にこのマイルストーンを達成した機能をご紹介します。これらの機能はすべて ベースライン 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() はベースライン 2023 に含まれています。

対応ブラウザ

  • 111
  • 111
  • 108
  • 15.4

ソース

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

CSS の三角関数で、これらの関数の使用方法と使用例をご確認ください。

inert 属性

DOM 要素を inert としてマークすると、要素から動きやインタラクションが削除されます。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() セレクタ

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

対応ブラウザ

  • 105
  • 105
  • 121
  • 15.4

ソース

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

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

今年ベースラインに追加されたその他の機能は次のとおりです。

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