編集

Chrome 127

#Chrome #CSS

2024 年 7 月 24 日に Chrome 127 がリリースされた。

https://developer.chrome.com/blog/new-in-chrome-127

#CSS font-size-adjust

CSS のfont-size-adjustプロパティがサポートされた。 これに伴い、font-size-adjustプロパティは Baseline に追加された。

フォントは、アスペクト比によって同じ font-size であっても、大きく異なる印象を与える。 ここで、アスペクト比とは、小文字の高さをフォントサイズで割った値である。

Text using 14px Verdana font appears larger than text using Times font.

Text using 14px Times font appears smaller than text using Verdana font.

font-size-adjustプロパティは、このフォントのアスペクト比を調整するために使用される。

次のように利用する。

css
.font-a {
  font-size: 14px;
  font-family: Verdana;
  font-size-adjust: 0.545;
}
.font-b {
  font-size: 14px;
  font-family: Times;
  font-size-adjust: 0.545;
}

Text using 14px Verdana font appears larger than text using Times font.

Text using 14px Times font appears smaller than text using Verdana font.

#CSS content with alt text

contentプロパティを利用して画像を表示する際に、画像の代替テキストを指定できるようになった。

html
<style>
  .has-before-content::before {
    content: url("cat.jpg") / "A cute" attr(data-animal);
  }
</style>
<div class="has-before-content" data-animal="cat"></div>

#Keyboard focusable scroll containers

スクロールコンテナにキーボードでフォーカスするようになる。 以前でもtabindexを 0 以上に設定するか、スクロールコンテナ内にフォーカス可能な子要素がある場合、スクロールコンテナにフォーカスできたが、今後はどちらでもない場合でもフォーカスされる。

start content

end content

この挙動は Chrome 127 以降、徐々に展開されていく。

同意書などをスクロールコンテナ内に表示するサービスでは、開発者が十分にアクセシビリティに配慮していない場合、キーボードのみによる操作が困難であった。しかし、今後は開発者が意識しなくても、スクロールコンテナにフォーカスが当たるため、アクセシビリティが向上する。

編集