all
===

**`all`** は CSS の一括指定プロパティで、要素のすべてのプロパティを (`unicode-bidi`、`direction`、 CSS カスタムプロパティを除いて) 初期化します。プロパティは初期値または継承値、または他のカスケードレイヤーまたはスタイルシートに由来して指定した値に設定される可能性があります。

試してみましょう
--------

構成要素のプロパティ
----------

このプロパティは、`unicode-bidi`、`direction`、カスタムプロパティを除くすべての CSS プロパティの一括指定です。

構文
--


```css
/\* グローバル値 \*/
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;
```


`all` プロパティは、 CSS のグローバルキーワード値のうちの一つで定義します。なお、これらの値は `unicode-bidi` および `direction` プロパティには影響しません。

### 値

`initial`

その要素のすべてのプロパティを初期値に変更するべきであることを指定します。

`inherit`

その要素のすべてのプロパティを継承値に変更するべきであることを指定します。

`unset`

その要素のすべてのプロパティを、既定値が inherit のものは継承値に、そうでなければ初期値に変更するべきであることを指定します。

`revert`

宣言が所属するスタイルシートの出所に応じて動作を指定します。

* 作者オリジンに所属するルールの場合、 `revert` の値でカスケードをユーザーのレベルまでロールバックし、その要素の指定値は、作者レベルのルールが指定されていないかのように計算されます。 `revert` の用途では、作者オリジンはオーバーライドおよびアニメーションのオリジンも含まれます。
* ユーザーオリジンに所属するルールの場合、 `revert` の値でカスケードをユーザーエージェントレベルまでロールバックし、その要素の指定値は、作者レベルまたはユーザーレベルのルールが指定されていないかのように計算されます。
* ユーザーエージェントオリジンでは、 `revert` の値は `unset` と同様に動作します。

`revert-layer`

その要素のすべてのプロパティを、直前のカスケードレイヤーが存在すれば、そこまでカスケードをロールバックすることを指定します。 他にカスケードレイヤーが存在しない場合、要素のプロパティは、現在のレイヤーに一致するルールが存在する場合はそのルール、または直前のスタイルオリジンにロールバックします。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 具体的な初期値なし。 |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | この一括指定が対象とする各プロパティに適用する指定された値のまま。 |
| アニメーションの種類 | この一括指定のそれぞれのプロパティとして (`unicode-bidi` と `direction`) を除いたすべてのプロパティ |

形式文法
----
```

all =   
  initial       |  
  inherit       |  
  unset         |  
  revert        |  
  revert-layer    
  
```

例
-

この例では、 CSS ファイルには親要素である `<body>` 要素のスタイル設定に加えて、 `<blockquote>` 要素のスタイル設定が格納されています。結果節の様々な出力は、 `<blockquote>` 要素のスタイル設定が `blockquote` ルール内の `all` プロパティに様々な値が適用されたときに、どのように影響されるかを示しています。

### HTML


```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS


```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### 結果

#### A. `all` プロパティなし
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```


これは `blockquote` ルールの中に `all` プロパティが設定されていない場合のシナリオです。 `<blockquote>` 要素はブラウザーに既定値のスタイル設定を使用し、マージンを与え、スタイルシートを指定します。また、ブロック要素としても振る舞います。続くテキストはその下にあります。

#### B. `all: initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}
```


`blockquote` ルールで `all` プロパティを `initial` に設定すると、`<blockquote>` 要素はブラウザー既定のスタイル設定を使用しなくなります。これでインライン要素になり（初期値）、 `background-color` は `transparent` （初期値）に、 `font-size` は `medium` に、 `color` は `black` （初期値）になります。

#### C. `all: inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}
```


この場合、 `<blockquote>` 要素はブラウザーの既定のスタイル設定を使用しません。これでブロック要素となり（継承値）、`background-color` は `#F0F0F0` （継承値）、 `font-size` は `small` （継承値）、 `color` は `blue` （継承値）となります。

#### D. `all: unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}
```


`blockquote` ルールの `all` プロパティに `unset` 値を用いた場合、 `<blockquote>` 要素はブラウザー既定値のスタイル設定を使用しません。なぜなら、 `background-color` は継承されないプロパティであり、`font-size` と `color` は継承されるプロパティだからです、 `<blockquote>` 要素はこれでインライン要素（初期値）、 `background-color` は `transparent` （初期値）となりますが、 `font-size` は `small` （継承値）、 `color` は `blue` （継承値）のままです。

#### E. `all: revert`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}
```


`blockquote` ルールの `all` プロパティに `revert` が設定されている場合、`blockquote` ルールは存在しないとみなされ、スタイル設定のプロパティ値は親要素 `<body>` に適用されている値が継承されます。つまり、 `<blockquote>` 要素はブロック要素となり、 `background-color` は `#F0F0F0`、`font-size` は `small`、`color` は `blue` でスタイル設定されます。これらはすべて `body` ルールから継承された値です。

#### F. `all: revert-layer`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}
```


この CSS ファイルにはカスケードレイヤーが定義されていないので、 `<blockquote>` 要素は対応する `body` ルールからスタイルを継承します。ここでの `<blockquote>` 要素はブロック要素としてスタイル設定されており、 `background-color` が `F0F0F0` に、 `font-size` が `small` に、 `color` が `blue` に設定されます。 - すべて `body` ルールから継承された値です。このシナリオでは、`all` を `revert-layer` に設定しても、`all` を `revert` に設定した場合と同じ動作をします。

仕様書
---

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

CSS のグローバルキーワード値: `initial`, `inherit`, `unset`, `revert`, `revert-layer`