Chrome 127で新しく追加された3つのCSSの機能、使用するフォントに関係なく読みやすくするなど

Post on:2024年7月29日

はじめに

7/24にリリースされたChrome 127で3つのCSSの新しい機能が追加されました。対象となるChrome 127は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その3つの新しいCSSの機能を紹介します。

font-size-adjustプロパティ

第一選択のフォントファミリが使用できず、フォールバックのフォントが使用され、そのアスペクト値が異なる場合、文字の読みやすさが低下する可能性があります。

CSSのfont-size-adjustプロパティを使用すると、フォールバックのフォントサイズを調整して、アスペクト値（小文字の高さをフォントサイズで割った値）の一貫性を保つことができます。これにより使用するフォントに関係なく、テキストが同じように表示されます。

font-size-adjustプロパティは、Safari 17, Firefox 118からすでにサポートされており（CanIUse）、Chrome 127ではフォントメトリックと値を渡す2つの値の構文がサポートされます。

.text{
  font-size-adjust: ex-height 0.5;
}

.text{

font-size-adjust: ex-height 0.5;

}

ex-heightはデフォルト値で小文字xの高さ、他にもcap-height, ch-width, ic-width, ic-heightが設定できます。

さらに詳しくは、下記をご覧ください。

生成コンテンツ内の複数引数の代替テキスト

CSSのcontentプロパティを使用すると、下記のようにアクセシビリティ用の代替テキストを設定できます。

.has-before-content::before {
    content: url("cat.jpg") / "かわいいネコ";
  }

.has-before-content::before {

content: url("cat.jpg") / "かわいいネコ";

}

上記のCSSでは、代替テキストが単一の文字列で記述されていますが、これはChromeはすでにサポートしています。Chrome 127では代替テキストに任意の数の要素を設定できるようになり、文字列に加えてattr()関数も設定できます。

.has-before-content::before {
  content: url("cat.jpg") / "かわいい " attr(data-animal);
}

.has-before-content::before {

content: url("cat.jpg") / "かわいい " attr(data-animal);

}

さらに詳しくは、下記をご覧ください。

Feature: Multi-argument alt text in CSS Generated Content

iframeでのビュー遷移のサポート

View Transitions APIはChrome 111でサポートされた新機能ですが、Chrome 127以降ではメインフレームと同じオリジンのiframeで同じドキュメントの同時ビュー遷移が利用できるようになります。

これまではメインフレームが同時に遷移を実行している場合、同じオリジンのiframeでdocument.startViewTransitionでビュー遷移を実行することはできませんでした。iframeの遷移は自動的にスキップされていました。しかし、Chrome 127以降は遷移が実行されます。

iframeでの同じオリジンのクロスドキュメントのナビゲーションでのビュー遷移もサポートされます。

View Transitions APIがどういうものなのかは、下記をご覧ください。