Chrome Geliştirici Araçlarının hesaplanmış bir özelliği gri renkte göstermesi ne anlama geliyor?

Question 1

Lütfen , Stiller panelini değil (bu bağlamda grileşmenin ne anlama geldiğini biliyorum — uygulanmıyor), ancak bir sonraki panelin Hesaplanan özellikler panelinde olduğunu unutmayın.

Bir Hesaplanan özelliğin gri olarak gösterilmesi ne anlama gelir?

Misal:

Question 2

Not: Bu cevabın sağlam bir kanıtı yok, o zaman boyunca gözlemlerime dayanıyor.

Gri hesaplanan özellikler ne varsayılandır ne de miras alınır. Bu, yalnızca öğe için tanımlanmamış, ancak çalışma zamanı düzeni oluşturmaya göre alt öğelerinden veya üst öğesinden hesaplanan özelliklerde oluşur.

Örnek olarak bu basit sayfayı alın display, varsayılandır ve font-sizedevralınır:

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

Bu özel örnekte, heighthesaplanır <p>bireyin çocuk - metin düğümü (yazı tipi boyutu artı satır yüksekliği), widthkendi ana hesaplanır - <div>'de üst hesaplanır s genişliği <body>.

DÜZENLEME: Yine düşündüm, işte fikir temelli cevabım. Daha sonra gerçekten gidip Chromium kaynak koduna bakmalıyım: D

Bu okları genişleterek, öğeye karşı tanımlananlar arasında (doğrudan veya geliştirici veya tarayıcı tarafından devralınan) öğeye hangi gerçek kuralın uygulandığını görebilirsiniz:

Burada, tarayıcı yerleşik kuralları dahil her tanımın izini sürebilir ve CSS basamaklama (geçersiz kılma) mekanizmasını kontrol edebilirsiniz.

Dolayısıyla, CSS tanımına sahip olmayan (doğrudan tanımlanmamış, miras alınmamış, yerleşik tarayıcı içermeyen), izlenecek herhangi bir kaynağa sahip değilsiniz. Ve özellik değerleri tamamen çalışma zamanında hesaplanır.

Eğer kontrol ederseniz Tümünü göster , daha gri özellikleri gösterilmiştir. Bunlar da hiçbir yerde tanımlanmamıştır. Ancak önceki ekran görüntülerinde bulunanlardan farklı olarak, bunlar çalışma zamanı hesaplamasına tabi değildir - bunlar CSS spesifikasyon varsayılan değeridir.