caniuse.com にベースラインが登場します。この投稿では、このインテグレーションの概要と、2023 年にベースラインに組み込まれたいくつかの機能について説明します。
ベースラインの新しい定義では、機能のライフサイクルには 2 つのステージがあります。新たに利用可能になったときと、30 か月後に一般提供になったときです。機能は、以下のブラウザで相互運用可能になると、ベースラインに新たに組み込まれます。
- Safari(macOS と iOS)
- Firefox(パソコンと Android)
- Chrome(パソコン、Android)
- Edge(デスクトップ)
ベースラインは使用可能
機能の可用性を明確にする次のステップとして、ベースラインは本日から使用可能になります。[Can I Use] のページにアクセスすると、その機能が Baseline で広く利用できるかどうかを示すバッジが表示されます。
新たに利用可能になったベースラインの機能には、利用可能になった年とともにバッジが表示されます。今年設定されたコアブラウザ全体で相互運用可能なものはすべて、Baseline 2023 に含まれます。
この投稿の残りの部分では、2023 年にこのマイルストーンを達成した機能をご紹介します。これらの機能はすべて ベースライン 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-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 です。この組み込みの圧縮を使用するアプリの場合、圧縮ライブラリを含める必要がなくなりました。
詳しくは、すべてのブラウザで圧縮ストリームがサポートされるようになりましたをご覧ください。
画面外キャンバス
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()
はベースライン 2023 に含まれています。
CSS の三角関数で、これらの関数の使用方法と使用例をご確認ください。
inert 属性
DOM 要素を inert
としてマークすると、要素から動きやインタラクションが削除されます。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()
セレクタ
ベースライン 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
)
これらの機能の多くは、相互運用 2023 での共同作業を通じて相互運用性を実現しました。このプロセスを通じ、新しい機能がベースラインに導入されるのを見るのは、非常に楽しみです。これにより、独自のプロジェクトに機能を採用するタイミングをより明確に判断できます。