CSS関数で属性セレクタの値を取得する 💻 - みかづきブログ・カスタム

CSS関数のattr()をつかえば、属性セレクタの値を取得することができます。
昨日、属性セレクタを調べているときに知りました。

<div data-text="Ya-Ha-!"></div>

[data-text]:before {
  content: attr(data-text);
}

と書けば、

[data-text]:before {
  content: 'Ya-Ha-!';
}

と評価されるようです。これは面白い。

仕様をみた感じ、pxとして使ったり、colorとして使ったりできるようなので、

[data-size] {
  width: attr(data-width px);
  height: attr(data-width px);
}

という感じで、data属性でサイズを指定したり、

[data-bg-color] {
  backgroud-color: attr(data-bg-color color);
}

という感じで、data属性で背景色を指定したりできる可能性があるのですが、残念ながら、pxとかcolorはまだ実験段階で、実装されているブラウザはないようです。

なので、当面はcontentに渡すぐらいしか使い道がないのかもしれません。

一応、デモページには、pxやcolorを含めて載せているので、定期的にブラウザに実装されたかを観察しようと思います。