Web制作者は要チェック！ Chrome 136で新しく追加された6個のCSSの機能
Post on:2025年5月7日
sponsors
先日アップデートされたChrome 136に追加された、CSSの新しい機能を紹介します。今回のアップデートでは:visitedの仕様が変わり、セキュリティの向上とともに訪問済みリンクのスタイル適用も変わります。また、dynamic-range-limitなどの新しいプロパティもサポートされるなど、Web制作者は要チェックです！
ちなみに、先日紹介したCSSのif()関数は次のChrome 137（今月末頃）に実装される予定です。
New in Chrome 136
Chrome 136 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
- はじめに
- dynamic-range-limitプロパティ
- 筆記体のレタースペーシングを無視
- 訪問済みリンク履歴の分割
- string attr()をraw-stringに改名
- 型に依存しないvar()のフォールバック
- print-color-adjustはプレフィックスなしに
はじめに
4/30にリリースされたChrome 136で6個のCSSの新しい機能が追加されました。対象となるChrome 136は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その6個の新しいCSSの機能を紹介します。
dynamic-range-limitプロパティ
HDRコンテンツの最大輝度を制限することができます。
dynamic-range-limitのサポートブラウザは、下記の通りです。
筆記体のレタースペーシングを無視
この新機能により、筆記体のレタースペーシングを無視するロジックが追加されます。デベロッパーが仕様に従ってレタースペーシングを指定した場合でも、レタースペーシングが単語を区切らないようにします。
訪問済みリンク履歴の分割
ユーザーの閲覧履歴の漏えいを防ぐため、アンカー要素はトップレベルのサイトとフレームのオリジンから以前にクリックされたことがある場合にのみ:visitedとしてスタイルされます。このサイトとフレームで過去にクリックされたことがあるリンクのみスタイルを設定することで、訪問済みリンク（:visited）のスタイル設定情報を取得するために開発されてきた多くのサイドチャネル攻撃は、最早サイトに対してユーザーに関する新しい情報を提供しないため、時代遅れになります。
ただし、自己リンクには例外があり、サイト自身のページへのリンクはこのトップレベルのサイトとフレームのオリジンで以前にクリックされていなくても:visitedとしてスタイル設定できます。この例外はトップレベルとフレームと同じオリジンのサブフレームでのみ有効です。サイトはユーザーがどのサブページにアクセスしたかを既に知っているため、プライバシーの利点は依然として得られ、新しい情報は公開されません。これはユーザーエクスペリエンスを向上させるコミュニティからの要求による例外です。
詳しくは、先日の記事をご覧ください。
CSSの:visitedの仕様が変わる！ 訪問済みリンクの履歴が分割される機能がChrome 136に実装されます
string attr()をraw-stringに改名
CSS Working Groupは、string attr()型をraw-stringに変更することを決議しました（参考: 議事録）。これはattr(foo type('string'))とattr(foo string)の区別が分かりにくいというのが所以です。
これを受けて、Chromeはattr()構文を変更し、attr(data-foo string)はattr(data-foo raw-string)になります。
進化したattr()については、先日の記事をご覧ください。
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
型に依存しないvar()のフォールバック
var()関数のフォールバック部分は、参照されるカスタムプロパティの型に対して検証されません。
print-color-adjustはプレフィックスなしに
print-color-adjustプロパティを使用すると、印刷されるWebページの色を調整できます。これはChromeですでにサポートされている-webkit-print-color-adjustと同じ機能ですが、名称が標準化されます。ただし、-webkitのプレフィックス付きバージョンは削除されません。
sponsors
