caniuse.com にベースラインが登場します。この投稿では、このインテグレーションの概要と、2023 年に Baseline に追加されたいくつかの機能について説明します。
ベースラインの新しい定義では、機能のライフサイクルには 2 つのステージがあります。1 つ目は、リリースが開始されてから、30 か月後に一般公開された時点です。機能は、以下のブラウザで相互運用可能になると、新たにベースラインに組み込まれます。
- Safari(macOS と iOS)
- Firefox(パソコンと Android)
- Chrome(パソコン、Android)
- Edge(デスクトップ)
ベースラインは使用可能
機能の可用性を明確にするための次のステップとして、ベースラインは本日より [Can I Use] の項目に着目し始めます。[使用可能] のページにアクセスすると、その機能がベースラインで利用できるようになったことを示すバッジが表示されます。
Baseline で新たに利用可能になった機能には、利用可能になった年とともにバッジが表示されます。そのため、今年リリースされた主要ブラウザ全体で相互運用可能なものはすべて、Baseline 2023 に含まれます。
本投稿の残りの部分では、2023 年にこのマイルストーンを達成した機能をご紹介します。これらの機能はすべて、新たに利用可能になった Baseline 2023 です。
コンテナクエリとコンテナクエリ単位のサイズを設定する
サイズ コンテナクエリを使用すると、メディアクエリでビューポートのサイズをクエリできるのとほぼ同じ方法で、要素のサイズをクエリできます。配置された領域のサイズに反応するコンポーネントを作成できるため、再利用可能なコンポーネントの作成がはるかに容易になります。
次のカードのデザインは、コンポーネントの幅に応じて変わります。詳しくは、コンテナクエリが安定版のブラウザに渡されるをご覧ください。
新しい色空間と関数
CSS で、sRGB 色域外の色にアクセスできる色空間がサポートされるようになりました。つまり、HD 色域の色を使用した HD(高解像度)ディスプレイをサポートできます。
新しいカラーモデル
ベースラインでは、色関数 lch()
、lab()
、oklch()
、oklab()
を使用して、LCH、Lab、OKLCH、OKLab のカラーモデルにアクセスできます。
color-mix()
関数
さらに、新しいカラー関数が Baseline の一部になりました。color-mix()
関数を使用すると、任意の色空間で、ある色を別の色に混在させることができます。次の CSS では、sRGB 色空間で青の 25% が白色に混ざり合っています。
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
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 です。この組み込みの圧縮を使用することで、アプリケーションに圧縮ライブラリを含める必要がなくなりました。
詳しくは、すべてのブラウザで圧縮ストリームがサポートされるようになりましたをご覧ください。
画面外キャンバス
OffscreenCanvas を使用する前は、キャンバスの描画機能は <canvas>
要素に関連付けられていました。つまり、DOM に直接依存していました。OffscreenCanvas は、その名が示すように、DOM と Canvas API が画面外に移動することで分離されます。
この分離により、OffscreenCanvas のレンダリングは DOM から完全に分離され、両者の同期が存在しないため、通常のキャンバスよりも速度が上がります。さらに、利用できる DOM がない場合でも、レンダリング処理を Web Worker に移行できるため、メインスレッドが解放され、アプリケーションの応答性が向上します。
詳しくは、OffscreenCanvas - ウェブワーカーでキャンバスのオペレーションを高速化するをご覧ください。
モジュールのプリロード
モジュールをプリロードすると、ダウンロードと処理の時間を短縮できます。JavaScript モジュールを参照するリンク要素に rel="modulepreload"
を追加します。ブラウザはモジュールを取得し、解析してコンパイルし、実行可能なモジュール マップに結果を格納します。
詳しくは、モジュールのプリロードをご覧ください。
CSS の三角関数
2023 年には、CSS 値と単位レベル 4 の仕様の三角関数が相互運用できるようになりました。つまり、関数 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
、atan2()
は Baseline 2023 に含まれています。
CSS の三角関数では、これらの関数の使用方法と使用例をご紹介しています。
inert 属性
不活性とは、動く能力に欠けることを意味します。不活性なものをマークすると、その DOM 要素から動きや相互作用が失われます。inert 属性を使用すると、ブラウザはその要素を無視します。
- ユーザーが要素をクリックしても、
click
イベントは呼び出されません。 - 要素はフォーカスされません。
- 要素とそのコンテンツがユーザー補助ツリーから除外されている。
この属性は、画面外にある要素や非表示の要素に追加する必要があります。詳しくは、inert 属性をご覧ください。
CSS グリッド レイアウトのサブグリッド
grid-template-columns
と grid-template-rows
に subgrid
値を指定すると、親グリッドで定義されたトラックを、ネストされたグリッドで使用できます。つまり、これらのネストされたグリッド内の要素を互いに整列させることができます。
記事「CSS サブグリッド」には、サブグリッドのユースケースに焦点を当てた例と、他の多くの投稿へのリンクと例が含まれています。
NumberFormat V3
Intl.NumberFormat V3 は、2023 年に Baseline の一部となった Intl.NumberFormat の新機能のセットです。追加機能は次のとおりです。
- 数値の範囲を書式設定する 3 つの関数(formatRange、formatRangeToParts、selectRange)を新たに追加しました。
- グループ化の列挙型
- 丸めと精度の新しいオプション
- 丸め処理の優先度
- 文字列を小数として解釈する
- 丸めモード
- 負の符号表示
それぞれの新機能については、NumberFormat V3 の提案で詳しく説明しています。
Fullscreen API
Fullscreen API を使用すると、requestFullscreen()
メソッドを呼び出して、<video>
などの要素を全画面モードにできます。また、要素が全画面モードかどうかや、ドキュメントが全画面モードをリクエストできる状態かどうかを検出するメソッドも用意されています。
詳しくは、MDN の Fullscreen API ガイドをご覧ください。
CSS :has() セレクタ
Baseline 2023 を作成するだけの :has()
セレクタは、12 月 19 日に Firefox 121 でリリースされます。なかでも、このセレクタは「親セレクタ」として機能し、内部にある要素に基づいて要素を選択できるという点で特に便利です。たとえば、要素内に画像があるかどうかに応じて、異なる CSS を適用できます。
詳しくは、:has(): ファミリー セレクタをご覧ください。
今年ベースラインに追加された機能
この投稿では、今年ベースラインに組み込まれた主な機能の一部をご紹介しましたが、その他にも多くの機能があります。
- 作成可能なスタイルシート
- CSS の複雑な nth-child セレクタ
- メディアクエリの範囲構文
- 地図をインポート
- CSS 表示用の複数の値
- @counter-style
counter-set
CSS プロパティlinear()
イージング関数- Origin Private File System(OPFS)
- CSS ネスト。緩和解析を追加する変更が含まれています。
- CSS の
:dir()
疑似クラス セレクタ - CSS の
cap
の長さの単位 - CSS マスキング
- HTML 動画の
<source>
要素のメディアクエリのサポート - HTML の
<search>
要素 <iframe>
要素の遅延読み込み(12 月 19 日に Firefox 121 に移行)- CSS の行の高さの単位(
lh
とrlh
)
これらの機能の多くは、Interop 2023 での共同作業を通じて相互運用性を実現しました。このプロセスを経て、新しい機能がリリースされ、新たに利用可能になったことが Baseline に導入されるのを見るのは、非常に楽しみです。これにより、プロジェクトに機能を導入するタイミングをより明確に判断できます。