Chrome 108にはCSSの新しい機能がたくさん含まれている、新機能と変更・削除された機能のまとめ
Post on:2022年12月1日
sponsorsr
11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。
Chrome 108の新機能、変更・削除された機能を紹介します。
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づき、翻訳しています。
Chrome 108のCSSの新機能
Chrome 108でデフォルトで有効になったCSSの新機能は、下記の通りです。
- 新しいビューポート単位（
lvh,svh,dvhなど) - 新しいプロパティ（
break-after,break-before,break-inside） - 置換要素（
img,video,canvasなど）のオーバーフローの変更 - ベースラインにアイテムを整列
- ビューポートのサイズ変更動作が変更
@supportsの拡張tech()関数のサポート
新しいビューポート単位（lvh, svh, dvhなど)
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChrome 108で実装されます。
この新しく追加された単位のおかげで「iOSのSafariで100vh」における問題を簡単に解決できます。
左: アドレスバーを非表示、右: 表示されてるとその分下に
追加されるビューポート単位は、下記の通りです。
- Large Viewport (
lvw,lvh,lvi,lvb,lvmin,lvmax) - Small Viewport (
svw,svh,svi,svb,svmin,svmax) - Dynamic Viewport (
dvw,dvh,dvi,dvb,dvmin,dvmax) - Logical Viewport (
vi,vb)
参考記事:
- CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
- CSSの新しい単位（lvh, svh, dvh)がChromeに実装、100vhがビューポートの高さいっぱいにならない問題を解決
CSSの新しいプロパティ（break-after, break-before, break-inside）
印刷時に使用されるCSSの改ページ用のプロパティ（break-before, break-after, break-inside）で、avoid値がサポートされます。この値を使用すると、適用された要素の前・後・内部で改ページを防ぐようにブラウザに指示できます。
たとえば、figure要素が複数ページにまたがって印刷されるのを防ぐには、下記のように記述します。
|
1 2 3 |
figure { break-inside: avoid; } |
置換要素（img, video, canvasなど）のオーバーフローの変更
content-boxの外側を描画する置換要素（img, video, canvasなど）で、既存のover-flowプロパティを使用できるようにする変更のロールアウトが始まる予定です。object-view-boxと組み合わせることで、CSSシャドウのように適切なインクオーバーフローの動作に対応したグローやシャドウを適用した画像を作成できます。
|
1 2 3 4 |
img { overflow: clip; overflow-clip-margin: content-box; } |
参考記事:
ベースラインにアイテムを整列
last baselineを使用すると、CSS GridやFlexboxでレイアウトしたアイテムの配置をベースラインに合わせて整列できます。
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ビューポートのサイズ変更動作が変更
Chrome 108では、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。
特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。
もし108以前のリサイズ動作を使用したい場合は、metaタグのviewportに拡張機能が提供されます。interactive-widgetを記述して、必要なサイズ変更の動作をChromeに設定できます。
詳しくは、先日の参考記事をご覧ください。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content"> |
参考記事:
@supportsの拡張
CSSの@supportsにfont-tech()やfont-format()を組み合わせることで、サポートされているフォントテクノロジーやファーマットを検出し、コンテンツのプログレッシブエンハンスメントが可能になります。
たとえば、COLRv1フォントがサポートされている環境か確認するには、下記のように記述します。
|
1 2 |
@supports font-tech(color-COLRv1) { } |
tech()関数のサポート
CSS Fonts Module Level 4ではフォントのリソースを選択したり、フィルタリングするための手段が追加されています。tech()関数を使用すると、ユーザーエージェントは適切なリソースを選択します。
変更・削除された機能
Chrome 108では、以下の機能がサポート終了、変更・削除されます。
window.defaultStatus,window.defaultstatusのサポート終了- 削除された4つの機能
window.defaultStatus, window.defaultstatusのサポート終了
ブラウザのステータスバーに表示されるテキストを変更するために使用されていた機能ですが、サポートが終了し、削除されます。
削除された4つの機能
ほかにも、4つの機能がChrome 108から削除されます。
ImageDecoderInit.premultiplyAlphaの削除navigateEvent.restoreScroll()の削除navigateEvent.transitionWhile()の削除googIPv6の削除
sponsors
