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

ベースラインに含まれる機能の一部をご紹介します。

Mariko Kosaka

ウェブは常に進化しており、ブラウザは常に更新されているため、デベロッパーはプラットフォームに革新をもたらす新しいツールを提供しています。これまでヘルパー ライブラリが必要だった機能がウェブ プラットフォームの一部となり、すべてのブラウザでサポートされるようになりました。また、デザイン要素をより短く簡単にコーディングできる方法も提供されています。

このような絶え間ない進化と適応は有益ですが、混乱を招くこともあります。こうしたアップデートをすべて利用するのは困難かもしれません。デベロッパーとしては、「すべてのブラウザ エンジンがこの新機能をサポートするのはいつ頃ですか？」といった疑問が湧くことでしょう。「これらの機能を本番環境のコードで実際に使用できるようになるのはいつ頃ですか？」「古いブラウザをサポートする期間はどのくらいですか？」

正解は「状況次第」です。必要な機能と使用可能な機能は、ユーザーベース、技術スタック、チーム構造、サポートされているデバイスによって異なります。ただし、ウェブの現在の状況では、そうした判断を下すことが難しい場合があることは、全員が同意するところです。

Chrome チームは、他のブラウザ エンジンやウェブ コミュニティと連携して、より明確な基準を策定しています。これには、一連の主要機能の相互運用性を改善する Interop 2023 などのプロジェクトへの取り組みも含まれます。しかし、ここ数年の間にリリースされた機能についてはどうでしょうか？2 年前に学んだ試験運用版の機能を使用する準備はできていますか？

今回の投稿では、過去 2 つのメジャー バージョンで、すべての主要なブラウザ エンジンで利用できるようになった機能をご紹介します。これは、ほとんどのデベロッパーが機能を安全に使用できると判断する基準であり、ベースラインと呼ばれる機能セットです。詳しくは、ベースラインに関するお知らせをご覧ください。

ダイアログ要素

<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 変換を使用すると、サイトに動きを追加できます。
3 つのプロパティを 1 行に記述する CSS 変換はよくご存じでしょう。
個々の変換プロパティを使用すると、変換プロパティを個別に指定できるようになりました。これは、複雑なキーフレーム アニメーションを作成する場合に便利です。

.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

ソース

まとめ

最近、ウェブ プラットフォームで相互運用可能になり、安定して使用できる機能がさらに増えています。今後、Google は WebDX コミュニティ グループと連携して、これらのベースライン機能セットを明確にしていきます。最新情報については、web.dev/baseline をご覧ください。

最新情報を入手するには、機能が相互運用可能になったときに記事が公開されます。また、試験運用版の機能から新たに相互運用可能になった機能まで、ウェブ プラットフォームの最新情報に関する月次アップデートも公開されます。

Google は、Google の取り組みがお客様に役立つかどうか、また別の種類のサポートが必要かどうかについて、常に関心を寄せています。WebDX Community Group までお問い合わせください。