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

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

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

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

記事バックナンバー一覧

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

要点

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

Chrome 104新機能・仕様変更

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

追加・拡張

領域指定動画キャプチャー

getDisplayMedia()でブラウザ画面を動画キャプチャする場合、不要な部分の切り抜き処理が可能になります。

メディアクエリ Level 4

メディアクエリで、比較演算子/関係演算子(>=等)、論理演算子(or・not)、未指定機能の入れ子評価ができるようになります。

Speculation Rules

Speculation Rules APIによる同ドメイン内ページのプリレンダリング指定に対応します。表示を高速化するページ指定用の推測ルールをJSON形式で記述できるようになります。
※オリジントライアルから正規機能に昇格(104に延期)

Webバンドル内サブリソース読み込み

Webバンドル内の一部分のリソースだけを読み込みできるようになります。
※オリジントライアルから正規機能に昇格(104に延期)

デスクトップWebアプリ用ウィンドウ制御

Chromeベースのデスクトップ(PC)用Webアプリで、タイトルバー部分(ウィンドウ制御ボタン等)を含むウィンドウ全体の見た目を制御できるようになります。(104に延期)

object-view-boxプロパティ

画像等の上下左右をクリッピングするCSSプロパティが使えるようになります。imgやvideo等に直接クリッピング用のCSSプロパティを付与可能になるため、別タグで囲ったりdivの背景画像にしたりする処理が不要になります。

全画面表示対象の委任機能

フルスクリーン表示にする対象について、指定した他のウィンドウに全画面表示対象を委任する機能が追加されます。

全画面サブウィンドウ制御

Webアプリでマルチスクリーンウィンドウ制御を行う際に、全画面のサブウィンドウを利用可能になります。なお、利用するには各ユーザー(ブラウザ)側で有効化許可が必要です。

Web Bluetooth API

Web Bluetooth APIがアクセス許可ポリシーで制御可能になります。トークン名は「bluetooth」です。

overflow-clip-marginの書式拡張

CSSのoverflow-clip-marginプロパティ(overflow: clip時の表示限界範囲指定)に、visual-box系の値(content-box、padding-box、border-box)を指定できるようになります。(104に延期)

デフォルトはpadding-box＝枠線内側0pxまでで、従来の仕様からの変更はありません。

非同期クリップボードAPI

Async Clipboard API用のカスタム形式対応が強化され、テキストや画像等の標準化された形式以外のデータでも、Web用のクリップボードAPIで取り扱いでき、OSのクリップボードに近い柔軟性が得られます。(ただし一部非対応の形式あり)

WebGL canvasのDisplay-P3対応

WebGL canvasの描画要素・テクスチャの色空間にDisplay-P3を利用可能になります。(従来はsRGBのみ)

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

focusgroupプロパティ

キーボード操作時のフォーカス対象をセットにまとめることで、ナビゲーションを改善できるようになります。

クレジットカード情報記録のオプトアウト

Secure Payment Confirmationにある、支払い用クレジットカード情報の記録機能について、ユーザー側でオプトアウトできるようになります。

Shared Element Transitions

シングルページアプリ(SPA)のページ移動時にトランジション効果(スライドイン等)をつけられるようになります。

Federated Credentials Management API

サードパーティCookieなしでサイト間をまたぐユーザー認証技術について、デスクトップ版Chromeでもトライアルが開始します。 ※Androidでは101でオリジントライアル開始済み

仕様変更

Cookie有効期限の上限設定

Cookieの有効期限(Expires / Max-Age)の期間設定に上限400日という制限が追加されます。
以前は期間の上限規定はありませんでしたが、今後は400日を超えて長期間有効なCookieは設定できなくなります。

廃止・削除

filesystemブロック

iframeでfilesystem://～のURL呼び出しがブロックされるようになります。(トップレベルフレームでのfilesystem://～対応はChrome 68で廃止)

Client Hint Modeの一部要素対応終了

Client Hint Modeのうち、dpr・width・viewport-width・device-memoryの4要素への対応が終了します。
これによりAndroidでのプライバシーが向上します。

U2F APIの対応終了

U2Fセキュリティキーの対応が終了します。Web Authentication APIでの代用が必要になります。

※参照：Chrome 104 Beta: New Media Query Syntax, Region Capture, and More (2022/06/23)
　https://blog.chromium.org/2022/06/chrome-104-beta-new-media-query-syntax.html新しいウィンドウで開きます

Safari 16 変更点

Safari 16での機能追加・修正内容のまとめです。(ベータ版時点での情報)

  • Webインスペクタ用拡張機能…プラグインでMac版Safariの開発者ツールの機能を拡張できる
  • コンテナクエリ…メディアクエリ(ビューポート幅に応じてレイアウトを切り替える)よりも小さなコンテナ単位で幅に応じたレイアウト切り替えを可能にする技術
  • Mac版SafariでWebプッシュ通知が可能に
  • サブグリッド…グリッドアイテムの中にさらに入れ子でグリッドを設定する機能
  • Flexbox Inspector…開発者ツールでFlexboxの表示解析ができる
  • アクセシビリティ対応のパフォーマンス向上…VoiceOverの処理時間短縮・応答性向上
  • display:contentsによるアクセシビリティツリー処理の改善
  • CSSオフセットパス(モーションパス)…任意に設定したモーションパスに沿って要素をアニメーション可能
  • オーバースクロール…子要素内スクロールの限界に達したときに、親要素のスクロールに移行するかどうかを設定できる
  • 共有ワーカー…複数のページに対して並列処理として動き、それぞれに対してリクエストに応じた処理を返すWebWorker
  • その他改善＆バグ修正もろもろ

※参照：News from WWDC22: WebKit Features in Safari 16 Beta - Webkit Blog (2022/06/06)
　https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/新しいウィンドウで開きます

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

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

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

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

その他のサービス