デジタルマーケティングTips

2022年1月の各種ブラウザ仕様変更発表まとめ

記事タイトル画像：2022年1月の各種ブラウザ仕様変更発表まとめ

2022年1月に公式発表された、各種ブラウザ関連の主要な仕様変更発表のまとめです。

記事バックナンバー一覧

[Twitter | LINE | Instagram | Facebook | TikTok] [Google検索 | ブラウザ]

要点

メルマガでも情報を配信中です！　ぜひご登録ください。

Chrome 98新機能・仕様変更

Chrome 98で実装予定の新機能・仕様変更のまとめです。(ベータ版時点での情報)

追加・拡張

COLRv1カラーグラデーションベクターフォント対応

省サイズな多色指定ベクターデータの文字を、フォントの文字扱いで表示できるようになります。絵文字がビットマップ画像で表示されている場合などにCOLRv1対応フォントを使えば、読み込み軽量化のメリットがあります。

参考：https://developer.chrome.com/blog/colrv1-fonts/新しいウィンドウで開きます

AudioContext.outputLatency (音声出力レイテンシー用プロパティ)

Web Audio APIにおいて、ユーザーエージェントが再生処理を要求してから実際にオーディオ出力機器で最初の音声データが処理されるまでの時間差を、outputLatencyプロパティに記述可能になります。単位は秒です。

この数値に応じて、システム側で遅延調整処理を組み合わせると、映像/音声の同期を取りやすくなります。

なお、オーディオサブシステムまでの再生経路内の遅延については、baseLatencyプロパティ内に秒単位で別途記載します。

参考：https://webaudio.github.io/web-audio-api/#dom-audiocontext-outputlatency新しいウィンドウで開きます

contain-intrinsic-size: auto

CSSのcontain-intrinsic-sizeプロパティ(要素の縦横元サイズ指定)の値に「auto」を使用できるようになります。contain-intrinsic-size: auto;を指定すると、直近の検出サイズがそのまま適用されます。

content-visibility: auto;(該当要素が表示範囲に入ってくるまでレンダリング処理を保留し、その分ファーストビュー表示処理を早く終わらせる)指定時の要素表示で表示の混乱が少なくなり、パフォーマンス向上が見込めます。

color-scheme: only ○○

CSSのcolor-schemeプロパティ(要素単位でカラースキーム＝ライトモード/ダークモード指定を変更する)について、指定の上書き(再変更)を禁止する値「only light」「only dark」が指定できるようになります。

参考：https://drafts.csswg.org/css-color-adjust/#color-scheme-prop新しいウィンドウで開きます

document.adoptedStyleSheetsの変更機能拡張

adoptedStyleSheets(配列形式のスタイルシート)の内容を変更する際に、配列制御メソッドとしては定番の、push(末尾追加)やpop(末尾切り取り)による部分的変更ができるようになります。(従来は配列全体の再代入が必要でした)

HDR用メディアクエリ設定

メディアクエリ設定で、ディスプレイの輝度ダイナミックレンジがHDRか否かによってCSS設定を変えられるようになります。HDR向けに色設定を調整したい場合に活用できます。

例：

@media (dynamic-range: standard) {
(SDR用のCSSをここに入れる)
}
@media (dynamic-range: high) {
(HDR用のCSSをここに入れる)
}

※デモ…HDR対応ディスプレイだと、文字が緑で表示される(SDRだと黒)
　https://willcassella.github.io/blink-hdr/demos/css-dynamic-range.html新しいウィンドウで開きます

window.openでの別タブ・別ウィンドウ使い分け

ポップアップウィンドウを別タブではなく強制的に別ウィンドウ扱いで開かせたい場合、window.open('_blank','','popup=1'); のように指定すると、_blank指定時のページの開き方を別ウィンドウに限定できるようになります。

なお、ポップアップウィンドウとして開く場合、window.statusbar.visible(ステータスバー表示)の値はfalseが返されます。

structuredClone()メソッド

