CSS Cascasde Layersの追加など、Chrome 99 リリースノートまとめ

Published on 2022-03-24

Author

Saji

Editor

nus3

Chrome 99 のリリースノート関連の情報をまとめました。

New In Chrome (Chrome 99)

Chrome99 で新しく追加された機能です。

Chrome 100 and Firefox 100

Chrome 100 は今年の 3 月下旬、Firefox100 は 5 月上旬にリリースされます。これらは両方ともメジャーバージョン番号が 3 桁にロールオーバーするアップデートです。 UserAgent をパースしたバージョン番号を２桁として解釈しているコードがある場合、新しいバージョン番号によって問題が発生する可能性があります。

Chrome では、＃force-major-version-to-100 フラグを有効にすることで現在のバージョンを 100 に上書きし、挙動を確認することができます。

また、Firefox Nightly では「設定」メニューで、「Firefox100 ユーザーエージェント文字列」オプションを有効にすることで同様の確認が可能です。両ブラウザでバージョン番号の解釈が期待どおりに機能することを確認できるように、サイトをテストすることをお勧めします。

CSS Cascasde Layers

CSS Cascade Layers が Chrome99、Firefox 97、Safari 15.4 Beta でサポートされました！

CSS セレクタの詳細度を上回るルールを@layerで定義することができるようになります。

詳細は @nus3 が別途記事を書いたので次のリンクをご参考ください。

https://cybozu.github.io/frontend-expert/posts/css-cascade-layers

showPicker() for input elements

HTML InputElements に新しくshowPicker（）メソッドが実装されました。

これにより、日付だけでなく、時間、色、その他の<input>要素でブラウザーピッカーを表示するための標準的な方法が整備されました。

利用する場合は、以下のように<input>要素でshowPicker（）を呼び出します。またtry…catchブロックでこれらの処理を囲う事で、ブラウザーがshowPicker()の API をサポートしていない場合、またはピッカーを表示できない場合のフォールバックを提供できます。

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // Dateピッカーの表示.
  } catch (error) {
    // ピッカーを表示できない場合のフォールバック
  }
});

参考:

Show a browser picker for date, time, color, and files

And more!

CanvasRenderingContext2Dに次の機能が追加されました。

Context がロストした時や復元した時のイベントハンドリングができるように(ContextLost, ContextRestored)
willReadFrequentlyオプションの追加
letter-spacingなど Canvas でサポートされていなかったテキストを修飾するプロパティの追加
Canvas の状態をリセットするreset()など

PWA のマニフェストにダークテーマに対応する設定が追加できるオリジントライアルが開始されたました。

また詳細はこの記事の後半に記載しますが、Handwriting Recognition API が使えるようになります。

What's New In DevTools (Chrome 98)

DevTools についてはこちらの日本語訳を参照ください。

https://developer.chrome.com/ja/blog/new-in-devtools-99/

書いてるうちにでなかったら、気になるものがあれば記載する

Deprecations and removals in Chrome 99

Remove Battery Status API on insecure origins

Battery Status APIは、HTTP ページや HTTP ページに埋め込まれた HTTPS の iframe などの安全でないオリジンでサポートされなくなりました。

Remove font-family -webkit-standard

font-familyの値として-webkit-standardが削除されました。

Remove GamepadList

接続しているゲームパッドを取得できるnavigator.getGamepads()の返り値がGamepadlListからGamepadのオブジェクトの配列を返すようになりました。

この変更により、Gecko と Webkit と同じく仕様と一致するようになります。

参考:

Chrome でゲームパッドを使う方法

Update WebCodecs to match the specification

WebCodecs 仕様変更により、仕様に反していた以下の 2 つの部分について修正しました。

EncodeVideoChunkMetadataオブジェクト内のtemporalLayerIdの場所
VideoFrame() コンストラクタでタイムスタンプ引数を指定しなかった際の挙動変更

詳しくはこちらを参照してください。

その他 Chrome Platform Status に記載されていたもの

Feature: "paintworklet" destination for PaintWorklet

CSS Houdiniの一部であるCSS Painting APIで使われる PaintWorklet のリクエストの送り先がscriptからpaintworkletになりました。

Sec-Fetch-DestHTTP リクエストヘッダとFetchEvent.request.destinationで適用されます。

