ウェブブラウザ「Google Chrome」の最新安定版であるバージョン111.0.5563.64 (Linux版/Mac版)・111.0.5563.64/.65(Windows版)がリリースされました。View Transitions APIによって、単一ページで洗練されたトランジションが作れるようになるほか、CSS Color Level 4が有効になることで使える色の幅が広がります。
New in Chrome 111 – Chrome Developers
https://developer.chrome.com/blog/new-in-chrome-111/
NIC070 v2 – YouTube
[embedded content]
◆「window-management」エイリアスの追加
「window-placement」パーミッションおよびパーミッションポリシー文字列のエイリアス(別名)として「window-management」が追加されました。その目的は、「window-placement(ウィンドウの配置)」という言葉がウェブアプリケーションがブラウザーウィンドウをターゲットディスプレイに配置するAPIの一つの側面しか表現していないことから、最終的に「window-placement」を非推奨にして削除するための準備の一貫です。
◆「baseline-source」プロパティ
「baseline-source」プロパティを使用することによりウェブ開発者は、インラインレベルボックスがラインボックス内の位置合わせにどのベースラインを使用するかどうかを指定できます。この仕組が必要な理由としては、現在の「ベースラインを決定するデフォルトの動作」が非常に紛らわしい、ということがあります。例えば、以下のようなHTMLコードがあったとします。
test <div style="display: inline-block;">line1<br>line2</div>この場合、divタグは「インラインブロック」であるため、最後の要素のベースラインがラインボックス内の位置合わせに用いられます。
次に、ほとんど内容の変わらない以下のようなHTMLコードがあったとします。
test <div style="display: inline-flex;">line1<br>line2</div>この場合、divタグは「インラインフレックス」であるため、最初の要素のベースラインがラインボックス内の位置合わせに用いられます。
こういったややこしさを解消するため、baseline-source: firstまたはbaseline-source: lastを指定することでどの要素のベースラインを位置合わせに用いるかを明示的に指定できるようになります。なお、baseline-source: autoと指定することで既存の挙動となります。
◆CSS Color Module Level 4およびcolor-mix()
CSS Color Module Level 4のすべてが有効となりました。これには、デバイス非依存の以下の関数と、color()関数、およびグラデーション・アニメーション用のユーザー定義の色空間が含まれます。
・lab()：CIELAB色を指定するCIE明度とそのa軸・b軸の色相座標によるCIE LAB直角座標モデルを使用
・lch()：CIELAB色を指定するCIE明度・彩度・色相によるCIE LCH円筒座標モデルを使用
・oklab()：Oklabの色を指定するOklab明度とそのa軸およびb軸の色相座標によるCIE LAB直角座標モデル
・oklch()：Oklabの色を指定するOklab明度・彩度・色相によるOklch円筒座標モデルを使用
さらに同時に、CSS Color Module Level 5に含まれるcolor-mix()関数も実装されました。これらの実装により、CSSが高解像度のディスプレイに対応できるようになり、HD色域から色を指定可能となると同時に特殊化された色空間も提供できるようになるとのこと。つまり、選択できる色が50％増えるそうです。
これらの使い方については、以下のサンプルを閲覧することで理解できます。
CSS Color Syntax Mega List
https://codepen.io/argyleink/pen/RwyOyeq
◆CSS ルートフォントユニット: ‘rex’、’rch’、’ric’、’rlh’
これまで、Chromeでサポートされていたルートフォントユニットは「rem」のみでしたが、今回から新たに以下の4つが追加されます。
・rex：ex(描画に使用されるフォントに含まれる’x’の文字の高さ)のルート要素バリアント
・rch：ch(描画に使用されるフォントに含まれる’0’の文字の幅)のルート要素バリアント
・ric：ic(描画に使用されるフォントに含まれる「水」の文字のサイズ)のルート要素バリアント
・rlh：lh(要素のline-heightプロパティの計算値)のルート要素バリアント
◆CSSセレクターLevel4擬似クラス :nth-child(an + b of S)
:nth-child(an + b)および:nth-last-child(an + b)を拡張し、セレクターリストSを指定できるようになります。例えば、
:nth-child(3 of .c)とすると、特定の親の子である3番めの.cとなります。ちなみに、従来からよく使用される記述である
.c:nth-child(3)と似てはいますが、意味合いが全く異なる点には注意が必要です。
◆CSS三角関数
CSSで使用できる数式に、三角関数sin()・cos()・tan()・asin()・acos()・atan()・atan2()を追加します。
CSS value functions – CSS: Cascading Style Sheets | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#trigonometric_functions
◆font-variant-alternatesと@font-feature-valuesアットルール
font-variant-alternatesを使用することにより、スワッシュ・文字バリアント・装飾といったフォントの代替グリフに簡単にアクセスできるようになります。類似の既存機能にはfont-feature-settingsの値として4文字コードを設定する方法がありますが、これよりもさらに簡単に使用できます。
またfont-variant-alternatesは@font-feature-valuesアットルールを使用することができ、これにより要求する機能のアクティブ化が使いやすく読みやすくなり、フォント機能を柔軟に組み合わせることができます。
◆Media Session APIで「previousslide」「nextslide」アクションが可能に
メディア通知表示を司るMedia Session APIで「previousslide」と「nextslide」のアクションが可能になりました。たとえば、ピクチャーインピクチャーのウィンドウで、前後のスライドに移動するボタンが表示されます。
対応ブラウザで以下のページにアクセスすると、サンプルを確認できます。
Presenting Slides / Media Session Sample
https://googlechrome.github.io/samples/media-session/slides.html
◆View Transitions API
トランジションとは動画のカット間をつなぐためのエフェクトのことですが、ウェブ上でスムーズなトランジションを作成するのは時として厄介な作業となるものです。View Transitions APIは、洗練されたトランジションの作成を可能にする仕組みです。これを用いることで、ウェブ開発者は最小限の労力で効果の高いトランジションを作りあげられるようになります。既定のアニメーションプロパティを使用するか、独自の遷移効果をカスタマイズして、目的の効果を実現できます。さらに、これらのアニメーションを標準のCSSアニメーションプロパティでカスタマイズすることもできます。
以下のデモサイトで挙動を確認できます。
HTTP 203
https://http203-playlist.netlify.app/
◆オリジントライアル
今回の更新では、任意のHTMLElementsを入力できる常時オープンのウィンドウを開くための新API「Document picture-in-picture」などがオリジントライアルに加わっています。
◆廃止される機能
今回の更新では、以下の機能が削られています。
・マニフェスト取得時にWeb Payment APIがconnect-src CSPポリシーをバイパスする機能
・決済アプリの非JITインストールを支援するWeb API「PaymentInstruments」
・決済アプリにユーザーがカードを登録しているかどうかを加盟店に知らせるサービスワーカーイベント「canmakepayment」
また、Google Chrome 111には40件のセキュリティバグフィックスが含まれています。
なお、次期安定版の「Google Chrome 112」は現地時間の2023年4月4日にリリース予定です。
この記事のタイトルとURLをコピーする
