くまだどうも、くまだです。
CSSの@propertyについてのあれこれ。
@propertyとは
@property とは、カスタムプロパティに型や初期値を設定できるルールのことです。
例えば、以下のように指定できます。
@property --test {
/* カスタムプロパティ名 */
syntax: "<color>";
/* カスタムプロパティを継承するか決める */
inherits: false;
/* カスタムプロパティの初期値 */
initial-value: blue;
}
.box {
/* 使うとき */
background-color: var(--test);
inline-size: 100px;
block-size: 100px;
}See the Pen Untitled by kuma0605 (@kuma0605) on CodePen.
syntaxの部分には、以下の値を指定できます。
| 値 | 内容 |
|---|---|
"<length>" | 長さを表す値 |
"<number>" | 整数または小数部分のある数値 |
"<percentage>" | 割合を表す値 |
"<length-percentage>" | "<length>"と””が取りうる値 |
"<color>" | 色を表す値 |
"<image>" | 画像を表す値 |
"<url>" | URLでファイルを含めるための値 |
"<integer>" | 正と負の整数を表す値 |
"<angle>" | 角度を表す値 |
"<time>" | 時間を表す値 |
"<resolution>" | 解像度を表す値 |
"<transform-function>" | 要素の外見に影響する座標変換を表す値 |
"<custom-ident>" | 識別子として使われるユーザー定義の任意の文字列 |
"<transform-list>" | 要素の外見に影響する座標変換を表す値 |
syntaxの値のところに「+」を使うことで、スペース区切りにできます。
@property --test2 {
syntax: "<length>+";
inherits: false;
initial-value: 10px 10px;
}
.box {
background-color: var(--test);
inline-size: 100px;
block-size: 100px;
/* 10px 10pxが入る */
padding: var(--test2);
}
syntaxの値のところに「#」をつけると、「,」区切りの値になります。
@property --test3 {
syntax: "<number>#";
inherits: false;
initial-value: 10, 10, 10;
}
.box {
inline-size: 100px;
block-size: 100px;
/* 10, 10,10が入る */
background-color: rgb(var(--test3));
}
普通のカスタムプロパティよりも詳しく型を設定できるという感じ。
ここまで読んでくださりありがとうございました。