Feature: "audioworklet" destination for AudioWorklet

Web Audio APIのオーディオ処理を別スレッドで実行する仕組みである、AudioWorkletのリクエストの送り先がscriptからaudioworkletになりました。

Sec-Fetch-DestHTTP リクエストヘッダとFetchEvent.request.destinationで適用されます。

Feature: Allow infinity, -infinity and NaN in CSS calc()

CSS のcalc()関数でinfinity, -infinity, NaN などのキーワード、及びcalc(1/0) のようにinfinityやNaNに評価される式による値を許容するようになりました。

Autofill in ShadowDOM

autofillがform 要素内のフォームコントロールを収集する際に、ShadowDOMも参照するようになります。これによりShadow DOM内部の入力フォームでもautofillが効くようになります。

Web コンポーネントを採用する際、input要素のようなフォームコントロールをShadowDOMで包むことが一般的になっていることを受けての改善となります。

Convert adoptedStyleSheets to use ObservableArray

document や shadowRoot にCSSStyleSheetを追加できるadoptedStyleShettsで ObservableArray が使えるようになります。

今回から push などの通常の配列操作ができるようになります。

document.adoptedStyleSheets = [...adoptedStyleSheets, newSheet]; // これまで
document.adoptedStyleSheets.push(newSheet); // これから

Handwriting Recognition API

OS などにある既存の手書きの文字認識機能を web 上で扱えるようにするための API が追加されました。

※現状この API が利用できるのは ChromeOS のみで対応言語も英語に限られています。

参考:

Feature: Handwriting Recognition API

Unprefixed text-emphasis properties

CSS の text-emphasis プロパティが-webkitなしで使えるようになります。

参考:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis

V8 release v9.9

Intl.Locale extensions

Intl.Local オブジェクトに 7 つの新しいプロパティが追加されました。

calendars, collations, hourCycles, numberingSystems, timeZonesでは他の Intl API で使用する好ましい識別子を返します。

const jaLocal = new Intl.Locale("ja");
console.log(jaLocal.calendars); // ['gregory', 'japanese']
console.log(jaLocal.collations); // ['unihan', 'emoji', 'eor']
console.log(jaLocal.hourCycles); // ['h23']
console.log(jaLocal.numberingSystems); // ['latn']

textInfoはテキストに関連する情報をオブジェクトで返します。現状では CSS の direction プロパティで使用するような文字の並び順の値を返します。 (rtl が右から左へ、ltr が左から右へ)

arabicEgyptLocale.textInfo;
// { direction: 'rtl' }
japaneseLocale.textInfo;
// { direction: 'ltr' }
chineseTaiwanLocale.textInfo;
// { direction: 'ltr' }

weekInfoは週に関連する情報を返します。

const jaLocal = new Intl.Local("ja");
console.log(jaLocal.weekInfo);

// 返される数字は 1 が月曜日、7 が日曜日
// {
//   firstDay: 7,
//   weekend: [6, 7],
//   minimalDays: 1,
// }

Intl Enumeration

v8 でサポートされている識別子の配列を返すIntl.supportedValuesOf(code)という新しい関数が追加されました。サポートされるコード値は以下の 6 つです。

calendar

Intl.supportedValuesOf("calendar");
// ['buddhist', 'chinese', 'coptic', 'dangi', ...]

collation

Intl.supportedValuesOf("collation");
// ['big5han', 'compat', 'dict', 'emoji', ...]

currency

Intl.supportedValuesOf("currency");
// ['ADP', 'AED', 'AFA', 'AFN', 'ALK', 'ALL', 'AMD', ...]

numberingSystem

Intl.supportedValuesOf("numberingSystem");
// ['adlm', 'ahom', 'arab', 'arabext', 'bali', ...]

timeZone

Intl.supportedValuesOf("timeZone");
// ['Africa/Abidjan', 'Africa/Accra', 'Africa/Addis_Ababa', 'Africa/Algiers', ...]

unit

Intl.supportedValuesOf("unit");
// ['acre', 'bit', 'byte', 'celsius', 'centimeter', ...]

この新しいメソッドによって、Web 開発者はどの値が実装でサポートされているかを簡単に発見できるようになります。

Releasenote Browser

記事に関する報告などはこちらから