現在使用できるベースライン機能

Baseline に含まれる機能のいくつかについて説明します。

Mariko Kosaka
X

ウェブは常に進化しており、ブラウザは絶えず更新されているため、デベロッパーはプラットフォームでイノベーションを起こすための新しいツールが提供されます。これまでヘルパー ライブラリが必要だった機能は、ウェブ プラットフォームの一部となり、すべてのブラウザでサポートされるようになりました。また、要素をデザインする作業を簡素化または簡素化できます。

この絶え間ない進化と適応は有用ですが、混乱を招く可能性もあります。すべての更新にナビゲートするのは困難です。デベロッパーから次のような疑問があります。「すべてのブラウザ エンジンでこの新機能がサポートされるのはいつになるか？」「これらの機能を本番環境のコードで実際に使用できるようになるのはいつ頃ですか？」「古いブラウザのサポート期間を教えてください。」

正解は「ニーズ次第」です。何が必要で、何が使用可能かは、実際にはユーザーベース、技術スタック、チーム構造、サポート対象デバイスによって異なります。しかし、私たち全員が同意しているのは、現在のウェブの状況ではそのような判断がしづらい可能性があるということです。

Chrome チームは他のブラウザ エンジンやウェブ コミュニティと協力して、より明確な表現を実現しています。これには、一連の主要な機能の相互運用性の向上に役立つ Interop 2023 のようなプロジェクトに対する Google の活動も含まれます。では、ここ数年でリリースされた機能はどうでしょうか。2 年前に学んだ試験運用版の機能は使用できますか？

この投稿では、過去 2 つのメジャー バージョンにおいて、すべての主要なブラウザ エンジンで利用できるようになった機能をいくつか紹介します。これは、大部分のデベロッパーにとっては機能が安全だと感じると思われるカットオフ ポイントであり、Baseline と呼ばれる機能セットです。詳しくは、ベースラインに関する発表をご覧ください。

ダイアログ要素

<dialog> 要素は、ポップアップやモーダルなどのダイアログ プロンプトを作成するための新しい HTML 要素です。

対応ブラウザ

  • 37
  • 79
  • 98
  • 15.4

ソース

これを使用するには、モーダル要素を定義してから、ダイアログ要素で showModal() メソッドを呼び出してダイアログを開きます。

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

ネイティブ HTML 要素として、フォーカス管理、タブトラッキング、スタッキング コンテキストの保持などの機能が組み込まれています。詳細については、ダイアログ コンポーネントの作成をご覧ください。

個々の CSS 変換プロパティ

CSS 変換を使用すると、効率的な方法でサイトに動きを追加できます。
CSS 変換では 3 つのプロパティを 1 行で記述することに慣れている方もいらっしゃるでしょう。
個々の変換プロパティを使用して、変換プロパティを個別に指定できるようになりました。これは、複雑なキーフレーム アニメーションを記述する場合に便利です。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

対応ブラウザ

  • 104
  • 104
  • 72
  • 14.1

ソース

この変更の詳細については、個々の変換プロパティを使用した CSS 変換のきめ細かな制御をご覧ください。

新しいビューポート ユニット

モバイルの場合、ビューポートのサイズは、動的ツールバーの有無によって決まります。
URL バーやナビゲーション ツールバーが表示されていても、完全に後退している場合もあります。
ビューポートの実際のサイズは、ツールバーが表示されるかどうかによって異なります。
svh や lvh などの新しいビューポート ユニットにより、ウェブ デベロッパーはモバイル用のデザインをより細かく制御できます。詳しくは、ビューポートの大きなユニット、小さなユニット、動的なビューポート ユニットをご覧ください。

対応ブラウザ

  • 108
  • 108
  • 101
  • 15.4

JavaScript のディープコピー

以前は、元のオブジェクトを参照せずにオブジェクトのディープコピーを作成するには、JSON.stringify と JSON.parse を組み合わせる方法が一般的でした。これは非常に一般的なハッキングだったため、V8（Chrome の JavaScript エンジン）によってこの手法のパフォーマンスが大幅に向上しました。しかし、structuredClone では、このハッキングはもう必要ありません。

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

対応ブラウザ

  • 98
  • 98
  • 94
  • 15.4

ソース

詳しくは、structuredClone を使用した JavaScript でのディープコピーをご覧ください。

:focus-visible 疑似クラス

ウェブ デベロッパーにはおなじみの「フォーカス リング」は、キーボードでページを移動したときや入力要素をクリックしたときに表示されます。ユーザー補助機能には必須の機能ですが、ユーザーによって視覚的デザインの妨げになる場合があります。:focus-visible CSS 疑似クラスは、ブラウザがフォーカスを表示するべきだと判断しているかどうかを確認します。フォーカスを表示する場合にのみスタイルを指定できるようになりました。

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

対応ブラウザ

  • 86
  • 86
  • 85
  • 15.4

ソース

詳しくは、CSS の学習に関する「フォーカス」セクションをご覧ください。

TransformStream インターフェース

Streams API の TransformStream インターフェースを使用すると、ストリームを相互にパイプすることができます。

たとえば、ある場所からデータをストリーミングし、データの受け渡しに応じてデータ ストリームを別の場所に圧縮できます。このサンプルのユースケースについては、fetch API を使用したストリーミング リクエストの記事をご覧ください。

対応ブラウザ

  • 67
  • 79
  • 102
  • 14.1

ソース

まとめ

最近になって、ウェブ プラットフォームでの相互運用や安定版になった機能は他にも多数あります。今後、WebDX コミュニティ グループと協力して、これらのベースライン機能セットをより明確にしていきます。詳細については、web.dev/baseline をご覧ください。

最新情報の入手については、機能の相互運用が可能になった時点で記事を公開しています。また、試験運用版の機能から相互運用可能な新たな機能まで、ウェブ プラットフォームの最新情報を毎月公開しています。

Google は、こうした取り組みが皆様のお役に立つかどうか、あるいは各種のサポートが必要であれば、WebDX コミュニティ グループからぜひご連絡ください。