【ITニュース解説】Using attr() with types

Webページは、HTMLと呼ばれる文書でページの骨格や内容が記述され、CSSと呼ばれるスタイルシートでその見た目が装飾されています。HTMLが「Webページの構造」を作る一方で、CSSは「Webページの見た目」を整える役割を担っています。この二つの言語は密接に連携しながら、私たちが目にするWebサイトを作り上げています。今回紹介する新機能は、このHTMLとCSSの連携をさらに強力にするものです。

これまでもCSSにはattr()という便利な関数がありました。これは、HTML要素に記述された「属性」の値を、CSSで読み込んで利用するためのものです。例えば、HTMLの<div>タグにdata-message="こんにちは"という属性があれば、CSSのattr(data-message)を使うことで、「こんにちは」という文字列をCSSの中から参照できました。しかし、このattr()関数には大きな制約がありました。一つは、主に::beforeや::afterといった「疑似要素」のcontentプロパティ、つまり要素の前後に追加するテキストのような部分でしか使えなかったこと。もう一つは、属性値が常に「文字列」として扱われるため、色の値や長さの値を直接CSSプロパティに適用することが非常に難しかったことです。たとえば、data-width="100px"という属性があったとしても、width: attr(data-width);とCSSに書いても、CSSはそれを有効な長さの値として認識できず、スタイルが適用されませんでした。CSSは「文字列」ではなく「長さ」として値が必要だったからです。

今回、Google Chromeが新たにサポートした「type()」という記法は、この長年の課題を解決する画期的な機能です。これはattr()関数と組み合わせてattr(属性名 type(<データ型>))のように使用します。このtype()記法の最大の目的は、HTML属性の値をCSSで読み込む際に、それが「どのような種類のデータ（データ型）」であるかをCSSに明示的に伝えることにあります。

具体例を見てみましょう。

Copy
1div {
2  color: attr(data-color type(<color>));
3}

そしてHTML側では、

Copy
1<div data-color="red">I am red</div>

のように記述します。このCSSの記述は、「div要素のdata-color属性から値を読み取り、それを<color>（色）というデータ型として解釈し、その結果をcolorプロパティ（文字色を指定するプロパティ）に適用しなさい」という意味になります。data-color属性の値が"red"であれば、このdiv要素の文字色は赤色になります。これまでは、data-color="red"という属性があっても、CSSがそれを「色」として認識できなかったため、このような直接的な使い方はできませんでした。

このtype()記法がもたらす「大きな利点」は、多岐にわたります。最も重要なのは、HTML属性の値を、もはや単なる文字列としてではなく、CSSが解釈できる様々なデータ型（色、数値、長さ、時間など）として直接扱えるようになったことです。これにより、従来のattr()の制約であった「疑似要素のcontentプロパティでしか使えない」という限界がなくなり、任意のHTML要素の、任意のCSSプロパティに、HTML属性の値を直接適用できるようになります。

例えば、要素の幅をdata-width="200px"で指定したり、フォントサイズをdata-font-size="2em"で指定したり、背景画像をdata-image="url(image.png)"で指定したりといったことが、CSSだけで可能になります。HTMLにデータを持たせ、CSSでそのデータを型付きで利用することで、Web開発はより柔軟で動的なものになります。例えば、JavaScriptを使わずに、HTMLの属性値を変更するだけで要素の見た目を変化させるといったことも、よりシンプルに実現できるようになります。

type()関数で指定できるデータ型は、CSSの @property ルール（カスタムプロパティに型を定義する機能）で使われるものと基本的に同じです。代表的なものとしては、以下のような型があります。

• <angle>: 角度（例: 90deg）
• <color>: 色（例: red, #FF0000, rgb(255, 0, 0)）
• <image>: 画像（例: url(image.png)）
• <integer>: 整数（例: 10, -5）
• <length>: 長さ（例: 10px, 2em, 5vw）
• <length-percentage>: 長さまたはパーセンテージ（例: 50%, 100px）
• <number>: 数値（小数点を含む）（例: 1.5, 3.14）
• <percentage>: パーセンテージ（例: 25%）
• <resolution>: 解像度（例: 2dppx）
• <string>: 文字列（これまでattr()がデフォルトで扱っていた型）
• <time>: 時間（例: 2s, 500ms）
• <transform-function>: 変形関数（例: rotate(45deg), scale(1.2)）

ただし、セキュリティ上の理由から<url>（URL）だけは除外されています。これは、属性値から悪意のあるURLが注入され、予期しない動作を引き起こすことを防ぐための重要な配慮です。

この機能は、Web開発者にとって長く待ち望まれてきたものです。これまでHTML属性の値をCSSで利用したい場合、JavaScriptを使ってその値を読み取り、CSSプロパティに適用するか、あるいはCSSのカスタムプロパティ（CSS変数）をHTML要素にインラインスタイルとして記述するという、いわゆる「ハック的」な解決策がしばしば用いられていました。しかし、attr()のtype()記法を使えば、そのような回りくどい方法が不要になり、より直感的で「クリーン」なコードを書けるようになります。これは開発の効率性を高め、コードの可読性とメンテナンス性を向上させる大きな一歩と言えるでしょう。

現時点ではChromeが先行してこの機能を実装していますが、他の主要なWebブラウザが広くサポートするにはまだ時間がかかる見込みです。しかし、この機能がWeb標準として普及すれば、Web開発の現場に大きな変化をもたらし、より表現豊かで柔軟なWebサイトの構築が可能になることは間違いありません。システムエンジニアを目指す皆さんにとって、このようなWeb技術の進化は、今後の開発手法やツールの選択に影響を与える重要なトレンドとして、常に注目していくべきでしょう。HTMLとCSSの連携が強化されることで、Webデザインやインタラクションの可能性はさらに広がっていきます。