อะไรคือความแตกต่างระหว่างค่าเริ่มต้นและค่าที่ไม่ได้ตั้งค่า?

ตัวอย่างง่ายๆ:

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

อะไรคือความแตกต่างระหว่างinitialและunset? รองรับเฉพาะเบราว์เซอร์

CanIUse: CSS unset value

นักพัฒนา Mozilla Web CSS เริ่มต้น

ตามลิงค์ของคุณ :

unset เป็นค่า CSS ที่เหมือนกับ "inherit" หากคุณสมบัติถูกสืบทอดหรือ "เริ่มต้น" หากคุณสมบัติไม่ได้รับการสืบทอด

นี่คือตัวอย่าง:

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>

สถานการณ์ที่ความแตกต่างมีความสำคัญหากคุณพยายามแทนที่ CSS บางส่วนในสไตล์ชีตของคุณ แต่คุณต้องการให้ค่านี้สืบทอดมาแทนที่จะตั้งกลับเป็นค่าเริ่มต้นของเบราว์เซอร์

ตัวอย่างเช่น:

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>

ฉันต้องการอ้างอิงเอกสาร CSS | MDN อย่างเป็นทางการสำหรับการอ้างอิงในอนาคตเมื่อพิจารณาถึงความแตกต่างระหว่างแต่ละรายการ:

เริ่มต้น

คีย์เวิร์ด CSS เริ่มต้นใช้ค่าเริ่มต้นของคุณสมบัติกับองค์ประกอบ ได้รับอนุญาตในทุกคุณสมบัติ CSS และทำให้องค์ประกอบที่ระบุให้ใช้ค่าเริ่มต้นของคุณสมบัติ

ดังนั้นตามตัวอย่างของคุณ:

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>

หมายเหตุวิธีการเริ่มต้นสถานที่ให้บริการยังคงเริ่มต้นcolorคุณสมบัติขององค์ประกอบ

ยกเลิกการตั้งค่า

คีย์เวิร์ด CSS ที่ไม่ได้ตั้งค่าคือการรวมกันของคีย์เวิร์ดเริ่มต้นและสืบทอดคีย์เวิร์ด เช่นเดียวกับคำหลักอื่น ๆ ทั้งสองคำหลัก CSS สามารถนำไปใช้กับคุณสมบัติ CSS ใด ๆ รวมถึงชวเลข CSS ทั้งหมด คีย์เวิร์ดนี้รีเซ็ตคุณสมบัติเป็นค่าที่สืบทอดมาหากสืบทอดจากพาเรนต์หรือเป็นค่าเริ่มต้นหากไม่ กล่าวอีกนัยหนึ่งมันจะทำงานเหมือนคีย์เวิร์ดที่สืบทอดในกรณีแรกและเหมือนกับคีย์เวิร์ดเริ่มต้นในกรณีที่สอง

ดังนั้นตามตัวอย่างของคุณ:

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>

หมายเหตุวิธีการตั้งค่าสถานที่ให้บริการเพียงแค่รีเซ็ตcolorคุณสมบัติขององค์ประกอบ

สรุปแล้ว

ความคิดนี้ค่อนข้างตรงไปตรงมา แต่ในทางปฏิบัติฉันขอแนะนำข้อควรระวังเมื่อจัดการกับความเข้ากันได้ของเบราว์เซอร์ข้ามสำหรับคุณสมบัติ CSS ทั้งสอง ... นั่นคือ ณ วันนี้