Was ist der Unterschied zwischen den anfänglichen und nicht festgelegten Werten?

86

Ein einfaches Beispiel:

HTML

<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>

CSS

em {
    color:initial;
    color:unset;
}

Was ist der Unterschied zwischen initialund unset? Unterstützt nur Browser

CanIUse: CSS nicht festgelegter Wert

Entwickler Mozilla Web CSS initial

css zloctb
quelle

Antworten:

108

Laut Ihrem Link :

unset ist ein CSS-Wert, der mit "erben" identisch ist, wenn eine Eigenschaft geerbt wird, oder "initial", wenn eine Eigenschaft nicht geerbt wird

Hier ist ein Beispiel:

pre {
  color: #f00;
}
.initial {
  color: initial;
}
.unset {
  color: unset;
}
<pre>
  <span>This text is red because it is inherited.</span>
  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>
  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span>
</pre>
Erweitern Sie das Snippet

Ein Szenario, in dem der Unterschied darin besteht, ob Sie versuchen, etwas CSS in Ihrem Stylesheet zu überschreiben, aber es vorziehen, dass der Wert vererbt wird, anstatt auf die Standardeinstellung des Browsers zurückgesetzt zu werden.

Zum Beispiel:

pre {
  color: #00f;
}
span {
  color: #f00;
}
.unset {
  color: unset;
}
.initial {
  color: initial;
}
<pre>
  <em>Text in this 'pre' element is blue.</em>
  <span>The span elements are red, but we want to override this.</span>
  <span class="unset">[color: unset]: This span's color is unset (blue, because it is inherited from the pre).</span>
  <span class="initial">[color: initial]: This span's color is initial (black, the browser default).</span>
</pre>
Erweitern Sie das Snippet

Josh Crozier
quelle
7

Ich möchte die offizielle CSS | MDN-Dokumentation zur späteren Bezugnahme zitieren, wenn ich die Unterschiede zwischen den beiden untersuche:

INITIALE

Das anfängliche CSS-Schlüsselwort wendet den Anfangswert einer Eigenschaft auf ein Element an. Es ist für jede CSS-Eigenschaft zulässig und bewirkt, dass das Element, für das es angegeben ist, den Anfangswert der Eigenschaft verwendet.

Deshalb nach Ihrem Beispiel: 

em {
    color:initial;
    /* color:unset; */
}
<p style="color:red!important"> 
    this text is red 
    <em> 
       this text is in the initial color (e.g. black)
    </em>
    this is red again
</p>
Erweitern Sie das Snippet

Beachten Sie, wie die ursprüngliche Eigenschaft die behält Anfang der colorEigenschaft des Elements.

UNSET

Das nicht gesetzte CSS-Schlüsselwort ist die Kombination aus dem anfänglichen und dem geerbten Schlüsselwort. Wie diese beiden anderen CSS-weiten Schlüsselwörter kann es auf jede CSS-Eigenschaft angewendet werden, einschließlich der CSS-Kurzform all. Dieses Schlüsselwort setzt die Eigenschaft auf ihren geerbten Wert zurück, wenn sie von ihrem übergeordneten Wert erbt, oder auf ihren Anfangswert, wenn nicht. Mit anderen Worten, es verhält sich im ersten Fall wie das ererbte Schlüsselwort und im zweiten Fall wie das ursprüngliche Schlüsselwort.

Deshalb nach Ihrem Beispiel:

em {
  /* color:initial; */
  color:unset;
}
<p style="color:red!important"> 
  this text is red 
  <em> 
    this text's color has been unset (e.g. red)
  </em>
  this is red again
</p>
Erweitern Sie das Snippet

Beachten Sie, wie die Eigenschaft unset einfach die Eigenschaft des Elements zurücksetztcolor .

ABSCHLIESSEND

Die Idee ist recht einfach, aber in der Praxis würde ich Vorsicht walten lassen, wenn es um die Cross-Browser-Kompatibilität für beide CSS-Eigenschaften geht ... das ist ab heute.

ALTER
quelle