CSSのcalc()がさらに便利になるなど、17周年を迎えたChrome 140ではCSSの新機能がかなり追加されています
Post on:2025年9月8日
sponsorsr
9/2にChromeは17周年を迎えました、時が経つのは早いですね。先日アップデートされたChrome 140に追加された、CSSの新しい機能を紹介します。
今回のアップデートではCSSの新機能がかなりの数で追加されており、calc()で使える計算式が増えたり、カスタムハイライトが使えるようになったり、バリアブルフォント用のプロパティが増えたりなど、Web制作者は要チェックです！
New in Chrome 140
Chrome 140 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- calc()で使える計算式が増えます
- CSSのscroll-target-groupプロパティ
- contentプロパティの代替テキスト
- ビュー遷移の疑似ツリー
- ネストされたビュー遷移
- overscroll-behaviorはルート継承に
- ScrollIntoViewコンテナオプション
- CSSのcaret-animationプロパティ
- カスタムハイライト
- バリアブルフォントを設定するプロパティ
はじめに
9/3にリリースされたChrome 140で10個のCSSの新しい機能が追加されました。対象となるChrome 140は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その10個の新しいCSSの機能を紹介します。
calc()で使える計算式が増えます
calc()などに使用する計算式は、加算・減算では異なる単位を使用できます。
|
1 2 3 |
div{ width: calc(5px + 1em); } |
しかし、乗算や除算がとれる引数は制限されており、1px * 1emのような計算式はできませんでした。Chrome 140からは異なる単位を使用した型付きの計算が可能になります。
|
1 2 3 4 5 6 |
div{ width: calc(10em / 1px); } div{ width: calc(20% / 0.5em * 1px); } |
calc(10em / 1px)やcalc(20% / 0.5em * 1px)のような数式をCSSで記述できます。この計算式は特にフォントサイズなどに便利で、型付きの値を型なしの値に変換し、数値を受け入れるプロパティを再利用できるからです。
現在単位情報を取り除くにはtan(atan2(length_value, 1px))というトリックを使用する必要があります。型付きを使用すれば、(length_value / 1px)とするだけで単位のない値を取得できます。
また、単位のない値に別の型を掛け合わせるといった用途にも使用できます。たとえば、ピクセルから度への変換も可能です。
仕様はCSS Values and Units Module Level 4をご覧ください。
CSSのscroll-target-groupプロパティ
CSSのscroll-target-groupプロパティは、要素がスクロールマーカーグループコンテナであるかどうかを指定します。値は下記の2つです。
none: 要素はスクロールマーカーグループコンテナを確立しません。auto: 要素はスクロールマーカーグループコンテナを確立し、このコンテナがもっとも近い祖先スクロールマーカーグループコンテナであるすべてのスクロールマーカー要素を含むスクロールマーカーグループを形成します。
スクロールマーカーグループコンテナを確立すると、そのコンテナ内にあるフラグメント識別子を持つアンカー要素は、::scroll-marker疑似要素として機能します。スクロールターゲットが現在表示されているアンカー要素は:target-current疑似クラスを使用してスタイルを設定できます。
contentプロパティの代替テキスト
contentプロパティの代替テキストで、counter()とcounters()を使用できるようになりました。この機能のおかげで、より有益な情報を提供でき、アクセシビリティが向上します。
ビュー遷移の疑似ツリー
ビュー遷移の疑似ツリーで、より多くのアニメーションプロパティを継承できるようになりました。
animation-delayanimation-timing-functionanimation-iteration-countanimation-directionanimation-play-state
ネストされたビュー遷移
ビュー遷移はフラットな構造ではなく、ネストされた疑似要素ツリーを生成できるようになりました。これにより、ビュー遷移が元の要素や視覚的な意図に沿ったものになります。クリッピング、ネストされた3D変形、不透明度、マスク、フィルターなどエフェクトの適切な適用が可能になります。
overscroll-behaviorはルート継承に
CSS working groupは、bodyからビューポートへプロパティを継承しないことを決定しました。その代わりに、ビューポートのプロパティはルート要素（html）から継承されます。その決定により、overscroll-behaviorもルート要素から継承されるべきです。
しかし、Chromeには長年の課題がありました。overscroll-behaviorはルート要素ではなく、bodyから継承されます。この動作は他のブラウザと互換性がありません。これが変更され、これからは仕様に準拠し、他のブラウザと同様に、ルート要素から継承されます。
ScrollIntoViewコンテナオプション
ScrollIntoViewOptions コンテナオプションを使用すると、デベロッパーはもっとも近い祖先スクロールコンテナのみをスクロールするscrollIntoView操作を実行できます。たとえば、下記のコードはターゲットのスクロールコンテナのみをスクロールしてターゲットをビューポートに表示しますが、すべてのスクロールコンテナをビューポート内にスクロールするわけではありません。
|
1 |
target.scrollIntoView({container: 'nearest'}); |
CSSのcaret-animationプロパティ
Chromiumではすでにcaret-colorプロパティをサポートしています。これは文字が入力できる位置を示す可視マーカー（入力キャレット）の色を設定できるプロパティです。
caret-colorプロパティでは、autoとmanualの2つの値を設定できます。autoはブラウザのデフォルト（点滅）で、manualはキャレットのアニメーションを制御できます。さらに点滅やフラッシュするビジュアルに不快感を覚えるユーザーは、ユーザースタイルシートでこの点滅を無効にすることができます。
カスタムハイライト
highlightsFromPoint APTを使用すると、デベロッパーはカスタムハイライトを操作できます。このAPIはドキュメント内の特定のポイントに点在するハイライトを検出します。複数のハイライトを重ねたり、シャドウDOM内に存在する複雑なWeb機能にも役立ちます。
たとえば、ハイライトされた領域でのユーザークリックやホバーイベントに反応して、ツールチップやコンテキストメニューを表示するといったインタラクティブな機能を備えることもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
:root::highlight(highlight1) { background-color: rgb(255 255 0 / 0.5); } :root::highlight(highlight2) { background-color: rgb(255 0 0 / 0.5); } :root::highlight(highlight3) { background-color: rgb(0 0 255 / 0.75); color: white; } |
バリアブルフォントを設定するプロパティ
font-variation-settingsプロパティを使用すると、フォントの太さ・幅・傾き・その他の軸を設定できます。ただし、Chromiumベースのブラウザでは、@font-face宣言内でこのプロパティがサポートされていません。
この機能はCSS Fonts Level 4で定義されているfont-variation-settingsの文字列ベースの構文をサポートします。無効または認識されない機能タグは無視されます。バイナリ形式や非標準形式はサポートされていません。可変フォントはパフォーマンスとタイポグラフィの柔軟性の両方の観点から広く採用されるようになっています。Chroniumではこの記述子をサポートすることで、制御性が向上され、重複が削減され、よりスケラーブルでモダンなWebタイポグラフィのアプローチがサポートされます。
sponsors
