all
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
all は CSS の一括指定プロパティで、要素のすべてのプロパティを (unicode-bidi、direction、 CSS カスタムプロパティを除いて) 初期化します。プロパティは初期値または継承値、または他のカスケードレイヤーまたはスタイルシートに由来して指定した値に設定される可能性があります。
試してみましょう
/* all プロパティなし */ all: initial; all: inherit; all: unset; all: revert; <section id="default-example"> <div class="example-container-bg"> <div class="example-container"> <p id="example-element"> この段落はフォントサイズが 1.5rem で、色は金色です。また、ユーザーエージェントによって 1rem の縦マージンが設定されています。この段落の親要素は、青い破線の境界線を持つ <div> です。 </p> </div> </div> </section> #example-element { color: gold; padding: 10px; font-size: 1.5rem; text-align: left; width: 100%; } .example-container { border: 2px dashed #2d5ae1; } .example-container-bg { background-color: #77767b; padding: 20px; } 構成要素のプロパティ
このプロパティは、unicode-bidi、direction、カスタムプロパティを除くすべての 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 |
revert-rule
例
この例では、 CSS ファイルには親要素である <body> 要素のスタイル設定に加えて、 <blockquote> 要素のスタイル設定が格納されています。結果節の様々な出力は、 <blockquote> 要素のスタイル設定が blockquote ルール内の all プロパティに様々な値が適用されたときに、どのように影響されるかを示しています。
HTML
<blockquote id="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </blockquote> Phasellus eget velit sagittis. CSS
body { font-size: small; background-color: #f0f0f0; color: blue; margin: 0; padding: 0; } blockquote { background-color: skyblue; color: red; } 結果
A. all プロパティなし
これは blockquote ルールの中に all プロパティが設定されていない場合のシナリオです。 <blockquote> 要素はブラウザーに既定値のスタイル設定を使用し、マージンを与え、スタイルシートを指定します。また、ブロック要素としても振る舞います。続くテキストはその下にあります。
B. all: initial
blockquote ルールで all プロパティを initial に設定すると、<blockquote> 要素はブラウザー既定のスタイル設定を使用しなくなります。これでインライン要素になり（初期値）、 background-color は transparent （初期値）に、 font-size は medium に、 color は black （初期値）になります。
C. all: inherit
この場合、 <blockquote> 要素はブラウザーの既定のスタイル設定を使用しません。これでブロック要素となり（継承値）、background-color は #F0F0F0 （継承値）、 font-size は small （継承値）、 color は blue （継承値）となります。
D. all: unset
blockquote ルールの all プロパティに unset 値を用いた場合、 <blockquote> 要素はブラウザー既定値のスタイル設定を使用しません。なぜなら、 background-color は継承されないプロパティであり、font-size と color は継承されるプロパティだからです、 <blockquote> 要素はこれでインライン要素（初期値）、 background-color は transparent （初期値）となりますが、 font-size は small （継承値）、 color は blue （継承値）のままです。
E. all: revert
blockquote ルールの all プロパティに revert が設定されている場合、blockquote ルールは存在しないとみなされ、スタイル設定のプロパティ値は親要素 <body> に適用されている値が継承されます。つまり、 <blockquote> 要素はブロック要素となり、 background-color は #F0F0F0、font-size は small、color は blue でスタイル設定されます。これらはすべて body ルールから継承された値です。
F. 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 |
ブラウザーの互換性
関連情報
CSS のグローバルキーワード値: initial, inherit, unset, revert, revert-layer