all

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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 の縦マージンが設定されています。この段落の親要素は、青い破線の境界線を持つ &lt;div&gt; です。
      </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 プロパティの一括指定です。

構文

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 ルールの中に 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