Chrome 99: CSS カスケード レイヤ、input 要素の新しいピッカーなど
特に記載のない限り、下記の変更は 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
