Chrome 128で新しく追加された4つのCSSの機能、ルビのレイアウト強化、optionの推奨最小サイズなど

Chrome 128で追加された、CSSの新しい機能4つを紹介します。
今回のアップデートでは、ruby要素によるルビのレイアウト強化、ドロップダウン内のoptionの最小サイズ、zoomプロパティのスタンダード化など、Web制作者は要チェックです!

Chrome 128で新しく追加された4つのCSSの機能

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-alignプロパティのサポートブラウザ

ruby-alignプロパティのサポートブラウザ

ルビが改行可能に

これまでrubyを使用したテキストのレイアウトは、あまり良いものではありませんでした。ルビが長かったり、スマホなどの小さいスクリーンでページを表示すると、状況はさらに悪化しました。

display: ruby;の要素内で、改行ができるようなりました。

これまでは、ruby-baseruby-textのペアは改行できず、現在の行にその文字列のスペースがない場合は、次の行にプッシュされていました。Chrome 128ではruby-baseruby-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)、zoomiframeコンテンツのドキュメントに適用され、継承された<length>プロパティに適用されるように変更されます。以前は、継承されたfont-sizeのみが変更されていました。

実際の動作は、デモページをご覧ください。

サイトのキャプチャ

デモページ

sponsors

top of page

©2024 coliss