Chrome 128で新しく追加された4つのCSSの機能、ルビのレイアウト強化、optionの推奨最小サイズなど
Post on:2024年8月22日
sponsors
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