structuredClone()メソッドを使ってオブジェクトのディープコピー(変更内容が参照先まで再帰的に反映される変更)ができるようになります。

参考：https://web.dev/structured-clone/新しいウィンドウで開きます

WebAuthn用最小PIN長の取得機能

CTAP 2.1で規定されている、WebAuthnで使用するPINの最小文字数を返す拡張識別子「minPinLength」がChromeで使えるようになります。

参考：https://fidoalliance.org/specs/fido-v2.1-ps-20210615/fido-client-to-authenticator-protocol-v2.1-ps-20210615.html#sctn-minpinlength-extension新しいウィンドウで開きます

デスクトップWebアプリのウィンドウコントロールのオーバーレイ化

デスクトップWebアプリ側でブラウザ上部メニュー領域を含む全体をアプリ領域として管理することが可能になります。

WritableStreamの即時通信停止が可能に

WritableStreamDefaultControllerクラスにおいて、AbortSignalインスタンスによるデータストリームの即時通信停止が可能になります。以前は処理中のデータストリームが最後まで終わるまで待つ必要があり、タイムロスの原因となっていましたが、この問題が解消できます。

オリジントライアル(先行試験実装)

範囲指定キャプチャ機能

getDisplayMedia()による画面動画キャプチャーに対して、範囲指定(余白のクロップ)ができるようになります。

仕様変更

プライベートネットワークアクセス時のリクエスト仕様変更

セキュリティの都合上、プライベートIPアドレスの別サーバーにあるリソースを参照しようとする場合、オリジン間リソース共有(CORS)の許可を求めるプリフライトリクエストがHTTPリクエスト冒頭に追加されます。

廃止

SDES鍵交換廃止

WebRTCでのSDES鍵交換機能(セキュリティ上問題があり禁止されている)が削除されます。
(Chrome 97でも削除予定に入れられていましたが、持ち越されていました)

※参照：Chrome 98 Beta: Color Gradient Vector Fonts, Region Capture Origin Trial, and More (2022/01/10)
　https://blog.chromium.org/2022/01/chrome-98-beta-color-gradient-vector.html新しいウィンドウで開きます

Chrome: Topics (サードパーティーCookie代替用の新技術)

Googleは、ChromeにおけるサードパーティーCookieの代替技術として開発を進めていた「Federated Learning of Cohorts (FLoC)」を凍結し、代替として新技術「Topics」の試験を2022年内に開始する予定と発表しました。

  • Topicsでは、Googleが選択肢として用意したユーザーの興味関心事項(発表では350種程度)が、閲覧履歴に応じてブラウザ設定内に自動的に保存されます。(よってパーソナライズは、設定共有がなければ基本的にはブラウザ/デバイス単位で分断されます)
  • ユーザーはブラウザ設定内に自動でリストされた興味関心事項を任意にオプトアウトできます。
  • 要配慮個人情報(人種・性的指向・宗教等)はTopicsの選択肢に含まれません。
  • ブラウザ内に広告が表示される場合、ページの広告表示スクリプトはAPIを経由してブラウザ設定の興味関心事項にアクセスし、その内容に応じてパーソナライズされた広告を配信します。

※参照：Get to know the new Topics API for Privacy Sandbox (2022/01/25)
　https://blog.google/products/chrome/get-know-new-topics-api-privacy-sandbox/新しいウィンドウで開きます
　Topics - The Privacy Sandbox
　https://privacysandbox.com/proposals/topics新しいウィンドウで開きます

Firefox：Android版Firefox Focusがクロスサイトトラッキングを遮断

Android版Firefox Focusで、クロスサイトトラッキングcookieが遮断されるようになりました。サイトからCookieへアクセス権は、自サイトが発行したCookieのみに限定されます。

※参照：New Year, New Privacy Protection for Firefox Focus on Android (2022/01/11)
　https://blog.mozilla.org/en/mozilla/new-privacy-protection-for-firefox-focus-on-android/新しいウィンドウで開きます

マックスマウスからのお知らせ

Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！

WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください！

その他のサービス