ベースライン 2023 年

ベースラインが caniuse.com に登場します。この記事では、統合について説明し、2023 年にベースラインの一部となった機能の一部を紹介します。

ベースラインの新しい定義では、機能のライフサイクルには 2 つのステージがあります。新しく利用可能になったときと、30 か月後に幅広く利用可能になったときです。機能が次のブラウザで相互運用可能になると、Baseline の一部として新たに利用可能になります。

  • Safari(macOS と iOS)
  • Firefox(パソコンと Android)
  • Chrome(パソコン、Android)
  • Edge(パソコン)

機能の提供状況を明確にする次のステップとして、本日より、Can I Use にベースラインが表示されるようになります。Can I Use の一部ページにアクセスすると、ベースラインで機能が広く利用可能かどうかを示すバッジが表示されます。

CSS グリッド レイアウトの「Can I Use」のスクリーンショット(広く利用可能なバッジ付き)。

ベースラインで新たに利用可能になった機能には、利用可能になった年とともにバッジも表示されます。今年のコア ブラウザセット間で相互運用可能になったものはすべて、ベースライン 2023 の一部です。

コンテナクエリで新しく利用可能になった「Can I Use」バッジのスクリーンショット。

以降では、2023 年にこのマイルストーンを達成する機能について説明します。これらの機能はすべて、新たに利用可能になった ベースライン 2023 です。

コンテナクエリとコンテナクエリ単位のサイズ

サイズのコンテナクエリを使用すると、メディアクエリでビューポートのサイズをクエリするのと同じように、要素のサイズをクエリできます。配置される領域のサイズに応答するコンポーネントを作成できるため、再利用可能なコンポーネントを簡単に作成できます。

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

新しいカラースペースと関数

CSS で、sRGB 色域外の色にアクセスできる色空間がサポートされるようになりました。つまり、HD ガマット内の色を使用して HD(高精細)ディスプレイをサポートできます。

新しいカラーモデル

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

ピンクから青への鮮やかなグラデーションが表示された gradient.style エディタのスクリーンショット。
gradient.style を使用して、新しいカラースペースを試す。

color-mix() 関数

また、新しいカラー関数がベースラインに追加されました。color-mix() 関数を使用すると、任意の色空間で 1 つの色を別の色に混ぜることができます。次の CSS では、srgb カラー空間で青色の 25% が白色に混合されています。

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

詳細: color-mix()

color() 関数

color() 関数は、R、G、B チャネルで色を指定する任意の色空間で使用できます。color() は、まずカラースペース パラメータを受け取り、次に RGB の一連のチャンネル値を受け取り、必要に応じてアルファ値を受け取ります。srgbsrgb-lineardisplay-p3a98-rgbprophoto-rgbrec2020xyzxyz-d50xyz-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 です。この組み込み圧縮を使用するアプリでは、圧縮ライブラリを含める必要がなくなりました。

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

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

画面外キャンバス

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

この分離により、OffscreenCanvas のレンダリングは DOM から完全に分離されるため、2 つの間に同期がないため、通常のキャンバスよりも速度が向上します。また、DOM が使用できない場合でも、レンダリング作業を Web Worker に移動して、メインスレッドを解放し、アプリケーションの応答性を高めることもできます。

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

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

モジュールのプリロード

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

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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

CSS の三角関数

2023 年、CSS 値と単位のレベル 4 仕様の三角関数は相互運用可能になりました。つまり、関数 sin()cos()tan()asin()acos()atan()atan2() はベースライン 2023 の一部です。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

このデモでは、三角関数を使用して、中心点を回る円形のパス上にアイテムを移動します。

これらの関数の使用方法とユースケースについては、CSS の三角関数をご覧ください。

inert 属性

DOM 要素に inert としてマークを付けると、その要素の移動や操作が削除されます。inert 属性を使用すると、ブラウザは要素を無視します。

  • ユーザーが要素をクリックしても、click イベントは発生しません。
  • 要素にフォーカスが当たらなくなる。
  • 要素とそのコンテンツはユーザー補助ツリーから除外されます。

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

この属性は、画面外にある要素や、他の方法で非表示になっている要素に追加します。詳細については、inert 属性をご覧ください。

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

grid-template-columnsgrid-template-rowssubgrid 値を使用すると、親グリッドで定義されたトラックをネストされたグリッドで使用できます。つまり、ネストされた個別のグリッド内の要素を互いに配置できます。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

CSS サブグリッドでは、サブグリッドのユースケースを示す例と、他の多くの投稿や例へのリンクを確認できます。

NumberFormat V3

Intl.NumberFormat V3 は、Intl.NumberFormat の新機能のセットです。2023 年にベースラインの一部になりました。追加機能は次のとおりです。

  • 数値範囲をフォーマットする 3 つの新関数(formatRangeformatRangeToPartsselectRange
  • グループ化の列挙型
  • 新しい丸めと精度のオプション
  • 丸め優先度
  • 文字列を小数として解釈する
  • 丸めモード
  • 標識の表示がネガティブ

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

NumberFormat V3 の提案では、これらの新機能の詳細を確認できます。

Fullscreen API

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

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

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

CSS :has() セレクタ

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

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

今年、ベースラインに追加されたその他の機能には、次のようなものがあります。

これらの機能の多くは、Interop 2023 での共同作業を通じて相互運用性を実現しました。新機能がこの過程を経て、ベースラインで新たに利用可能になり、一般提供までのタイマーが開始されるのは、非常に楽しみです。これにより、独自のプロジェクトで機能を採用するタイミングを明確に判断できるようになります。