ベースラインに含まれる機能の一部をご紹介します。
ウェブは常に進化しており、ブラウザは常に更新されているため、デベロッパーはプラットフォームに革新をもたらす新しいツールを提供しています。これまでヘルパー ライブラリが必要だった機能がウェブ プラットフォームの一部となり、すべてのブラウザでサポートされるようになりました。また、デザイン要素をより短く簡単にコーディングできる方法も提供されています。
このような絶え間ない進化と適応は有益ですが、混乱を招くこともあります。こうしたアップデートをすべて利用するのは困難かもしれません。デベロッパーとしては、「すべてのブラウザ エンジンがこの新機能をサポートするのはいつ頃ですか?」といった疑問が湧くことでしょう。「これらの機能を本番環境のコードで実際に使用できるようになるのはいつ頃ですか?」「古いブラウザをサポートする期間はどのくらいですか?」
正解は「状況次第」です。必要な機能と使用可能な機能は、ユーザーベース、技術スタック、チーム構造、サポートされているデバイスによって異なります。ただし、ウェブの現在の状況では、そうした判断を下すことが難しい場合があることは、全員が同意するところです。
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 までお問い合わせください。