Chrome 128で新しく追加された4つのCSSの機能、ルビのレイアウト強化、optionの推奨最小サイズなど
Post on:2024年8月22日
Chrome 128で追加された、CSSの新しい機能4つを紹介します。
今回のアップデートでは、ruby
要素によるルビのレイアウト強化、ドロップダウン内のoption
の最小サイズ、zoom
プロパティのスタンダード化など、Web制作者は要チェックです!
New in Chrome 128
Chrome 128 beta
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
はじめに
8/21にリリースされたChrome 128で4つのCSSの新しい機能が追加されました。対象となるChrome 128は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。
以下、その4つの新しいCSSの機能を紹介します。
CSSのruby-alignプロパティ
ruby
要素は日本をはじめ、東アジア言語のテキスト表示を強化します。しかし、テキストにルビを振ると、特に漢字一文字に対して長いルビなど、元の文字の長さとルビが一致しない場合があります。
CSSのruby-align
プロパティを使用すると、ルビのレンダリングに最適な方法を選択できます。ruby-align
プロパティには、以下のキーワード値を設定できます。
start
ルビを元の文字列の始点に揃えます。center
ルビを元の文字列の中央に揃えます。space-between
ルビの要素の範囲内に均等に配分して配置されますspace-around
。
ルビの要素の範囲内に均等に配分して配置されますさらに、ルビの周囲にもスペースを加えます。
ruby-align
プロパティのサポート状況は、下記の通り。
ルビが改行可能に
これまでruby
を使用したテキストのレイアウトは、あまり良いものではありませんでした。ルビが長かったり、スマホなどの小さいスクリーンでページを表示すると、状況はさらに悪化しました。
display: ruby;
の要素内で、改行ができるようなりました。
これまでは、ruby-base
とruby-text
のペアは改行できず、現在の行にその文字列のスペースがない場合は、次の行にプッシュされていました。Chrome 128ではruby-base
もruby-text
もそれぞれ複数行に改行できるようになりました。
<select>ドロップダウン内の<option>の最小サイズ
WCAGのアクセシビリティのガイドラインでは、ターゲットのサイズは少なくとも24x24ピクセルが必要であると規定されています(Target Size (Minimum) )。
この規定に準拠するため、Chrome 128では<select>
ドロップダウン内の<option>
要素がこの高さの基準を満たすようになりました。
画像: Target Size (Minimum) (Level AA)
CSSのzoomプロパティのスタンダード化
以前は非スタンダードだったCSSのzoom
プロパティの既存の実装をアップデートして、新しいスタンダードに合わせます。この変更により、さまざまなJavaScript APIが仕様に合わせて変更され(影響を受けるDOM API)、zoom
がiframe
コンテンツのドキュメントに適用され、継承された<length>
プロパティに適用されるように変更されます。以前は、継承されたfont-size
のみが変更されていました。
実際の動作は、デモページをご覧ください。
sponsors