Başlangıç ​​ve ayarlanmamış değerler arasındaki fark nedir?

Basit bir örnek:

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;
}

Arasındaki fark nedir initialve unset? Yalnızca tarayıcıları destekler

CanIUse: CSS ayarlanmamış değeri

Geliştirici Mozilla Web CSS başlangıç

Göre senin linke :

unset bir özellik miras alınmışsa "devralma", bir özellik devralınmamışsa "ilk" ile aynı olan bir CSS değeridir

İşte bir örnek:

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>

Farklılığın önemli olduğu bir senaryo, stil sayfanızdaki bazı CSS'leri geçersiz kılmaya çalışıyorsanız, ancak tarayıcı varsayılanına geri dönmek yerine değerin miras alınmasını tercih edersiniz.

Örneğin:

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>

Her biri arasındaki farkları incelerken ileride başvurmak için resmi CSS | MDN belgelerinden alıntı yapmak istiyorum:

BAŞLANGIÇ

İlk CSS anahtar sözcüğü, bir özelliğin başlangıç ​​değerini bir öğeye uygular. Her CSS özelliğinde izin verilir ve belirtilen öğenin özelliğin başlangıç ​​değerini kullanmasına neden olur.

Bu nedenle, örneğinize göre:

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>

Not nasıl ilk özelliği muhafaza ilkcolor elemanın özelliği.

AYARLANMADI

Ayarlanmamış CSS anahtar sözcüğü, başlangıç ​​ve devralma anahtar sözcüklerinin birleşimidir. Bu iki CSS çapında anahtar kelime gibi, CSS kısaltması tümü dahil olmak üzere herhangi bir CSS özelliğine uygulanabilir. Bu anahtar sözcük, özelliği üst öğesinden devralırsa miras alınan değerine, yoksa ilk değerine sıfırlar. Diğer bir deyişle, ilk durumda devralınan anahtar kelime ve ikinci durumda ilk anahtar kelime gibi davranır.

Bu nedenle, örneğinize göre:

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>

Unset özelliğinin öğenin özelliğini nasıl basitçe sıfırladığını not edin color.

SONUÇ OLARAK

Fikir oldukça açık, ancak pratikte her iki CSS özelliği için çapraz tarayıcı uyumluluğu ile uğraşırken dikkatli olmanızı tavsiye ederim ... yani bugün itibariyle.