From 3b3a1391c8d872a291d889843d0ed2e2be879c5e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Mar 2022 22:15:38 +0900 Subject: 2022/02/18 時点の英語版に基づき新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@property/index.md | 86 +++++++++++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 files/ja/web/css/@property/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/@property/index.md b/files/ja/web/css/@property/index.md new file mode 100644 index 0000000000..dfd741e112 --- /dev/null +++ b/files/ja/web/css/@property/index.md @@ -0,0 +1,86 @@ +--- +title: '@property' +slug: Web/CSS/@property +tags: + - アットルール + - CSS + - リファレンス + - ウェブ + - プロパティ + - Houdini +browser-compat: css.at-rules.property +--- +{{CSSRef}}{{SeeCompatTable}} + +**`@property`** は [CSS](/ja/docs/Web/CSS) の{{cssxref("at-rule", "アットルール", "", 1)}}で、 API の [CSS Houdini](/ja/docs/Web/Guide/Houdini) の傘下にあるものです。開発者が明示的に {{cssxref('--*', 'CSS custom properties')}} を定義し、プロパティ型のチェック、既定値の設定、プロパティが値を継承するかどうかの定義ができるようになっています。 + +`property` ルールは、 JS を実行することなく、スタイルシートの中で直接カスタムプロパティの登録を表します。有効な `@property` ルールは、あたかも {{domxref('CSS.registerProperty')}} が同等のパラメータで呼び出されたかのように、登録されたカスタムプロパティを生成します。 + +## 構文 + +```css +@property --property-name { + syntax: ''; + inherits: false; + initial-value: #c0ffee; +} +``` + +### 記述子 + +- {{cssxref("@property/syntax","syntax")}} + - : プロパティに許容される構文を記述します。 +- {{cssxref("@property/inherits","inherits")}} + - : `property` で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。 +- {{cssxref("@property/initial-value","initial-value")}} + - : プロパティの初期値を設定します。 + +有効な `@property` ルールはカスタムプロパティの登録を表し、プロパティ名はこのルールに先行するものをシリアライズしたものです。 + +`@property` ルールは {{cssxref("@property/syntax","syntax")}} および {{cssxref("@property/inherits","inherits")}} 記述子を必要とします。どちらかがない場合は、ルール全体が無効となり、無視されます。 {{cssxref("@property/initial-value","initial-value")}} 記述子は構文が全称構文定義である場合のみ省略可能で、それ以外の場合は必須です。その場合、存在しないとルール全体が無効となり、無視されます。 + +未知の記述子は無効で無視されますが、 `@property` ルールは無効になりません。 + +## 例 + +`--my-color` {{cssxref('--*', 'カスタムプロパティ')}}に色としての型チェックと、既定値、さらに値が継承されないことを追加します。 + +[CSS](/ja/docs/Web/CSS) の {{cssxref('@property')}} [アットルール]](/ja/docs/Web/CSS/At-rule)を使用する場合は次のようになります。 + +```css +@property --my-color { + syntax: ''; + inherits: false; + initial-value: #c0ffee; +} +``` + +[JavaScript](/ja/docs/Web/JavaScript) の {{domxref('CSS.registerProperty')}} を使用する場合は次のようになります。 + +```js +window.CSS.registerProperty({ + name: '--my-color', + syntax: '', + inherits: false, + initialValue: '#c0ffee', +}); +``` + +## 形式文法 + +{{csssyntax}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS Properties and Values API](/ja/docs/Web/API/CSS_Properties_and_Values_API) +- [CSS Painting API](/ja/docs/Web/API/CSS_Painting_API) +- [CSS Typed Object Model](/ja/docs/Web/API/CSS_Typed_OM_API) +- [CSS Houdini](/ja/docs/Web/Guide/Houdini) -- cgit v1.2.3-54-g00ecf