この記事は Chromium Blog の記事 "Chrome 99: CSS Cascade Layers, a New Picker for Input Elements, and More " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2022 年 2 月 3 日の時点で Chrome 99 はベータ版です。PC 向けの最新版は Google.com で、Android では Google Play ストアでダウンロードできます。
Chrome 100 の準備
今年中に Chrome のバージョン 100 がリリースされ、ユーザー エージェント文字列で報告されるバージョン番号の桁数が増える予定です。サイトオーナーが新しい文字列をテストしやすくするために、Chrome 96 では、Chrome のユーザー エージェント文字列として「100」が返されるようにするランタイム フラグが導入されました。この新しいフラグ chrome://flags/#force-major-version-to-100 は、Chrome 96 以降で利用できるようになっています。詳細については、Chrome の User-Agent 文字列のメジャー バージョンを強制的に 100 にする をご覧ください。
CSS カスケード レイヤ
CSS カスケード レイヤ(@layer
ルールと階層化した @import
構文)を使うと、構造的な方法で単一オリジン内の関心対象を整理してバランスを取ることができます。単一カスケード レイヤ内のルールは一緒にカスケードされ、レイヤ外のスタイルルールと混じることはありません。そのため、同一オリジンルールに対して適切な方法で特定のカスケード順序を実現できます。
カスケード レイヤを使うと、要素のデフォルトやサードパーティ ライブラリ、テーマ、コンポーネント、オーバーライドなどを表すレイヤを作成できます。また、レイヤのカスケード順序を明示的に変更することもできます。カスケード レイヤがない場合、特定のカスケード順序を実現するには、セレクタの限定、@import
やソースの順序指定などの調整をする必要がありますが、これは面倒でエラーが起こりやすい作業です。
詳細については、ブラウザにカスケード レイヤが登場 をご覧ください。
HTMLInputElement オブジェクトの新しい showPicker() メソッド
HTMLInputElement
の新しい showPicker()
メソッドを使うと、ウェブ デベロッパーが input 要素でブラウザのピッカー(時間、色、ファイルや、データリストや自動入力などのサジェスチョン付きのもの)をプログラムを使って表示できます。
デベロッパーは、プログラムからブラウザの日付ピッカーを開く方法を長らく求めていました。これがないと、カスタム ウィジェット ライブラリや特定のブラウザ向けの CSS ハックを使うしかありませんでした。
現在、一部のブラウザやコントロールでは、この機能を click()
メソッドで利用できます。残念なことに、すべてのブラウザで動作するわけではないので、システムやユーザー全体に対して操作の一貫性がなくなります。showPicker()
を提供することで、click()
の代わりに、サポートされた方法を利用できるようになります。また、Chromium の click()
の動作が仕様と一致するようになり、将来的に他のブラウザの動作とも一致します。詳細については、日付、時間、色、ファイルのブラウザ ピッカーを表示する をご覧ください。
オリジン トライアル
このバージョンの Chrome には、以下のオリジン トライアルが導入されています。オリジン トライアルとして新機能を試せるようにすることで、ウェブ標準コミュニティにユーザビリティ、実用性、有効性についてのフィードバックを提供することができます。以下の項目を含め、現在 Chrome でサポートされているオリジン トライアルに登録するには、Chrome オリジン トライアル ダッシュボード をご覧ください。Chrome のオリジン トライアルの詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイド をご覧ください。Microsoft Edge は、Chrome とは別に独自のオリジン トライアルを行っています。詳細については、Microsoft Edge オリジン トライアル デベロッパー コンソール をご覧ください。
新しいオリジン トライアル
ウェブアプリのダークモードのサポート
ウェブアプリ マニフェストで color_scheme_dark フィールドがサポート され、ダークモードが適用されているときに別のテーマカラーや背景色を指定できるようになります。現在、ウェブアプリ マニフェストで定義できるテーマカラーと背景色は 1 つだけです。つまり、ダークモードで別の色を指定する方法はありません。
完了したオリジン トライアル
Chrome で以前にオリジン トライアルが行われていた以下の機能は、現在デフォルトで有効化されています。
Handwriting Recognition API
この API を使うと、手書きテキストをリアルタイム認識するオペレーティング システムの手書き文字認識サービスをウェブアプリで利用できます。これにより、手書き文字認識を行うアプリで、サードパーティのプロダクトを組み込む必要性が減少します。詳細については、ユーザーの手書き文字を認識する をご覧ください。
インストールした PC ウェブアプリ向けのウィンドウ コントロール オーバーレイ
ウィンドウ コントロール オーバーレイは、ウィンドウ全体を覆うようにアプリのクライアント領域を拡張します。この領域には、タイトルバー、ウィンドウのコントロール ボタン(閉じる、最大化 / 復元、最小化)も含まれます。ウェブアプリのデベロッパーは、ウィンドウ コントロール オーバーレイを除くウィンドウ全体の描画と入力ハンドリングをする必要があります。この機能を使うと、デベロッパーはインストールされた PC ウェブアプリをオペレーティング システムのアプリのように見せることができます。詳しくは、PWA のタイトルバーのウィンドウ コントロール オーバーレイをカスタマイズする をご覧ください。
今回のリリースに追加されたその他の機能
CSS の calc() が infinity、-infinity、NaN を許可
仕様への準拠性を高めるため、CSS の calc()
メソッド が infinity と NaN を許可するようになります。'infinity'
、'-infinity'
、'NaN'
キーワードや式を使うと、適切に評価されます。たとえば、'calc(1/0)' などです。
CSS の色調整 : color-scheme の 'only' キーワード
注 : この機能は、Chrome 98 で公開と誤って記載されていました。実際には、Chrome 99 で公開されます。
color-scheme
の仕様に再追加された only キーワードが Chrome でサポートされるようになりました 。これにより、特定の単一要素で color-scheme
を無効化できるようになります。たとえば、強制的なダーク化を無効化できます。いくつかの例で使い方を示します。
div { color-scheme: light }
これにより、div
要素は color-scheme
dark から除外されます。
div { color-scheme: only light }
これは、上の例と同じく、要素の color-scheme
をライトに保ち、ユーザー エージェントによる強制ダーク化を無効にします。
document.adoptedStyleSheets の変更が可能に
仕様に従い、document.adoptedStyleSheets
プロパティの変更が可能になります 。これにより、push()
や pop()
などの操作ができるようになります。これまでの adoptedStyleSheets
の実装は扱いにくく、たとえばシートを追加する場合、配列全体を代入し直さなければなりませんでした。
document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet];
新しい実装では、同じ操作を次のように行うことができます。
document.adoptedStyleSheets.push(newSheet);
注 : 以前、この機能は、Chrome 98 で公開と誤って記載されていました。
オリジン境界を越えて nextHopProtocol を公開する際の仕様との整合性を改善
PerformanceResourceTiming
インターフェースは、リソースをフェッチする際に使うベース接続タイプを説明するため、nextHopProtocol
プロパティを公開します。仕様に準拠するため、Chrome は古い特殊ケースを削除します 。このケースでは、クロスオリジン リクエストで機密である可能性のある情報が公開されたので、ユーザーが危険にさらされていました。
新しい描画キャンバス 2D 機能
仕様に準拠するため、Chrome の CanvasRenderingContext2D
インターフェースにいくつかの新しい属性が追加されました。
ContextLost
イベントと ContextRestored
イベント
大量のリードバックが想定されるキャンバス用の "willReadFrequently"
オプション
CSS テキスト修飾子サポートの追加
reset() メソッド
roundRect
描画プリミティブ
円錐型グラデーション
SVG フィルタのサポート強化
詳細については、いつも Canvas2D だった をご覧ください。
プレフィックスなしの text-emphasis プロパティ
Chrome 99 には、プレフィックスなしバージョンのテキスト強調 CSS プロパティが導入されます。具体的には、"text-emphasis"
、"text-emphasis-color"
、"text-emphasis-position"
、"text-emphasis-style"
の各 CSS プロパティです。これらは、プレフィックスなしバージョンの "-webkit-text-emphasis"
、"-webkit-text-emphasis-color"
、"-webkit-text-emphasis-position"
、"-webkit-text-emphasis-style"
です。
サポートの終了と機能の削除
このバージョンの Chrome では、以下のサポートの終了と機能の削除が行われます。現在サポートが終了している機能 と以前に削除された機能 のリストは、ChromeStatus.com をご覧ください。
安全でないオリジンでの Battery Status API の削除
Battery Status API が、安全でないオリジンでサポートされなくなります 。たとえば、HTTP ページや、HTTP ページに埋め込まれた HTTPS iframe などです。Battery Status API を使うと、ウェブ デベロッパーがシステムの電池充電レベルにアクセスし、充電されているかどうかを確認することなどが可能になります。これは 10 年以上前から存在している機能で、当初は別のセキュリティ制約とともに設計されていました。
font-family -webkit-standard の削除
このバージョンの Chrome では、font-family
の値 "-webkit-standard"
のサポートが削除されます 。この値は、独自キーワード "-webkit-body"
の単なる別名で、WebKit から継承しているというだけの理由で公開されていました。これを削除することで、CSS 仕様や Firefox との整合性が向上します。
GamepadList の削除
navigator.getGamepads()
メソッドが、GamepadList ではなく 、Gamepad
オブジェクトの配列を返す ようになります。Chrome では、GamepadList
はサポートされなくなります。これにより、Chrome で仕様と Gecko や Webkit との整合性が実現されます。一般的な Gamepad の情報については、Chrome の恐竜ゲームをゲームパッドでプレイする をご覧ください。
仕様に一致させるための WebCodecs の更新 WebCodecs 仕様の最近の変更により、 Chrome で 2 つの項目が削除 されます。EncodedVideoChunkOutputCallback()
メソッドは、EncodedVideoChunkMetadata
ディクショナリを受け取ります。これまでは、EncodedVideoChunkMetadata.temporalLayerId
に temporalLayerId というメンバーが存在していました。仕様に準拠するため、これは EncodedVideoChunkMetadata.SvcOutputMetadata.temporalLayerId
に移動します。 この仕様は、暗黙的にタイムスタンプを持たない CanvasImageSource
タイプ(HTMLCanvasElement
など)に対して、VideoFrame()
コンストラクタに timestamp 引数(VideoFrameInit.timestamp
)を含めることを求めています。タイムスタンプを含めない場合は TypeError
にする必要がありますが、これまで Chrome はタイムスタンプのデフォルトをゼロにしていました。これは便利なように思われますが、後で VideoFrame
を VideoEncoder
に送る場合、そこでタイムスタンプを使ってビットレート制御が行われるので、問題になります。
Reviewed by Eiji Kitamura - Developer Relations Team