Harap dicatat, bukan panel Styles (saya tahu apa arti abu-abu dalam konteks itu — tidak diterapkan), tetapi panel berikutnya, panel properti Computed.
Apa artinya ketika properti Terhitung ditampilkan dalam warna abu-abu?
Contoh:
css
google-chrome
google-chrome-devtools
AmbroseChapel
sumber
sumber
Jawaban:
NB: Jawaban ini tidak ada bukti yang kuat, berdasarkan pengamatan saya selama ini.
Properti terhitung abu-abu bukan default, atau diwariskan. Ini hanya terjadi pada properti yang tidak ditentukan untuk elemen tersebut, tetapi dihitung dari turunannya atau induknya berdasarkan rendering tata letak runtime.
Ambil halaman sederhana ini sebagai contoh,
displayadalah default danfont-sizediwarisi:<style> div { font-size: 13px; } </style> <div> <p>asdf</p> </div>Dalam contoh khusus ini,
heightdihitung dari<p>simpul teks anak-anak (ukuran font ditambah tinggi garis),widthdihitung dari<div>lebar induknya , yang juga dihitung dari induknya<body>.EDIT: Baiklah saya pikir lagi, inilah jawaban berdasarkan pendapat saya . Saya benar-benar harus pergi dan melihat kode sumber Chromium nanti: D
Dengan meluaskan panah tersebut, Anda dapat melihat aturan aktual mana yang diterapkan ke elemen, di antara semua aturan yang ditetapkan melawannya (baik secara langsung atau diwariskan, baik oleh pengembang atau browser):
Di sini Anda dapat melacak ke setiap definisi bahkan termasuk aturan bawaan browser, dan memeriksa dengan mekanisme CSS cascading (overriding).
Jadi, untuk elemen yang tidak memiliki definisi CSS (tidak ditentukan secara langsung, tidak diwariskan, tidak ada browser bawaan), Anda tidak memiliki sumber untuk dilacak. Dan nilai properti dihitung total waktu proses.
Jika Anda mencentang Tampilkan semua , properti berwarna abu-abu lainnya akan ditampilkan. Ini juga tidak didefinisikan di mana pun. Namun tidak seperti screenshot sebelumnya, screenshot ini tidak dihitung waktu proses - ini adalah nilai default spesifikasi CSS.
sumber
run-time calculatedkarena properti abu-abu biasanya adalah 'height' dan 'width', yang jika dipikir-pikir, adalah nilai yang bergantung secara dinamis pada turunan elemen (misalnya, jumlah teks dan ukuran font teks yang terkandung dalam elemen, atau lebar induk ketika elemen memiliki lebar: 100%)widthgaya misalnya.