現在、Chrome 85 の安定版のリリースが開始されます。
フォーマットの詳細については次をご覧ください。
content-visibility: auto
を使用すると、レンダリングのパフォーマンスを改善できます。- CSS プロパティを CSS 内で設定できるようになりました。
getInstalledRelatedApps()
を使用して、Windows アプリまたは PWA がインストールされているかどうかを確認できるようになりました。- アプリアイコンのショートカットは Windows でも機能します(今回は直接対応)。
fetch
アップロード ストリーミングのオリジン トライアルが開始されました。- その他。
私は Pete LePage です。自宅で撮影を担当しています。では、Chrome 85 で導入されたデベロッパー向けの新機能を見てみましょう。
コンテンツの公開設定
HTML をユーザーに表示されるものにするには、ブラウザで最初のピクセルを描画する前に、いくつかの手順を踏む必要があります。これは、ビューポートに表示されていないコンテンツも含め、ページ全体に対して行われます。
要素に content-visibility: auto
を適用すると、その要素のレンダリング作業はビューポートまでスクロールするまでスキップできることがブラウザに通知され、最初のレンダリングが高速化されます。
.my-class {
content-visibility: auto;
}
content-visibility
を最大限に活用するには、より複雑なレイアウト アルゴリズム(flexbox
や grid
など)を持つ親セクションや、独自のレイアウトを含む子がある親セクションに適用します。
コンテンツをチャンク化して content-visibility: auto;
を追加することで、このページのレンダリング時間が 232 ミリ秒からわずか 30 ミリ秒に短縮されました。
これを使用してレンダリング パフォーマンスを改善する方法については、コンテンツの公開設定をご覧ください。
@property
変数と CSS 変数
技術的にはカスタム プロパティと呼ばれる CSS 変数が便利です。Houdini CSS Properties and Values API を使用すると、カスタム プロパティのタイプとデフォルトのフォールバック値を定義できます。以前の Chrome 78 の新機能では、JavaScript での定義のサポートを追加した際に説明しました。
Chrome 85 以降では、CSS で直接 CSS プロパティを定義して設定することもできます。CSS プロパティで気に入っているのは、プロパティにセマンティックな意味や代替値を与え、さらに CSS テストも行えるという点です。
@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}
Una は、@property
: CSS 変数の優れた機能を提供するという優れた投稿で、その使用方法を紹介しています。
関連するインストール済みアプリを入手する
getInstalledRelatedApps()
API を使用すると、ユーザーはアプリがインストールされているかどうかを確認し、ユーザー エクスペリエンスをカスタマイズできます。
たとえば、アプリがすでにインストールされている場合は、ランディング ページに異なるコンテンツを表示します。混乱を防ぐために、重複する機能を 1 つのアプリに一元化します。また、ネイティブ アプリがすでにインストールされている場合は、PWA のインストールを促進しないでください。
Chrome 80 で最初にリリースされたときは、Android アプリでのみ機能していました。Android では、PWA がインストールされているかどうかを確認できるようになりました。また、Windows では、Windows UWP アプリがインストールされているかどうかを確認できます。
const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
console.log(app.id, app.platform, app.url);
});
ヘルプセンター記事「アプリはインストール済みですか?getInstalledRelatedApps()
が通知します。
アプリアイコンのショートカット
Chrome 84 では、アプリアイコンのショートカットのサポートが追加されました。「どこでも利用可能だが、Android でのみ利用できる」とうっかり言っていました。 Chrome 85 では、Android と Windows に加えて、Chrome と Edge の両方で利用できます。
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list you saved for later",
"url": "/play-later",
"icons": [
{ "src": "//play-later.png", "sizes": "192x192" }
]
}
]
詳細については、web.dev のアプリアイコンのショートカットの記事をご覧ください。混乱を招いてしまい申し訳ございません。
オリジン トライアル: fetch()
を使用したストリーミング リクエスト
Chrome 85 以降では、オリジン トライアルとして fetch
アップロード ストリーミングを利用できます。これにより、リクエストの本文の準備が整う前にフェッチを開始できます。以前は、全身の準備が整ってからリクエストを開始できましたが、今後はコンテンツを生成している間でも送信を開始できます。
const { readable, writable } = new TransformStream();
const responsePromise = fetch(url, {
method: 'POST',
body: readable,
});
たとえば、サーバーのウォームアップや、マイクやカメラから取得した音声や動画のストリーミングに使用できます。
Jake は、web.dev の fetch API を使用したストリーミング リクエストで詳しく説明されています。また、最新の HTTP203 - Streaming requests with fetch の動画でも説明しています。
その他
もちろんそれだけではありません。
Promise.any
は、履行されるまたは拒否された最初の Promise によって履行される Promise を返します。
try {
const first = await Promise.any(arrayOfPromises);
console.log(first);
} catch (error) {
console.log(error.errors);
}
.replaceAll()
を使用すると、正規表現ではなく、文字列内のすべてのインスタンスをより簡単に置換できます。
const myName = 'My name is Bond, James Bond.'
.replaceAll('Bond', 'Powers')
.replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.
Chrome 85 では、AVIF のデコードのサポートが追加されています。AVIF は、AV1 でエンコードされ、Alliance for Open Media によって標準化された画像形式です。AVIF は JPEG および WebP に比べて圧縮率が著しく高く、最近の Netflix の調査では、標準の JPEG と比べて 50% の節約、4:4:4 のコンテンツと比べて 60% の節約が報告されています。
参考資料
ここでは、主なハイライトの一部のみを取り上げています。Chrome 85 で追加された変更点については、以下のリンクをご覧ください。
- Chrome DevTools の新機能(85)
- Chrome 85 のサポート終了と削除
- ChromeStatus.com の更新(Chrome 85)
- JavaScript の新機能(Chrome 85)
- Chromium ソース リポジトリの変更リスト
チャンネル登録
最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルにご登録ください。新しい動画が公開されるたびにメール通知が届きます。
ピート ルページです。ついに髪をカットしました。
Chrome 86 がリリースされ次第 Chrome の新機能をお知らせします