CSS DATA LAB

data-* → CSS

HTMLの属性が、そのままCSSのプロパティ値になる。

CHECKING

LIVE ATTRIBUTE STUDIO

属性を変える。CSSが受け取る。

TYPED VALUES

HTML ATTRIBUTES

4つの値で、1枚のUIを作る

入力値はすべて、右の要素のdata-*属性へ入ります。

進捗data-progress="72" 72 NUMBER → percentage 傾きdata-tilt="-3" -3° NUMBER + deg → angle アクセントdata-accent="#7c5cff" #7C5CFF COLOR → color 角丸data-radius="28" 28px NUMBER + px → length

ATTRIBUTE SIGNAL / 063

LIVE DATA

RELEASE
READINESS

72%

ONE ATTRIBUTE.
MULTIPLE CSS VALUES.

PROGRESS72%

TILT-3deg

ACCENT#7C5CFF

RADIUS28px

TYPE GUIDE

文字列ではなく、型として読む。

NUMBER type(<number>)

計算に使える数値

ANGLE deg

数値へ単位を付ける

-3°

COLOR type(<color>)

CSSの色として解釈

LENGTH px

数値へ長さ単位を付ける

28px

PROGRESSIVE ENHANCEMENT

基本値を先に書き、対応ブラウザだけ@supports内で属性値へ切り替えます。

CSS RECIPE

属性とfallbackをコピー

VALUEtyped

FALLBACKbuilt in

STYLE JSnot required