CSS3

プロパティ

all

  編集:2022.07.14 by T.A.

mdn

すべてのプロパティを設定し直す。

吊前 all
initial | inherit | unset | revert | revert-layer
初期値 個々のプロパティを見よ
適用対象 個々のプロパティを見よ
継承 個々のプロパティを見よ
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 個々のプロパティを見よ

all プロパティは、[directionunicode-bidi]を除く、すべての CSS プロパティを設定し直す略式プロパティである。CSS 全域キーワードのみが、その値として受容される。また、カスタム プロパティ [css-variables-1] は設定し直さない。

除かれた[directionunicode-bidi]プロパティは、実際にはマークアップ レベルの特能であり、作者スタイルシートには設定されるべきでない(それらは、ユーザー エージェントがサポートしていない文書言語をスタイルするための CSS プロパティとしてのみ存在する) [css-writing-modes-3]。作者は、HTML の dir 属性などの、適切なマークアップを代わりに利用するべきである。

以下のCSSが組み込んであります:

initial
プロパティのカスケード値が initial キーワードになる場合、その指定値は、プロパティの初期値にされる。

<DIV style="color:red; font-size:40px;">

 <DIV style="color:black; font-style:italic;

 ">あああ</DIV>

</DIV>

無指定


<DIV style="color:red; font-size:40px;">

 <DIV style="color:black; font-style:italic;

  all:initial;

 ">あああ</DIV>

</DIV>



<DIV class=Test1 style="color:pink; font-size:40px;

">あああ</DIV>

無指定


<DIV class=Test1 style="color:pink; font-size:40px;

 all:initial;

">あああ</DIV>


inherit
プロパティのカスケード値が inherit キーワードになる場合、そのプロパティの継承値が、指定値および算出値を与える。

<DIV style="color:red; font-size:40px;">

 <DIV style="color:black; font-style:italic;

  all:inherit;

 ">あああ</DIV>

</DIV>



<DIV class=Test1 style="color:pink; font-size:40px;

 all:inherit;

">あああ</DIV>


unset
所与の要素において、プロパティのカスケード値が unset キーワードになる場合、当のプロパティは[継承プロパティであるならば inherit/他の場合は initial]として扱われる。このキーワードは、実質的に、それまでにカスケードに出現した すべての†宣言値を消去して、プロパティ(略式プロパティの場合は、そのすべての下位プロパティ)に応じて適切に、正しく[継承する/継承しない]ようにする。

【† “それまでに … すべての” ― これは、出現順序に従ってソートされるものに限られる。出自や詳細度など、より優先されるソート判定基準に基づいて選定される宣言値まで消去するわけではない。】


<DIV style="color:red; font-size:40px;">

 <DIV style="color:black; font-style:italic;

  all:unset;

 ">あああ</DIV>

</DIV>



<DIV class=Test1 style="color:pink; font-size:40px;

 all:unset;

">あああ</DIV>


revert
所与の要素において、プロパティのカスケード値が revert キーワードになる場合のふるまいは、その宣言が属する出自に依存する:
UA 出自
unset に等価。
利用者出自
カスケード値をユーザー レベルへ巻戻す。すなわち、プロパティの指定値は、[当の要素のプロパティ用の規則は、[作者出自利用者出自]においては指定されなかった【言い換えれば、適用される宣言は無かった】]かのように計算される。
作者出自
カスケード値を利用者レベルへ巻戻す。すなわち、プロパティの指定値は、[当の要素のプロパティ用の規則は、作者出自においては指定されなかった]かのように計算される。revert の目的においては、この出自にはアニメーション出自も含まれる。

【巻戻し(rolling back): カスケード値を、より優先度が低い出自に属する宣言のみに基づくよう“戻す”。】【以下の定義には、重要度は織り込まれていない(織り込まれるとするなら、important な宣言に対する巻戻しは、通常の宣言とは“逆向き”になろう)。】


<DIV style="color:red; font-size:40px;">

 <DIV style="color:black; font-style:italic;

  all:revert;

 ">あああ</DIV>

</DIV>



<DIV class=Test1 style="color:pink; font-size:40px;

 all:rever;

">あああ</DIV>


revert-layer
プロパティのカスケード値が revert-layer キーワードになる場合、当のカスケード値は,その宣言が属するカスケード層より優先度が低いカスケード層へ巻戻される ― すなわち、プロパティの指定値は、[当の要素のプロパティ用の規則は、次においては指定されなかった]かのように計算される:
その宣言が属するカスケード層 ― または、カスケードにおける、その[通常のレベルimportant なレベル]の間【?】。

注記: revert-layer 値が属する出自の中で、より優先度が低い宣言が無い場合、revert キーワードと同じく、カスケード値は より優先度が低い出自へ巻戻されることになる。


<DIV style="color:red; font-size:40px;">

 <DIV style="color:black; font-style:italic;

  all:revert-layer;

 ">あああ</DIV>

</DIV>



<DIV class=Test1 style="color:pink; font-size:40px;

 all:revert-layer;

">あああ</DIV>



テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: