2022 年に開発者が見逃せない Web プラットフォームの新たな展開

5 月 11 日と 12 日、Google は 2022 Google I/O グローバル デベロッパー カンファレンスを開催しました。カンファレンスでは、Jake Archibald と Una Kravet が Web プラットフォームの最新開発について最新情報を提供してくれました。 2022 年の Web プラットフォームの新機能を見てみましょう。

この記事では、プライバシーとセキュリティ、電源、UI デザイン、パフォーマンス、コア指標などの分野の新機能と、開発者ツールを強化するためのいくつかの新しい CSS および JavaScript について説明します。

#1. UI 関数

1. アクセントカラー

これですべてです2022 年になった今でも、ドロップダウンやチェックボックスのスタイルを設定するのがなぜこんなに難しいのでしょうか? CSS の

accent-color プロパティを使用すると、この問題を簡単に解決できます。

このプロパティを使用すると、チェック ボックス、ラジオ ボタン、範囲コントロール、プログレス バーなど、以前はアクセスできなかったフォーム コントロールのテーマの色を簡単に変更できます。

CSS の 1 行で、

accent-color を使用すると、ブラウザは開発者が設定した背景に基づいて前景色を決定できます。 color-scheme プロパティと組み合わせると、明るいテーマと暗いテーマを自動的に調整できます。以下のコード スニペットを使用すると、ブラウザーは自動的にライト モードとダーク モードを作成し、フォーム コントロールに マゼンタ のアクセント カラーを使用します。

このプロパティは、最新のすべての Web エンジンで安定しつつあります。これには、Chrome、Edge、Opera、Safari、Firefox が含まれます。

2.

HTML ダイアログは、すぐに使用できる新しい HTML ダイアログ要素です。

この要素を使用すると、アラートやプロンプトなどのダイアログ ボックスを簡単に作成できます。ページに追加すると、最初は非表示になりますが、showModal メソッドを使用して表示すると、ポップアップ表示されます。

<dialog id="dialog">
  hello world!
</dialog>

<script>
  someBotton.onclick = () => {
    const dialog = document.getElementById(&#39;dialog&#39;);
    dialog.showModal();
  };
</script>

もちろん、これは最も単純な例では、CSS を介して任意の方法でスタイルを設定できます。

これの本当に便利な部分は、アクセシビリティを処理することです。それはダイアログボックスと呼ばれます。キーボードのフォーカスが要素から離れるのを防ぎます。また、特別な最上位レイヤーのすべての上にポップされるため、ダイアログ要素がネストされたコンポーネント構造の奥深くに作成された場合でも、親要素がオーバーフロー非表示やその他の非表示タイプによって非表示になっている場合でも、ビューポートを埋めることができます。

ダイアログ ボックスにフォームがある場合、フォームを送信するとボックス ダイアログ ボックスが自動的に閉じられ、どのボタンがクリックされたかがダイアログ ボックスの戻り値によって通知されます。

3. selectmenu

Open UI コミュニティ グループは、より複雑で拡張されたフォーム コントロールを解決する方法を積極的に研究しています。彼らは、

selectmenu コンポーネントや pop-up 属性など、いくつかの実験的なソリューションを提案しています。

selectmenu コンポーネントは、ドロップダウン メニューのより幅広いスタイルを提供できます。以下は、selectmenu コンポーネントに関する Microsoft のデモンストレーションです:

Open UI は、タブやアンカーなどの他のコンポーネントのエクスペリエンスを解決することも検討しています。ポジショニングです。

4. datetime-local

datetime-local はクロスブラウザ関数であり、入力タイプです。

次のように使用できます。ユーザーは日付と時刻を選択できます:

<label>
  Start data & time:
  <input type="datetime-local" />
</label>

これは、PC 上の Chrome と PC 上の Chrome でどのように表示されるかです。 Android :

最小日付と最大日付などの検証制約を設定することもできます。

5. COLRv1

COLRv1 是浏览器中的一种新的字体格式。它是 COLRv0 字体格式的演变，其添加了渐变、合成和混合，并改进了内部形状重用，以获得更清晰、更紧凑的字体文件，从而更有效地压缩。

和该方法的替代方案bitmap相比，这种压缩带来了不错的性能提升：

COLRv1 字体往往更清晰，而且它们的缩放效果也更好。

这种新格式可以更轻松地在风格上使用彩色字体和表情符号等图标来创建富有表现力的标题和高性能界面。

例如，可以将它们呈现为彩色字体，而不是使用图像作为图标。有一些新的实验性属性，例如 font-palette和 override-colors，它们为用户提供了使用 COLRv1 设置 Web 字体样式的新方式。下面的例子就使用override-colors属性来重新设置 Bungee 字体的样式。

二、性能

1. bfcache

bfcache 意为往返缓存。它在 Firefox和 Safari 中已存在多年，现在 Chromium 中也支持了该功能。

在一个网页上点击一个链接到另一个页面后，但前一页会保留一段时间，在后台冻结，这意味着如果按下返回，它会立即触发。

并非所有页面都会发生这种情况，只有不太可能导致问题的页面才会发生这种情况。DevTools 可以告诉我们它是否适用于给定页面，如果不适用，会给出相应的理由。

2. 图片懒加载

图像是页面的一部分，它会提前开始加载。一旦浏览器在源代码中看到它们，就会提示下载。即使图像被隐藏，即使它位于一个非常长的页面的底部，也会提前加载。现在，一个简单的 loading 属性就可以让浏览器在开始下载时考虑图像的可见性和位置。

它也适用于 iframe：

<img src="/static/imghw/default1.png"  data-src="..."  class="lazy"   alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>

如果将 loading="lazy" 放在页面顶部的重要大图上，它们的加载速度会变慢，所以要格外小心。如果将它添加到不太重要和屏幕外的图像中时，它们不会争夺带宽，而更重要的东西（如样式、脚本和更高优先级的图像）会优先考虑。

现在它可以跨浏览器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。

3. aspect-ratio

如果我们为图像设置了height和width属性，并将高度设置为自动，它们将保持其纵横比，在加载之前，这避免了布局的变化。CSS 新增的 aspect-ratio 属性可以你为所有元素实现相同的效果，而不仅仅是图像。

在 iframe、组件div、网格布局和元素上使用该属性都可以得到一个固定的纵横比。

.whatever {
  aspect-ratio: 16 / 9;
}

这对于嵌入的内容、占位符或非HTML中的图像（如 CSS 背景）特别有用。

4. containment

containment是一个具有性能优势的 CSS 特性。该属性让开发人员可以告诉浏览器如何在屏幕上呈现内容，并隔离 DOM 子树。这反过来又使浏览器能够延迟渲染大小、窗格和布局，以提高速度和效率。

containment 也是容器查询的先决条件，下面会进行介绍。

5. 優先順位のヒント

コンテンツを取得するとき、ブラウザは可能な限り賢く、コンテンツのレンダリングに非常に高い優先順位が与えられるのを防ぎます。コンテンツがどこにあるかを確認すると、ビューポート内のコンテンツの優先順位が高くなります。ただし、場合によっては、非同期でロードされた 2 つのスクリプト、プリロードされた 2 つのイメージ、2 つの iframe、2 つの表示イメージ (そのうちの 1 つがより重要であるなど) など、正しい決定を下すのに十分な情報がブラウザーにない場合があります。

Chrome で最近サポートされた優先度ヒントを使用して、画像をより速く取得できるようになりました:

その仕組み仕事？上記のコードを例にとると、fetch-priority 属性を使用すると、外部ファイルの読み込み優先順位を追加できます:

#6。

size-adjust は、累積レイアウト オフセット (CLS) を削減することでパフォーマンスを向上させる、Web ページ レイアウト用の実験的な CSS プロパティです。

どうやって行うのですか?フォントにはさまざまな形やサイズがあり、同じサイズのフォントでもまったく異なって見える場合があります。ある 16 ポイントのフォントは、他のフォントよりもはるかに大きく見える場合があります。ここで

size-adjusts が活躍します。 size-adjusts を使用すると、ユーザーはフォント サイズ (ローカル フォントを含む) を視覚的に調整して、置き換えたい Web フォントの形状に近づけることができます。 Web フォントはダウンロード後にローカル フォントを置き換えるため、ページの全体的な累積レイアウト オフセットが減少します。

7. SIMD

昨年、SIMD は Chromium と Firefox の安定版で利用できるようになりました。 SIMD は Single structive Multiple Data の略で、複数のオペランドをコピーして大きなレジスタにパックできる一連の命令です。これは、特定の小さな操作を並行して実行する低レベルの方法であり、画像、ビデオ、およびオーディオのプロセスの C 実装で一般的な最適化です。

#これまで、これらのプログラムを WebAssembly にコンパイルすると、これらの最適化は失われていました。現在、主要なブラウザはこの機能を実装していますが、Safari はまだサポートしていません。 WebAssembly を 2 回コンパイルして、SIMD を使用するパッケージと SIMD を使用しない別のパッケージを作成できます。こうすることで、Chrome と Firefox は WebAssembly の高速化の恩恵を受けながら、Safari でも正常に動作します。これは、画像圧縮を高速化するために Squoosh で行われることです。

8. 次のペイントへのインタラクション

最後に、このセクションでは実験的な新しいパフォーマンス指標について説明します: 次のペイントへのインタラクション (次の描画とのインタラクション)最初のインタラクションだけでなく、ページ上のすべてのインタラクションも対象となります。たとえば、ユーザーが再生ボタンを押してから、その代わりに一時停止ボタンが表示されるまでの時間を測定します。

より具体的には、ユーザー操作からすべてのイベント ハンドラーの実行後に次のフレームが描画されるまでの時間を記録します。このメトリクスは、ユーザーが経験するインタラクションの遅延をより適切に捕捉し、UI の応答における予期せぬ遅延を強調します。

3. プライバシーとセキュリティ

1. CHIPS

当社の長期プロジェクトの 1 つは、第 3 のチップを段階的に廃止することです。ユーザーのプライバシーを向上させるために、Cookie とクロスサイト追跡によってパーティーを管理します。他のブラウザでもこれはすでに行われていますが、これにより互換性の問題が発生します。したがって、私たちは既存のユーザーフレンドリーな機能を維持するのに役立つ API の開発に取り組んできました。

独自のログイン ステータスを管理するチャット アプリケーションがサイトに埋め込まれているとします。従来、これは、サイトが埋め込まれている場所に関係なく、埋め込まれたサイトが独自の Cookie セットを持つことを許可することで実現されていました。これは、廃止されるサードパーティ Cookie の動作です。これはプライバシーにとっては優れていますが、この埋め込みチャットのような正当に有用なフレンドリーなケースは破壊されます。チャットに独自の Cookie がない場合、チャットはユーザーがログインしていることを記憶せず、毎回ログアウトすることになります。

それでは、何ができるでしょうか? Cookie の有用な部分を保持し、クロスサイト トラッキング部分を削除する方法があったとしたらどうでしょうか。これを行うために、私たちは独立してパーティション化された状態の Cookie を実験しています。

これは、Cookie を設定するときに渡される属性です。つまり、Cookie はブロックされませんが、共有されません。

#チャット アプリケーションが A を埋め込むときに Cookie が設定されている場合、その Cookie はサイトが A を埋め込むときにのみ使用できます。チャット アプリケーションが別のサイトに埋め込まれている場合、完全に異なる Cookie jar が含まれるため、クロスサイト追跡には使用できません。ただし、セッションを維持することはできます。

2. トピック

現在、広告プラットフォームはトラッキング テクノロジーを使用して関連性の高い広告を配信していますが、これらのモデルへの扉は閉ざされています。 。そこで私たちは、プライバシーに悪影響を与えることなく、プラットフォームが意味のある広告を配信できるようにする方法を検討しています。私たちは実験的な Topics API を提案します。

ユーザーが興味を持つとブラウザが判断するいくつかのトピックをページに提供します。これは、表示する最適な広告を決定するために使用できます。外部と共有されるのはプレミアム テーマのみであり、ユーザーの閲覧履歴は共有されません。また、異なるサイトでは同じユーザーに対して異なるテーマが取得されるため、クロスサイト識別子としてはあまり役に立ちません。

3. ユーザー エージェント クライアント ヒント

他のブラウザーと協力して、ユーザー エージェント クライアントの自動ヒントの数を減らすための措置を講じています。ユーザー エージェント文字列共有されるデータの量は、ユーザーがカスタマイズしたエクスペリエンスを構築するために非常に重要です。ただし、スタイルを決定したり、条件付きで異なるコンテンツを提供したりするためにユーザー エージェント文字列を使用することは一般に良い考えではありません。そうは言っても、ポリフィルなどの場合や、特に厄介なバグを修正するために必要な場合もあります。

ユーザー エージェント文字列を使用せず、ユーザー エージェント クライアント ヒント API を表示します。これは現在 Chromium ベースのブラウザーでサポートされています:

4. WebAuth

ユーザー アカウントを管理する最も安全な方法はパスワードですか?まだ完全にパスワードのない世界ではありませんが、ユーザー エクスペリエンスをシームレスでより安全なものにするために、パスワード マネージャーのサポートを強化する新しい方法が登場しています。

私たちは、FIDO Alliance の一環として WebAuth のパスワードを開発しています。これにより、登録された認証情報を Android デバイス間で同期できるようになり、パスワードを常に入力する必要がなくなりました。複数のデバイスでログインするには、QR コードをスキャンして携帯電話をセキュリティ キーとして使用できます。

4. Web アプリの機能

1. メディア セッション API

Web に APP のような機能があり、豊富な機能が提供されることを願っています。クロスプラットフォームのエクスペリエンス。たとえば、デスクトップやモバイル デバイス上のほとんどのオペレーティング システムには、何が再生されているかを知らせ、一時停止、スキップ、検索のコントロールを提供する、ある種のメディア統合が備わっています。

場合によっては、これらのコントロールは別のデバイスに表示されます。携帯電話から再生された曲は、時計にメディア コントロールを表示できます。 Media Session API を使用すると、これらすべてを Web 上で行うことができ、Windows、Mac OS、Android、iOS (スマートウォッチなどの関連デバイスを含む) 上のメディア コントロールを表示して反応することができます。

今年の時点では、ブラウザのサポートは非​​常に充実しています。

2. ウィンドウ コントロール オーバーレイ

ウィンドウ コントロール オーバーレイはオペレーティング システムの統合機能であり、この機能は非常に新しいものです。これは現時点では Chromium のみの機能ですが、インストールされているアプリにとっては優れた漸進的な拡張機能です。

Web アプリをデスクトップにインストールすると、次のようなウィンドウが開きます。

しかし、Chrome 99 の新機能により、次のようになります:

おっと、そうかもしれません。ただし、これにより、次のように Web コンテンツを中央のその領域に配置できるようになります:

この機能は、Web アプリ マニフェストのオプションを使用してアクティブ化できます。では、CSS 環境変数と API を取得して、すべてのウィンドウ コントロールの位置を伝え、要素をその周りに配置できるようにします。

3. ナビゲーション API

ナビゲーションを制御するために、ブラウザには history.pushState や popstate イベントなどを処理するための API がいくつかあります。セッション履歴。

私たちはそれを再設計し、Navigation API と名付けました。これにより、ナビゲーションをインターセプトしない限り、同じオリジンのセッション履歴の現在の Windows ビューが得られます。これは、リンク上のクリック イベントに依存する必要がないことを意味します。これにより、リロード間の状態管理や Web アプリのトラバースが容易になります。

現在、Chrome で未加工のトライアル版が提供されており、間もなく安定化される予定です。

4. PageTransition API

PageTransition API は、CSS アニメーションなどのよく知られた概念を使用して、ページとページ状態間の豊かなアニメーションの遷移の作成を簡素化する API です。 API。この API を使用して、状態間のスムーズなカスタム遷移を取得します。

5. Web アプリのカラー スキーム

Web アプリのカラー スキームは、Web アプリ マニフェストの補足であり、明るいテーマと暗いテーマを作成できます。異なる色。

これは配色スタイルに似ていますが、Web サイトの配色によりよく適合します。 PWA インターフェイスとうまく連携します。これは一見小さな追加ですが、ユーザー エクスペリエンスに大きな違いをもたらします。この機能は現在、Chromium で未加工のトライアル段階にあります。

6. スポイト API

スポイト API は入力タイプであり、色の値を選択するために使用されるストローです。

これはかなりデスクトップ固有の対話であるため、現在デスクトップ上の Chromium でのみサポートされています。スポイトは、ユーザーが簡単な API 呼び出しと対話するとアクティブ化でき、ユーザーはどこかをクリックして、キャプチャした色を Web アプリケーションに送り返すことができます。ブラウザの外側で色をキャプチャすることもできるので、完全にアプリのような体験ができます。

7. 仮想キーボード API

タブレットや携帯電話などのデバイスには、テキストを入力するための仮想キーボードが搭載されていることがよくあります。物理キーボードとは異なり、仮想キーボードはユーザーのアクションやニーズに基づいて表示されたり消えたりします。

仮想キーボード API を使用すると、ユーザーは JavaScript を通じてプログラムで仮想キーボードにアクセスし、キーボードに関する情報を CSS とその環境変数に渡し、スタイルを設定したり、仮想キーボードを表示するかどうかを決定するポリシー。

5. ネイティブ機能

1. 構造化クローン

が使用可能structurdClone JavaScript 値のディープ コピーを簡単に実装します。現在、すべての主要なブラウザで動作します。

よりクリーンなだけでなく、BLOB、画像ビットマップ、型付き配列など、より多くのもののクローンを作成できます。循環参照を含むオブジェクト構造のクローンを作成することもできます。

const clone = structuredClone(obj)

这不是 JavaScript 中的功能，它来自 HTML 规范。但它也在 Node.js 和 Deno 中实现。

2. createimageBitmap

下面来介绍如何将图像 blob 转换为可以在 Canvas 中显示的内容。使用以下方式就很容易导致内存泄漏：

但是现在所有浏览器都支持 createimageBitmap API：

使用它，上面的代码就变成了这样：

不仅如此，我们还可以更好地控制图像的加载方式。它对于为 2D canvas 和 WebGL 加载纹理非常有用。

3. JavaScript 功能

（1）顶层等待

现在可以像这样在 JavaScript 模块的顶层使用 await：

（2）私有属性和方法

类现在可以拥有私有属性和私有方法：

只要以#开头的属性和方法，就只有类内部的代码可以访问它。

（3）array.at

array.at 方法可以通过索引从数组中获取一个元素，如果传入的值为负数，就会从元素后边开始查找：

该方法也适用于字符串和类型化数组。所有这些现在都是跨浏览器的。

4. SharedArrayBuffer

SharedArrayBuffer 也是跨浏览器的。它 允许在页面和 workers 之间共享内存，内存共享对于使用 WebAssembly 的多个线程来说非常重要，因为它允许从 C++ 和 Rust 等移植代码，而性能损失最小。!

该功能在2018年出现了一些非常糟糕的 CPU 错误，浏览器出于安全原因不得不取消此功能。从那时起，浏览器一直在合作开发一种称为跨域隔离的功能，这大大减少了这些 CPU 错误的影响。所以现在，该功能已在所有引擎和平台上安全恢复。

5. URLPattern

URLPattern 允许我们根据模式验证 URL，并提取部分。该功能去年年底在 Chromium 浏览器中发布。它还没有出现在其他浏览器中，但是有一个 polyfill，让我们现在可以跨浏览器使用它。

6. WebCodecs API

WebCodecs API 实际上是一整套 API，可以对图像和视频解码和图像编码进行低级控制，从将帧从动画 GIF 中拉出，到对 WebGL 生成的场景进行编码，再到 H.264 视频，所有这些浏览器内。

多年来，浏览器已经内置了图像和视频编解码器，但这个 API 让我们可以对它们进行低级控制。这是 Chromium 领先的功能，期待未来有更多的跨引擎支持。

7. CSS 功能

（1）级联层

有时我们添加的选择器只是为了打败另一条规则的特异性，级联层就解决了这个问题。

我们可以将导入的样式放入图层中：

これらのレイヤー ブロックを使用してスタイルをグループ化することもできます:

現在、デフォルトでは、次のレイヤー スタイルに関係なく、次々に表示されるレイヤーは前のレイヤー スタイルをすべて上書きします。セレクターの特異性 (重み)。レイヤーの順序を事前に定義することもできます。レイヤー内のスタイルは、スタイルが !重要 とマークされていない限り、レイヤー外のスタイルよりも具体性が低くなります。これを行うと、スタイルはレイヤーの逆の順序で適用します。

(2):has()

:has() は CSS の強力なツールですselection は、スコープ内の親の任意の属性をチェックするために使用できます。これは親セレクターと呼ばれ、親に子要素が含まれているかどうかをチェックするために使用されます。

たとえば、

figure:has(figcaption) を使用する場合、Figure には figcaption## がどのように含まれますか# 要素。子要素、親要素、またはその他の要素のスタイルを設定できます。

(3) コンテナ クエリ

メディア クエリを使用して、ブラウザ ウィンドウの幅に基づいて適用されるスタイルを変更するレスポンシブ デザインを作成できます。ただし、ブラウザ ウィンドウの幅が広いからといって、コンポーネントの幅も広くなるとは限りません。メディア クエリを使用してこれに対処するのは困難です。コンテナ クエリは、親コンテナの幅、高さ、スタイル、または状態に基づいてスタイルを適用し、真に応答性の高いコンポーネントベースのインターフェイスを作成することで、この問題を解決します。

コンテナ クエリでは、各コンポーネントが独自の応答情報を持ち、UI のどこにあってもそれに応じて応答します。

コンテナ クエリに関するもう 1 つの優れた点は、コンテナという名前が付いていることです。 1 つの親内にネストされた子があり、別の親にクエリを実行する必要がある場合、まさにこの状況に対応するコンテナ ルールを作成できます。

6. 概要

過去 1 年間で、Web は大きな進歩を遂げました。私たちは、Interop 2022 と呼ばれるイニシアチブを通じて、開発者にとってさらに優れた Web 開発エクスペリエンスを保証するために、ブラウザー ベンダーと会合し協力してきました。私たちは、最も要望の多かった開発者機能のいくつかを展開し、最も厄介な互換性バグのいくつかを修正することを目指しました。

2022 年、私たちはブラウザ間で動作が完全に相互運用可能であることを保証するために、これらの 15 の主要な領域に焦点を当てることを目指しています。

最終的には、開発者が Web 上で優れたエクスペリエンスを構築できるようにしたいと考えており、相互運用性やブラウザーのサポートが障害になるべきではありません。たくさんのイノベーションが生まれています！

スピーチ: https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/

元のアドレス: https: //juejin.cn/post/7100815944833826824

著者: CUGGZ