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

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

ベースラインを構成する機能のいくつかについて説明します。

Mariko Kosaka

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

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

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

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

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

ダイアログ要素

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

これを使用するには、モーダル要素を定義し、ダイアログ要素で 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;
}

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

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

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

`:focus-visible` 疑似クラス

ウェブデベロッパーなら誰でも「フォーカスリング」をこのボタンは、キーボードでページを移動したり、入力要素をクリックしたりしたときに表示されます。ユーザー補助に不可欠な機能ですが、ユーザーごとにビジュアルデザインの妨げになる場合があります。CSS 疑似クラス :focus-visible は、フォーカスが表示されているとブラウザが判断しているかどうかを確認します。フォーカスを表示する場合にのみスタイルを指定できるようになりました。

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

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

詳しくは、CSS について学ぶのフォーカスセクションをご覧ください。

TransformStream インターフェース

Streams API の TransformStream インターフェースを使用すると、複数のストリームにパイプ処理を行うことができます。

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

まとめ

最近は、ウェブプラットフォームでの相互運用性と安定性が向上した機能が他にも多数あります。今後は、WebDX コミュニティグループと連携して、これらのベースライン機能セットの明確化を図る予定です。詳細については、web.dev/baseline をご確認ください。

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

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

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

ダイアログ要素

個々の CSS 変換プロパティ

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

JavaScript のディープコピー

:focus-visible 疑似クラス

TransformStream インターフェース

まとめ

`:focus-visible` 疑似クラス