【CSS】いろんな値をカスタムプロパティに定義できる「@property」とは？ #HTML

はじめに

みなさんは、「@property」を知っていますか？
「@property」はCSSの機能で、カスタムプロパティ（変数）の型や初期値を定義することが可能なアットルールです。

今までのカスタムプロパティ（変数）は、任意の値を持つ１つだけ、定義することができましたが、@propertyを駆使するとカスタムプロパティ（変数）で、いろんな値を定義することができるようになります。

この記事では、そんな@propertyの基本的な使い方とその活用例について詳しく解説します。

`@property` とは？

@property は、カスタムプロパティ（変数）の型や初期値を定義することが可能なアットルールです。

また、↓このように記載することで、プロパティ名・型・継承の有無・初期値を指定してすることができます。

sample.css

@property --name {
  syntax: "<color>";
  inherits: false;
  initial-value: #ff0000;
}

--name
- カスタムプロパティの名前を決める
syntax
- カスタムプロパティの型を決める
inherits
- カスタムプロパティを継承するかを決める
initial-value
- カスタムプロパティの初期値を設定する

syntaxについて

指定できる値

syntaxは以下の値を組み合わせて、指定することができます。

値	内容
`"<length>"`	長さを表す値
`"<number>"`	整数または小数部分のある数値
`"<percentage>"`	割合を表す値
`"<length-percentage>"`	`"<length>"`と""が取りうる値
`"<color>"`	色を表す値
`"<image>"`	画像を表す値
`"<url>"`	URLでファイルを含めるための値
`"<integer>"`	正と負の整数を表す値
`"<angle>"`	角度を表す値
`"<time>"`	時間を表す値
`"<resolution>"`	解像度を表す値
`"<transform-function>"`	要素の外見に影響する座標変換を表す値
`"<custom-ident>"`	識別子として使われるユーザー定義の任意の文字列
`"<transform-list>"`	要素の外見に影響する座標変換を表す値

記号を使うと、色々な値を指定することができる

⚪︎ +（プラス）を使って指定すると　スペース区切りの値を指定することができる

@property --padding-medium {
  syntax: "<length>+";
  inherits: false;
  initial-value: 8px 8px;
}

.sample {
    padding: var(--padding-medium);
    /* padding: 8px 8px; が指定される */
}

　　　
⚪︎ #（ハッシュ）を使って指定すると　, カンマ区切りの値を指定することができる

@property --color-white {
  syntax: "<number>#";
  inherits: false;
  initial-value: 255, 255, 255;
}

.sample {
    color: rgb(var(--color-white));
    /* color: rgb(255, 255, 255); が指定される */
}

　
⚪︎ |（パイプ）を使って指定すると　任意のルールで値を指定することができる

@property --display-show {
  syntax: "block | none";
  ...
  /* block か none を受け入れいる*/
}

@property --background-item {
  syntax: "<color> | <url>#";
  ...
  /* color と カンマ区切りのurl を受け入れいる*/
}

　
⚪︎ *（アスタリスク）を使って指定すると　全部の型を指定することができる

@property --display-show {
  syntax: "*";
  ...
}

inheritsについて

inheritsは、親要素でカスタムプロパティの値を上書きした時、子要素で指定するカスタムプロパティの値をどうするかを決める値です。

⚪︎ true の場合

@property --color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

.parent {
  /* 親要素でカスタムプロパティの値を上書き */
  --color-primary: #FFFFFF;
  color: var(--color-primary); /* #FFFFFF */
}

.children{
  /* 親要素で上書きした値が反映される */
  color: var(--color-primary); /* #FFFFFF */
}

⚪︎ false の場合

@property --color-primary {
  syntax: "<color>";
  inherits: false;
  initial-value: #000000;
}

.parent {
  /* 親要素でカスタムプロパティの値を上書き */
  --color-primary: #FFFFFF;
  color: var(--color-primary); /* #FFFFFF */
}

.children{
  /* 親要素で上書きした値は反映されない */
  color: var(--color-primary); /* #000000 */
}

ブラウザの互換性

@propertyは、まだFirefoxの安定版で実装されていません。

まとめ

この記事では、「@property」についての基本的な説明とその使用方法を解説しました。

カスタムプロパティを　@property で型定義できるのは、チームで開発することにおいて、すごく嬉しいことで、だと思います。

無限にカスタムプロパティが定義されたり、知らないところでカスタムプロパティが上書きされ、表示崩れが起きるのを防げるのを期待しています。
そのため、できるだけ早く、主要ブラウザで使えるようになる日を楽しみに待っています。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

【CSS】いろんな値をカスタムプロパティに定義できる「@property」とは？