• Top
• Category
• Contact
• About

サイト構築 -制作

2

sponsorsr

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

New in Chrome 128
Chrome 128 beta

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• はじめに
• CSSのruby-alignプロパティ
• ルビが改行可能に
• <select>ドロップダウン内の<option>の最小サイズ
• CSSのzoomプロパティのスタンダード化

はじめに

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

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のみが変更されていました。

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

デモページ

Related Posts

coliss