このページは Cloud Translation API によって翻訳されました。

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

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

Mariko Kosaka

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

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

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

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

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

ダイアログ要素

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

対応ブラウザ

ソース

モダル要素を定義し、ダイアログ要素で 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;
}

対応ブラウザ

ソース

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

新しいビューポートの単位

モバイルでは、ビューポートのサイズは動的ツールバーの有無によって影響を受けます。
URL バーとナビゲーションツールバーが表示される場合もありますが、これらのツールバーが完全に非表示になっている場合もあります。
ビューポートの実際のサイズは、ツールバーが表示されているかどうかによって異なります。
svh や lvh などの新しいビューポート単位により、ウェブデベロッパーはモバイル向けの設計をより細かく制御できます。詳しくは、大、小、動的ビューポートユニットに関する記事をご覧ください。

対応ブラウザ

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);

対応ブラウザ

ソース

詳細については、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;
}

対応ブラウザ

ソース

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

TransformStream インターフェース

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

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

対応ブラウザ

ソース

まとめ

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

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

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

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

ダイアログ要素

個々の CSS 変換プロパティ

新しいビューポートの単位

JavaScript での深いコピー

:focus-visible 疑似クラス

TransformStream インターフェース

まとめ

`:focus-visible` 疑似クラス