blob: b3b8ab59cf014d91ddecfad330faa6fc71e24bd2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: inherits
slug: Web/CSS/@property/inherits
tags:
- CSS
- リファレンス
- ウェブ
- プロパティ
- Houdini
browser-compat: css.at-rules.property.inherits
translation_of: Web/CSS/@property/inherits
---
{{CSSRef}}{{SeeCompatTable}}
**`inherits`** は [CSS](/ja/docs/Web/CSS) の記述子で、 {{cssxref("@property")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用するときには必要であり、 `@property` で指定されたカスタムプロパティの登録を既定で継承するかどうかを制御します。
## 構文
```css
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
@property --property-name {
syntax: '<color>';
inherits: true;
initial-value: #c0ffee;
}
```
## 値
- `true`
- : このプロパティは既定で継承されます。
- `false`
- : このプロパティは既定で継承されません。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
`--my-color` {{cssxref('--*', 'カスタムプロパティ')}}に色としての型チェックと、既定値、そして値が継承されないことを追加します。
[CSS](/ja/docs/Web/CSS) の {{cssxref('@property')}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用すると次のようになります。
```css
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}
```
[JavaScript](/ja/docs/Web/JavaScript) の {{domxref('CSS.registerProperty')}} を使用すると次のようになります。
```js
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [CSS プロパティと値 API](/ja/docs/Web/API/CSS_Properties_and_Values_API)
- [CSS 描画 API](/ja/docs/Web/API/CSS_Painting_API)
- [CSS 型付きオブジェクトモデル](/ja/docs/Web/API/CSS_Typed_OM_API)
- [CSS Houdini](/ja/docs/Web/Guide/Houdini)
|
