ベースライン 2023 年

Rachel Andrew

Baseline が caniuse.com に登場します。この投稿では 統合について学び、 2023 年のベースライン。

ベースラインの新しい定義により、 は機能のライフサイクルにおける 2 つの段階です。1 つは新たに利用可能になったとき、もう 1 つは、 30 か月後に全世界で利用可能になります。特徴は の相互運用が可能になった時点で、 ブラウザ:

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

ベースラインは [Can I Use] にあります

機能の可用性を明確にする次のステップとして、Baseline は 利用できますCan I Use のページにアクセスすると その機能がベースラインで一般公開されているかどうかを示すバッジが表示されます。

CSS グリッド レイアウトで広く利用可能なバッジと一緒に使用できるスクリーンショット

ベースラインに新たに利用可能になった機能には、バッジが表示されます。 提供されるようになりました。Google Kubernetes Engine、GKE、App Engine 今年設定されたコアブラウザはベースライン 2023 の一部です。

コンテナクエリで新たに利用可能になったバッジと一緒に使用できるスクリーンショット。

この投稿の残りの部分では、このマイルストーンを達成した機能について説明します。 2023 年に発表しましたこれらの機能はすべて ベースライン 2023 - 新たに利用可能になりました。

コンテナクエリとコンテナ クエリユニットのサイズを設定する

コンテナクエリのサイズを設定する メディアクエリとほぼ同じ方法で要素のサイズをクエリできる ビューポートのサイズをクエリできます再利用可能なコンポーネントを 領域の大きさに反応するコンポーネントを 作成できるので 決定します

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 110。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

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

新しい色空間と関数

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

新しいカラーモデル

ベースラインに、カラー関数 lch()、lab()、oklch()、oklab() が追加されました。 LCH、Lab、OKLCH、OKLab の各カラーモデルへのアクセス権が付与されます。

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

<ph type="x-smartling-placeholder">
</ph> ピンクから青の鮮やかなグラデーションを含む Gradation.style エディタのスクリーンショット。
gradient.style を使用して、新しい色空間を試してみましょう。

color-mix() 関数

また、新しいカラー関数はベースラインに組み込まれました。color-mix() 関数を使用すると、任意の色空間で、ある色を別の色にミックスできます。 次の CSS では、srgb 色空間で青の 25% が白に混ざり合っています。

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

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

詳細: 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 です。アプリ この組み込み圧縮を使用すれば、圧縮ライブラリを含める必要がなくなります。

対応ブラウザ

  • Chrome: 80。 <ph type="x-smartling-placeholder">
  • Edge: 80。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

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

オフスクリーン キャンバス

OffscreenCanvas が導入される前は、キャンバスの描画機能は <canvas> に関連付けられていました 要素は DOM に直接依存していたことを意味します。OffscreenCanvas の分離 キャンバスを画面外に移動して

この分離により、OffscreenCanvas のレンダリングは 通常のキャンバスより速度がいくらか向上します。 両者間では同期されませんまた、Kubernetes の レンダリング作業をウェブワーカーに行わせることはできませんが、 アプリケーションの応答性を高められます。

対応ブラウザ

  • Chrome: 69。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 105。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

詳しくは、OffscreenCanvas - ウェブワーカーを使用してキャンバス操作を高速化するをご覧ください。

モジュールのプリロード

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

対応ブラウザ

  • Chrome: 66。 <ph type="x-smartling-placeholder">
  • Edge: ≤79。 <ph type="x-smartling-placeholder">
  • Firefox: 115。 <ph type="x-smartling-placeholder">
  • Safari: 17。 <ph type="x-smartling-placeholder">

ソース

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

CSS の三角関数

2023 年の「CSS Values and Units Level 4（CSS の値と単位）」レベル 4 の三角関数 相互運用性を確保しました。これは、関数 sin()、cos()、 tan()、asin()、acos()、atan()、atan2() はベースライン 2023 の一部です。

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 108。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <ph type="x-smartling-placeholder">

ソース

<ph type="x-smartling-placeholder">
</ph>
このデモでは、三角関数を使用して、中心点を中心とする円形のパス上にアイテムを移動します。

これらの機能の使用方法を学び、 CSS の三角関数

inert 属性

DOM 要素を inert とマークすると、DOM 要素から移動や操作が削除されます。 できます。inert 属性があると、ブラウザはこの要素を無視します。

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

対応ブラウザ

  • Chrome: 102。 <ph type="x-smartling-placeholder">
  • Edge: 102。 <ph type="x-smartling-placeholder">
  • Firefox: 112。 <ph type="x-smartling-placeholder">
  • Safari: 15.5。 <ph type="x-smartling-placeholder">

ソース

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

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

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

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 71。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

CSS サブグリッドには、いくつかの例と、 サブグリッドのユースケースを紹介するその他の投稿や例を多数紹介しています。

NumberFormat V3

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

  • 数値の範囲を書式設定する 3 つの新しい関数: formatRange、 formatRangeToParts、selectRange
  • グループ化の列挙型
  • 新しい丸めと精度のオプション
  • 丸めの優先度
  • 文字列を小数として解釈する
  • 丸めモード
  • ディスプレイ負の符号

対応ブラウザ

  • Chrome: 106。 <ph type="x-smartling-placeholder">
  • Edge: 106。 <ph type="x-smartling-placeholder">
  • Firefox: 116。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <ph type="x-smartling-placeholder">

ソース

NumberFormat V3 の提案 詳しく見ていきましょう。

Fullscreen API

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

対応ブラウザ

  • Chrome: 71。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 64。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

詳しくは、MDN での全画面 API のガイドをご覧ください。

CSS :has() セレクタ

ベースライン 2023 を作成するのは :has() セレクタであり、Firefox に組み込まれます。 12 月 19 日に 121 になります。このセレクタはその他の用途として 親セレクタ: 内部にあるものに基づいて要素を選択できます できます。たとえば、ある種の CSS が存在するかどうかに応じて、 要素内の画像です。

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 121。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <ph type="x-smartling-placeholder">

ソース

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

今年 Baseline に加わった機能

今年 Baseline に追加された機能には、次のようなものがあります。

これらの機能の多くは、コラボレーションを通じて （Interop 2023）をご覧ください。これらの機能が そのプロセスを経て 新たに利用可能になった時点で 制限時間を設けて一般公開にかけますこれにより、 自分のプロジェクトに機能を導入するタイミングを決定するまでの道筋が明確になります。