- URL: アップグレードされた CSS の
attr()関数を使う - 著者: azukiazusa (@azukiazusa9)
- 公開日: 2025-02-22
いつ読むか？
- CSS の
attr()を使い始めたいとき
読書メモ
何が変わったか
attr() 関数が content プロパティ以外でも使えるようになった (Chrome v133+)。
新しい構文
attr(属性名 type(<型>), フォールバック値)実用例
/* data-color 属性から色を取得 */
.entry { color: attr(data-color type(<color>), black); }
/* data-colspan 属性からグリッド幅を取得 */
.cell { grid-column: span attr(data-colspan type(<integer>), 1); }いつ使うか
- HTML 属性から直接スタイル値を指定したいとき
- カスタムプロパティより局所的にスタイルを制御したいとき