หมายความว่าอย่างไรเมื่อ Chrome Dev Tools แสดงคุณสมบัติที่คำนวณแล้วเป็นสีเทา

Question 1

โปรดทราบว่าไม่ใช่แผงสไตล์ (ฉันรู้ว่าสีเทาหมายถึงอะไรในบริบทนั้น - ไม่ได้ใช้) แต่แผงถัดไปคือแผงคุณสมบัติที่คำนวณ

หมายความว่าอย่างไรเมื่อคุณสมบัติที่คำนวณแล้วแสดงเป็นสีเทา

ตัวอย่าง:

Question 2

หมายเหตุ: คำตอบนี้ไม่มีหลักฐานที่ชัดเจนขึ้นอยู่กับการสังเกตของฉันตลอดเวลา

คุณสมบัติจากการคำนวณสีเทาไม่ใช่ค่าเริ่มต้นหรือสืบทอดมา สิ่งนี้เกิดขึ้นเฉพาะกับคุณสมบัติที่ไม่ได้กำหนดไว้สำหรับองค์ประกอบ แต่คำนวณจากลูกหรือพาเรนต์ตามการแสดงผลโครงร่างรันไทม์

ยกตัวอย่างหน้าง่ายๆนี้เป็นdisplayค่าเริ่มต้นและfont-sizeสืบทอดมา:

<style>
  div { font-size: 13px; }
</style>
<div>
  <p>asdf</p>
</div>

ในตัวอย่างheightนี้คำนวณจาก<p>โหนดลูกของ - โหนดข้อความ (ขนาดแบบอักษรบวกความสูงของบรรทัด) widthคำนวณจาก<div>ความกว้างของพาเรนต์ซึ่งคำนวณจากพาเรนต์<body>ด้วย

แก้ไข:ฉันคิดอีกครั้งนี่คือคำตอบตามความคิดเห็นของฉัน ฉันควรไปดูซอร์สโค้ด Chromium ในภายหลัง: D

เมื่อขยายลูกศรเหล่านี้คุณจะเห็นได้ว่ากฎจริงใดถูกนำไปใช้กับองค์ประกอบในบรรดากฎทั้งหมดที่กำหนดไว้ (ไม่ว่าจะโดยตรงหรือสืบทอดโดยนักพัฒนาหรือเบราว์เซอร์)

ที่นี่คุณสามารถติดตามทุกคำจำกัดความรวมถึงกฎในตัวของเบราว์เซอร์และตรวจสอบด้วยกลไก CSS cascading (overriding)

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

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