• Top
• Category
• Contact
• About

サイト構築 -制作

86

sponsorsr

Chrome 137で追加された、CSSの新しい機能7個を紹介します。
今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！

ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。

New in Chrome 137
Chrome 137 beta

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

• はじめに
• if else文の条件付きでCSSの値を設定できるif()関数
• reading-flowとreading-orderプロパティ
• offset-pathでのshape()関数
• SVGSVGElementのtransform属性をサポート
• SVGの<use>要素
• フォーム要素にOSのアクセントカラー
• view-transitionプロパティのmatch-element値

はじめに

5/28にリリースされたChrome 137で7個のCSSの新しい機能が追加されました。対象となるChrome 137は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その7個の新しいCSSの機能を紹介します。

if else文の条件付きでCSSの値を設定できるif()関数

CSSでif()関数が使用できるようになり、if else文の条件付きでCSSの値を設定できるようになりました。この関数はセミコロンで区切られた一連の条件と値のペアが基本書式です。

CSSのif()関数は各条件を順番に評価し、最初にtrueと評価された条件に関連付けられた価を返します。いずれの条件もtrueと評価されなかった場合、関数は空のトークンストリームを返します。これにより、複雑なロジックをシンプルかつ簡潔に記述することができます。

たとえば、下記のHTMLがあるとします。

if()関数で条件付きにし、.darkの場合はblackを適用し、それ以外（else）はwhiteを適用します。

CSSのif()関数は、可能性の塊です！
light-dark()関数をカラー値以外でも機能させたり、コンテナクエリを使用したカスタム関数など、今後いろいろな使い方がでてくると思います。

CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります

reading-flowとreading-orderプロパティ

reading-flowプロパティは、CSS GridやFlexboxをはじめ、ブロックレイアウト内の要素がアクセシビリティツールに表示される順序とキーボードナビゲーションでtabキーでフォーカスされる順序を制御できます。これにより長年問題となっていた、tabによる順序と配置された順序が異なるという問題が解決されます。

reading-flowプロパティに設定できる値は、下記の通りです。

• normal
• flex-visual
• flex-flow
• grid-rows
• grid-columns
• grid-order
• source-order

reading-flowプロパティの値は1つを設定でき、デフォルトはnormalです。これにより要素の順序はDOMの順序が維持されます。Flexコンテナの場合にはflex-visualまたはflex-flowを設定し、gridコンテナの場合にはgrid-rowsまたはgrid-columnまたはgrid-orderを設定します。

reading-orderプロパティは、読み取りフローコンテナ内の順序を手動で上書きできます。設定できる値は整数値で、デフォルト値は0です。

offset-pathでのshape()関数

shape()関数はすでにclip-pathでサポートされており、レスポンシブなクリッピングを可能にします。offset-pathでもサポートすることで、同じ種類のシェイプが使用できるようになります。

SVGSVGElementのtransform属性をサポート

transform属性がサポートされたことで、<svg>ルート要素のtranform属性を用いて変形プロパティ（拡大縮小・回転・平行移動・傾きなど）を直接適用できるようになりました。この機能強化によってSVGの座標系全体やコンテンツ全体を操作できるようになり、レスポンシブでインタラクティブなベクターグラフィックをより柔軟に作成できるようになります。

このtransform属性をサポートすることで、追加のラッパー要素や複雑なCSSの回避策を必要とせずに、SVG要素を変換できるため、スケーラブルでアニメーション化されたWebグラフィックを構築するプロセスが簡単になります。

SVGの<use>要素

この機能は、参照要件を緩和することでSVGの<use>要素の効率化を図ります。現在、SVGドキュメント内のフラグメントを明示的に参照する必要があります。フラグメントIDが与えられない場合、<use>要素はターゲットを解決できず、レンダリングも参照もされません。

この機能により、フラグメントを省略したり、外部SVGファイル名のみを与えるだけで自動的にルート要素が参照されるようになります。ルートにIDを割り当てるためだけに参照先のドキュメントを変更する必要がなくなります。このような手作業による作業が簡素化され、作業効率が向上します。

フォーム要素にOSのアクセントカラー

この機能により、フォーム要素にOSのアクセントカラーを使用できるようになりました。accent-colorプロパティを使用すると、チェックボックス・ラジオボタン・プログレスバーなどのフォーム要素にユーザーが使用しているOSで定義されたアクセントカラーが自動的に適用されます。この機能は2021年からmacOSでサポートされており、現在はWindowsとChromeOSでもサポートされました。

view-transitionプロパティのmatch-element値

view-transitionプロパティのmatch-element値は要素のidに基づいて一意のidを生成し、この要素に対しては変更されません。これは要素が移動して、ビュー遷移でアニメーション化させたいシングルページで使用されます。

Related Posts

coliss