Sự khác biệt giữa giá trị ban đầu và giá trị chưa đặt là gì?

Một ví dụ đơn giản:

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

Sự khác biệt giữa initialvà là unsetgì? Chỉ hỗ trợ các trình duyệt

CanIUse: Giá trị chưa đặt CSS

Lập trình viên Mozilla Web CSS ban đầu

Theo liên kết của bạn :

unset là một giá trị CSS giống như "kế thừa" nếu một thuộc tính được kế thừa hoặc "ban đầu" nếu một thuộc tính không được kế thừa

Đây là một ví dụ:

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>

Một tình huống mà vấn đề khác biệt là nếu bạn đang cố gắng ghi đè một số CSS trong biểu định kiểu của mình, nhưng bạn muốn giá trị được kế thừa hơn là đặt trở lại mặc định của trình duyệt.

Ví dụ:

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>

Tôi muốn trích dẫn tài liệu CSS | MDN chính thức để tham khảo trong tương lai khi xem xét sự khác biệt giữa mỗi:

BAN ĐẦU

Từ khóa CSS ban đầu áp dụng giá trị ban đầu của một thuộc tính cho một phần tử. Nó được phép trên mọi thuộc tính CSS và làm cho phần tử mà nó được chỉ định sử dụng giá trị ban đầu của thuộc tính.

Do đó theo ví dụ của bạn:

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>

Lưu ý cách thức ban đầu tài sản giữ lại ban đầu các colortài sản của nguyên tố này.

UNSET

Từ khóa CSS chưa đặt là sự kết hợp của từ khóa ban đầu và từ khóa kế thừa. Giống như hai từ khóa toàn CSS khác, nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm tất cả các từ khóa CSS. Từ khóa này đặt lại thuộc tính về giá trị kế thừa của nó nếu nó được kế thừa từ giá trị gốc của nó hoặc về giá trị ban đầu nếu không. Nói cách khác, nó hoạt động giống như từ khóa kế thừa trong trường hợp đầu tiên và giống như từ khóa ban đầu trong trường hợp thứ hai.

Do đó theo ví dụ của bạn:

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>

Lưu ý cách thuộc tính chưa đặt đơn giản đặt lại thuộc colortính của phần tử.

TÓM LẠI LÀ

Ý tưởng này khá dễ hiểu, nhưng trong thực tế, tôi khuyên bạn nên thận trọng khi xử lý khả năng tương thích giữa các trình duyệt cho cả các thuộc tính CSS ... cho đến ngày nay.