11月12日、CSSワーキンググループは「CSS Values and Units Module Level 5」の更新版を公開した。このモジュールはCSSの値のタイプや関数、そして値定義の構文を規定するもので、今回は「CSS Values and Units Level 4」に基づいた差分仕様としてドラフトされている。

本更新により、以下の新しい機能や記法が追加された。

1. if() 関数

if()関数は、条件に基づいてCSSの値を切り替える新しい機能だ。特定の条件が真のときにのみ指定したスタイルが適用されるようにできるため、柔軟なデザインが可能である。

サンプルコード：

.element {
    color: if(5 > 3, red, blue); /* 条件が真なら赤、偽なら青 */
}

解説：

この例では、「5 > 3」という条件が真であるため、.elementのテキストカラーは赤になる。if()関数を用いることで、メディアクエリやJavaScriptを使わずにCSS内で条件分岐が可能となる。

2. inherit() 関数

inherit()関数は、特定のプロパティ値を親要素から継承するための新しい機能である。この機能により、スタイルを一貫して継承することが可能となり、継承の制御が容易になる。

サンプルコード：

.child {
    font-size: inherit(font-size); /* 親のフォントサイズを継承 */
    color: inherit(color);         /* 親の色を継承 */
}

解説：

この例では、.childクラスの要素が親要素のfont-sizeとcolorプロパティの値を継承する。通常のinheritキーワードよりも制御がしやすく、複数のプロパティに適用しやすい利点がある。

3. attr() 関数の再設計

attr()関数は、HTML属性の値をCSS内で取得するためのものだが、今回のアップデートで柔軟性が向上している。特に、デフォルト値の指定や型変換のサポートが強化されている。

サンプルコード：

.button::before {
    content: attr(data-label, string); /* data-label属性の文字列を表示 */
    font-size: attr(data-size px, 16px); /* data-size属性があればそのサイズを使用し、無ければ16px */
}

解説：

この例では、data-label属性からテキストを取得し、::before疑似要素に表示している。また、data-size属性が設定されていない場合、フォントサイズは16pxにデフォルト設定される。attr()の柔軟なデフォルト値や型指定により、CSSのみでの属性管理が強化された。

4. ブール式マルチプライヤー記法 <boolean-expr[]>

<boolean-expr[]>はCSSの値定義構文に新たに導入された記法で、ブール式を用いて柔軟な条件指定が可能となる。

サンプルコード：

.container {
    padding: (1px 2px)[width > 500px]; /* 500px以上のときに適用 */
    margin: (10px 20px)[height > 300px]; /* 高さが300pxを超える場合に適用 */
}

解説：

この例では、条件に基づいてpaddingとmarginの値を切り替えることができる。この新しい記法により、CSSの表現力が向上し、特定の条件下でのみスタイルを適用する操作が可能となる。

新機能により、CSSの柔軟性と表現力が大幅に向上し、これまでJavaScriptなどで実現していた条件分岐がCSS内で可能になっている。これにより、コードの保守性が向上し、UI設計がさらに効率化されると期待されている。

このドラフトはまだ安定しておらず、各機能は設計段階にあるため、フィードバックに応じて大きく変更される可能性がある。フィードバックはGitHubのIssueページや、アーカイブされる公開メーリングリストwww-style@w3.org宛てに送ることが推奨されている。

詳細はCSS WG Blog – Updates to CSS Values and Units Level 5を参照していただきたい。