Nilai yang dikira: Lebih daripada memenuhi mata

Pemaju depan tidak boleh dilakukan tanpa alat pemaju penyemak imbas. Artikel ini akan menyelam ke tab Compute dalam alat pemaju. Walaupun ia tidak mencolok, ia boleh mendedahkan banyak maklumat penting, seperti bagaimana nilai CSS relatif dihuraikan. Kami juga akan belajar bagaimana warisan berfungsi dalam proses pengiraan gaya penyemak imbas.

Kandungan dalam tab Pengiraan adalah penting kerana ia menunjukkan nilai penyemak imbas sebenarnya menggunakan untuk menjadikan laman web . Jika gaya elemen tidak sepadan dengan jangkaan, tab pengiraan dapat membantu anda memahami mengapa.

Jika anda digunakan untuk menggunakan tab Styles (dipanggil Peraturan di Firefox), anda mungkin tertanya -tanya bagaimana ia berbeza dari tab pengiraan. Mereka semua menunjukkan gaya yang digunakan untuk elemen itu. Jawapannya ialah: Tab Hitung memaparkan senarai gaya parsed yang disusun mengikut abjad, termasuk gaya yang diisytiharkan dalam lembaran gaya, gaya yang diwarisi, dan gaya lalai penyemak imbas.

Tab Styles, sebaliknya, memaparkan peraturan untuk unsur -unsur yang dipilih seperti yang mereka lakukan ketika mereka ditulis. Oleh itu, tab Styles mungkin memaparkan sesuatu seperti .subhead {font-size: 75%} , manakala tab Hitung akan memaparkan saiz fon sebenar, atau 70% daripada nilai yang dihuraikan sekarang. Sebagai contoh, saiz fon sebenar teks yang ditunjukkan di atas ialah 13.2px.

Seterusnya, mari kita mengkaji secara ringkas konsep warisan dan lata, yang merupakan dua faktor penting dalam memperoleh nilai -nilai yang dikira dalam tab pengiraan.

Kursus Warisan dan Cascading Crash

CSS bermaksud Lembaran Gaya Cascading, dan perkataan "cascading" sangat penting - cara cascading berkelakuan adalah kunci untuk memahami CSS.

Mdn

Cascade itu patut diberi perhatian kerana ia mewakili "C" dalam CSS. Ia adalah satu mekanisme yang digunakan untuk menyelesaikan konflik antara sumber pengisytiharan dokumen.

Sebagai contoh, katakan lembaran gaya mentakrifkan lebar div dua kali:

 <code>div { width: 65vw; } /* 在后面的某个位置*/ div { width: 85vw; }</code>

Dalam contoh ini, lebar kedua menang kerana ia mengisytiharkan pada akhirnya. Lebar pertama masih boleh digunakan !important , tetapi ini sebenarnya memusnahkan lata oleh kekerasan. Kuncinya ialah algoritma cascading menentukan gaya yang digunakan untuk setiap elemen dan mengutamakannya dalam urutan yang telah ditetapkan untuk menentukan nilai.

Cascading sesuai untuk menetapkan sifat secara eksplisit, sama ada ditetapkan oleh pelayar, pemaju web, atau pengguna. Apabila output cascade kosong, warisan dimainkan. Apabila ini berlaku, nilai yang dikira atribut pada elemen induk elemen diekstrak sebagai nilai atribut sendiri. Sebagai contoh, jika anda menentukan warna untuk elemen, jika anda tidak menentukan warna elemen kanak -kanak, semua elemen kanak -kanak mewarisi warna itu.

Sebelum kita meneruskan, kita harus biasa dengan empat nilai atribut utama yang berkaitan dengan warisan. Kami akan menggunakannya sepanjang artikel.

permulaan

Dalam dokumen HTML, tahap tertinggi pokok dom adalah Elemen, apabila kita menggunakan kata kunci initial pada elemen, contohnya ...

... warna teks elemen ini hitam, walaupun jika Unsur ini ditetapkan ke hijau.<code><div> Pemilih mempunyai kekhususan yang lebih tinggi, tetapi kami berminat mengapa <code>initial ditukar menjadi hitam.

Ringkasnya, kata kunci ini menetapkan nilai lalai atribut berdasarkan jadual definisi (dalam spesifikasi CSS). Dalam kes ini, hitam menjadi pelaksanaan pelaksanaan nilai awal.

Saya menyebutkan pada akhir artikel yang anda dapat lihat jika atribut itu diwarisi secara lalai dengan melihat halaman di MDN. Anda juga boleh mencari nilai awal sebarang atribut dengan cara ini.

mewarisi

Untuk atribut yang tidak diasingkan, kata kunci ini menguatkuasakan warisan. Dalam contoh berikut,<p> Unsur ini mempunyai sempadan merah pepejal. Atribut <code>border tidak diwarisi secara lalai, tetapi kami dapat memberitahu kami dengan menggunakan kata kunci inherit pada atribut border<div> Diwarisi dalam<code><p> Sempadan merah yang sama diisytiharkan pada elemen:</p> <h4 id="unset"> unset</h4> <p> Jika atribut diwarisi, <code>unset akan menyelesaikan nilai yang diwarisi. Jika tidak, nilai awal akan digunakan. Ini pada dasarnya bermakna bahawa unset menetapkan semula atribut berdasarkan sama ada atribut mewarisi atau tidak. Berikut adalah demonstrasi yang beralih unset menunjukkan kesannya terhadap unsur -unsur dengan tahap kekhususan yang berbeza.

kembali

Jika atribut CSS tidak ditetapkan pada elemen, adakah ia akan mendapat gaya? Sudah tentu. Ia menggunakan gaya lalai penyemak imbas.

Contohnya,<span></span> Nilai awal sifat display elemen adalah inline , tetapi kita boleh menentukannya sebagai block dalam lembaran styleshe. Gunakan butang dalam demo berikut<span></span> Togol revert pada display dan sifat color elemen:

<span></span> Berulang semula dengan elemen sebaris dengan betul, tetapi tunggu! Adakah anda perasan<span></span> Warna warna berubah menjadi hijau dan bukannya nilai hitam lalai penyemak imbas? Ini kerana revert membolehkan warisan. Ia akan mengesan kembali ke nilai lalai penyemak imbas untuk menetapkan warna, tetapi sejak kita masuk<p> Hijau secara eksplisit ditetapkan pada elemen, jadi itulah yang mewarisi.</p> <h3 id="Cari-nilai-yang-dikira-dalam-alat-pemaju"> Cari nilai yang dikira dalam alat pemaju</h3> <p> Di sinilah kita mula bercakap tentang mengira nilai dalam alat pemaju. Seperti nilai lalai atribut CSS, nilai yang dikira atribut CSS ditentukan oleh jadual definisi atribut dalam spesifikasi CSS. Berikut adalah penampilan atribut <code>height .

Katakan kita menggunakan panjang relatif dalam CSS, seperti salah satu daripada 10EM atau 70% atau 5VW. Oleh kerana ini adalah relatif kepada sesuatu -saiz fon atau viewport -mereka perlu menyelesaikan nilai mutlak piksel. Sebagai contoh, jika lebar viewport adalah 1000px, elemen dengan lebar 10% boleh dikira sebagai 100px, tetapi jika lebar viewport berubah, ia akan dikira sebagai nombor lain.

Nilai -nilai ini dikira semasa proses yang dipanggil pengiraan gaya mengira apabila DOM diubahsuai. Ini membolehkan penyemak imbas mengetahui gaya yang digunakan untuk setiap elemen halaman.

Pengiraan gaya melibatkan pelbagai langkah yang melibatkan pelbagai nilai. Ini didokumenkan dalam spesifikasi CSS Cascading dan Warisan Tahap 4, dan kedua -duanya mempengaruhi nilai akhir yang kita lihat dalam tab Compute. Mari kita lihat ini seterusnya.

Nilai dan cara memprosesnya

Nilai yang ditakrifkan untuk proses pengiraan gaya termasuk nilai yang diisytiharkan , nilai tertentu , nilai cascading , nilai yang dikira , nilai yang digunakan , dan nilai sebenar . Siapa tahu ada begitu banyak, bukan?

Mengisytiharkan nilai

Mengisytiharkan nilai adalah sebarang pengisytiharan atribut yang digunakan untuk elemen. Penyemak imbas mengiktiraf kenyataan ini berdasarkan beberapa syarat, termasuk:

• Pengisytiharan berada dalam lembaran gaya yang digunakan untuk dokumen semasa
• Terdapat pemilih yang sepadan dalam perisytiharan gaya
• Pengisytiharan gaya mengandungi sintaks yang sah (iaitu nama dan nilai atribut yang sah)

HTML berikut:

<code><main>
<p>Ia bukan penafian. Saya hanya selektif mengenai realiti yang saya terima.</p>
</main></code>

Berikut adalah nilai yang diisytiharkan yang digunakan untuk saiz fon teks:

 <code>main { font-size: 1.2em; /* 如果段落元素没有被专门定位，这将适用，即使那样，作为继承值，而不是“声明值” */ } main > p { font-size: 1.5em; /* 声明值*/ }</code>

Nilai Cascaded

Semua nilai yang diisytiharkan yang digunakan untuk elemen diprioritaskan untuk mengembalikan satu nilai:

• Sumber pernyataan (ia datang dari penyemak imbas, pemaju, atau sumber lain?)
• Sama ada perisytiharan itu ditandakan sebagai " !important "
• Kekhususan peraturan (mis., span {} dan section span {} )
• Perintah penampilan (contohnya, jika pengisytiharan berganda digunakan, gunakan perisytiharan terakhir)

Dalam erti kata lain, nilai cascading adalah pernyataan "menang". Sekiranya lata tidak menghasilkan nilai yang diisytiharkan, maka tidak ada nilai cascade.

 <code>main > p { font-size: 1.2em; } main > .product-description { /* 上一个规则中定位的相同段落*/ font-size: 1.2em; /* 基于特异性和文档顺序的级联值，忽略所有其他考虑因素，例如来源*/ }</code>

Nyatakan nilai

Seperti yang dinyatakan sebelum ini, output cascading mungkin kosong. Walau bagaimanapun, masih terdapat keperluan untuk mencari nilai dengan cara lain.

Sekarang, katakan kita tidak mengisytiharkan nilai untuk atribut khusus pada elemen, tetapi untuk elemen induk. Ini adalah sesuatu yang sering kita lakukan dengan tujuan kerana tidak perlu menetapkan nilai yang sama di pelbagai lokasi. Dalam kes ini, nilai yang diwarisi unsur induk akan digunakan. Ini dipanggil nilai yang ditentukan .

Dalam banyak kes, nilai cascading juga dinyatakan nilai. Walau bagaimanapun, jika tidak ada nilai cascading dan harta kepentingan yang diwarisi (sama ada ia diwarisi secara lalai atau menggunakan kata kunci inherit ), ia juga boleh menjadi nilai yang diwarisi. Sekiranya harta itu tidak diwarisi, nilai yang ditentukan adalah nilai awal harta, seperti yang dinyatakan sebelum ini, ia juga boleh ditetapkan dengan jelas menggunakan kata kunci initial .

Secara keseluruhannya, nilai yang ditentukan adalah nilai yang kita ingin gunakan pada elemen itu, sama ada atau tidak ia secara jelas diisytiharkan pada elemen itu. Ini agak kabur kerana jika tidak ada pengisytiharan dalam lembaran gaya, nilai lalai penyemak imbas juga boleh menjadi nilai yang ditentukan.

 <code>/* 浏览器默认值= 16px */ main > p { /* 没有为段落元素及其所有祖先声明字体大小的值*/ }</code>

Kirakan nilai

Kami secara ringkas membincangkan bagaimana nilai relatif perlu dihuraikan ke dalam nilai setara piksel mutlak mereka. Seperti yang dinyatakan sebelum ini, proses ini ditentukan sebelumnya. Sebagai contoh, jadual definisi atribut mempunyai medan nilai yang dikira yang memperincikan bagaimana nilai yang ditentukan biasanya dihuraikan.

Dalam contoh berikut, kami menggunakan EM, yang merupakan unit relatif. Di sini, nilai akhir yang digunakan apabila memberikan elemen yang atribut itu digunakan bukanlah nombor tetap yang dipaparkan dalam nilai yang diisytiharkan, tetapi nilai yang perlu dikira berdasarkan beberapa faktor.

 <code>main { font-size: 1.2em; } main > p { font-size: 1.5em; /* 声明值*/ }</code>

Saiz fon elemen perenggan ditetapkan kepada 1.5EM, iaitu 1.2EM berbanding dengan saiz fon elemen main . Sekiranya main Unsur -unsur kanak -kanak langsung dari elemen - dan tiada pengisytiharan saiz fon tambahan dibuat di atasnya, contohnya dengan menggunakan :root - kita boleh mengandaikan bahawa pengiraan saiz fon perenggan akan mengikuti proses umum berikut:

 <code>Browser_Default_FontSize = 16px; Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8px</code>

28.8px adalah nilai yang dikira . Berikut adalah demonstrasi:

Buka alat pemaju dan lihat saiz fon yang dikira dalam tab Hitung.

Katakan kami menggunakan unit REM:

 <code>html { font-size: 1.2em; } main { font-size: 1.5rem; } div { font-size: 1.7rem; }</code>

Nilai yang dikira unit REM adalah berdasarkan saiz fon elemen HTML akar, yang bermaksud pengiraan akan berubah sedikit. Dalam kes ini, kami juga menggunakan unit relatif pada elemen HTML, jadi kami menggunakan nilai saiz fon lalai penyemak imbas untuk mengira saiz fon asas yang akan kami gunakan untuk menghuraikan semua nilai REM.

 <code>Browser_Default_FontSize = 16px Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64px</code>

Buka alat pemaju untuk demo ini sekali lagi:

Nilai Browser_Default_FontSize biasanya digunakan oleh penyemak imbas, tetapi ini mungkin berbeza dari penyemak imbas ke penyemak imbas. Untuk melihat nilai lalai semasa anda, pilih elemen dalam alat pemaju dan lihat saiz fon yang dipaparkan untuknya. Perhatikan bahawa jika anda secara jelas menetapkan nilai untuk elemen akar seperti contoh kami, anda mungkin perlu menutupnya dalam tab Peraturan. Seterusnya, dalam tab Pengiraan, togol pertunjukan All atau Gaya Pelayar (Firefox) untuk melihat nilai lalai.

Semasa warisan, nilai yang dikira diluluskan dari elemen induk kepada elemen kanak -kanak. Proses pengiraan ini mengambil kira empat kata kunci kawalan warisan yang kita lihat sebelumnya. Biasanya, nilai relatif menjadi mutlak (iaitu 1rem menjadi 16px). Ini juga di mana URL relatif menjadi jalan mutlak, dan di mana kata kunci seperti bolder (nilai harta font-weight ) dihuraikan. Anda boleh melihat lebih banyak contoh ini dalam dokumentasi.

Gunakan nilai

Penggunaan nilai adalah hasil akhir selepas semua pengiraan selesai pada nilai yang dikira. Di sini, semua nilai relatif menjadi nilai mutlak. Nilai penggunaan ini akan digunakan (sementara) ke susun atur halaman. Anda mungkin tertanya -tanya mengapa pengiraan lanjut diperlukan. Bukankah semua ini telah diproses pada peringkat sebelumnya apabila memproses nilai yang ditentukan untuk mengira nilai?

Masalahnya ialah: Sesetengah nilai relatif hanya dapat diselesaikan kepada nilai mutlak piksel di sini. Sebagai contoh, lebar yang ditentukan oleh peratusan mungkin memerlukan susun atur halaman untuk dihuraikan. Walau bagaimanapun, dalam banyak kes, nilai yang dikira akhirnya menjadi nilai yang digunakan juga.

Perhatikan bahawa dalam beberapa kes, nilai penggunaan mungkin tidak wujud. Menurut CSS Cascading dan Warisan Tahap 4 Spesifikasi:

... Jika atribut tidak digunakan untuk elemen, ia tidak menggunakan nilai; Oleh itu, sebagai contoh, atribut flex tidak menggunakan nilai pada elemen yang bukan item yang fleksibel.

Nilai sebenar

Kadang -kadang, penyemak imbas tidak boleh menggunakan nilai penggunaan dengan segera dan perlu diselaraskan. Nilai yang diselaraskan ini dipanggil nilai sebenar . Pertimbangkan keadaan di mana saiz fon perlu diselaraskan mengikut fon yang tersedia, atau jika penyemak imbas hanya boleh menggunakan nilai integer semasa rendering dan perlu menghampiri nilai bukan integer.

Warisan dalam pengiraan gaya penyemak imbas

Ringkasnya, warisan mengawal nilai elemen yang tidak ditetapkan secara eksplisit. Untuk atribut yang diwarisi, nilai ini diambil dari nilai yang dikira pada elemen induk, dan untuk atribut yang tidak diasingkan, nilai awal atribut (nilai yang digunakan apabila kata kunci initial ditentukan).

Kami secara ringkas membincangkan kewujudan "nilai -nilai yang dikira" sebelum ini, tetapi kita perlu menjelaskan sesuatu. Kami membincangkan nilai yang dikira sebagai jenis nilai yang mengambil bahagian dalam proses parsing gaya, tetapi "nilai yang dikira" juga merupakan istilah umum untuk nilai yang dikira oleh penyemak imbas untuk gaya halaman. Anda biasanya boleh memahami jenis apa yang kita maksudkan melalui konteks sekitarnya.

Hanya nilai yang dikira boleh mengakses sifat yang diwarisi. Nilai mutlak piksel (mis text-align: left 477px), nombor (mis. 3), atau nilai ( left . atau nilai (seperti lebar viewport peranti).

Anda mungkin menyedari bahawa nilai -nilai yang dipaparkan dalam tab pengiraan penyemak imbas tidak semestinya nilai -nilai yang dikira yang dibincangkan sebelumnya (seperti nilai yang dikira berbanding nilai tertentu atau menggunakan nilai). Sebaliknya, nilai yang dipaparkan adalah sama dengan nilai yang dikembalikan oleh fungsi getComputedStyle() . Fungsi ini mengembalikan nilai yang bergantung kepada harta dan akan menjadi nilai yang dikira atau nilai yang digunakan.

Sekarang, mari kita lihat beberapa contoh.

Warisan warna

 <code>main { color: blue; } /* 颜色无论如何都会继承，但我们也可以明确说明： */ main > p { color: inherit; }</code>

Atribut color pada elemen main dikira sebagai biru. Oleh kerana warisan warna secara lalai, kita sebenarnya tidak perlu menggunakan color: inherit untuk unsur -unsur kanak -kanak perenggan, kerana ia akan menjadi biru juga. Tetapi ini membantu menggambarkan ini.

Nilai warna melalui proses parsing sendiri untuk menjadi nilai penggunaan.

Warisan saiz fon

 <code>main { font-size: 1.2em; } main > p { /* 未指定样式*/ }</code>

Seperti yang kita lihat di bahagian mengenai nilai dan bagaimana ia diproses, nilai relatif saiz fon kami akan dikira sebagai nilai mutlak dan kemudian diwarisi oleh elemen perenggan, walaupun kita tidak secara jelas mengisytiharkannya (sekali lagi, saiz fon mewarisi secara lalai). Jika kita telah menggayakannya sebelum melalui pemilih elemen perenggan global, perenggan mungkin mendapat beberapa gaya tambahan kerana lata. Sebarang nilai warisan yang mungkin diwarisi, dan beberapa sifat yang tidak menghasilkan nilai akan ditetapkan pada nilai awal mereka.

Peratusan warisan saiz fon yang ditentukan

 <code>body { font-size: 18px; } main { font-size: 80%; } main > p { /* 未指定样式*/ }</code>

Sama dengan contoh sebelumnya,<main></main> Saiz fon elemen akan menjadi mutlak sebelum penyediaan warisan, dan perenggan akan mewarisi saiz fon yang 80% daripada nilai 18px badan, iaitu 14.4px.

Warisan paksa dan pengiraan pasca berlabuh

Nilai -nilai yang dikira biasanya dihuraikan sebanyak nilai -nilai yang ditentukan tanpa susun atur, tetapi seperti yang dinyatakan sebelum ini, beberapa nilai hanya boleh dihuraikan selepas susun atur, seperti peratusan nilai lebar yang ditentukan. Walaupun width bukan atribut warisan, kita boleh memaksa warisan untuk menggambarkan parsing gaya pra dan pasca bayaran.

Ini adalah contoh buatan, tetapi apa yang kami lakukan ialah mengeluarkan elemen dari susun atur halaman dengan menetapkan harta display kepada none . Dua div dalam tag kami mewarisi 50% lebar elemen induk mereka. Dalam tab "pengiraan" alat pemaju saya, lebar yang dikira div pertama adalah mutlak dan telah diselesaikan kepada nilai piksel (243.75px untuk saya). Sebaliknya, lebar div kedua dikeluarkan dari susun atur menggunakan display: none yang masih 50%.

Kami akan menganggap nilai yang ditentukan dan dikira elemen induk adalah 50% (sebelum susun atur), menggunakan nilai seperti yang ditunjukkan di bawah tab Pengiraan - bagi saya ia adalah 487.5px, selepas susun atur. Nilai selimut div ini dibahagikan kepada dua (termasuk 50% blok).

Nilai -nilai ini mesti dikira apabila lebar perubahan viewport penyemak imbas. Oleh itu, nilai yang ditentukan oleh peratusan menjadi peratusan nilai yang dikira dan kemudian menjadi nilai penggunaan piksel.

Sifat yang diwarisi lalai

Bagaimana anda tahu jika atribut diwarisi secara lalai? Bagi setiap harta CSS dalam dokumen MDN, terdapat bahagian spesifikasi yang memberikan beberapa butiran tambahan, termasuk sama ada harta itu diwarisi atau tidak. Berikut adalah penampilan atribut color :

Atribut mana yang mewarisi secara lalai dan atribut yang tidak, bergantung kepada sebahagian besar pada akal sehat.

Mdn

Pilihan rujukan lain ialah bahagian sifat spesifikasi W3C. Yang lain adalah benang stackoverflow ini, yang mungkin tidak lengkap pada masa penulisan.

Berikut adalah beberapa contoh atribut yang diwarisi:

• color
• direction
• font-family
• font-size
• font
• letter-spacing
• line-height
• list-style-type
• tab-size
• text-align
• text-justify
• text-transform
• visibility
• word-wrap

Contoh atribut yang tidak diwarisi (tetapi anda boleh memaksa warisan menggunakan kata kunci inherit ):

• box-shadow
• border
• content
• height
• margin
• object-fit
• opacity
• padding
• position
• transform
• transition
• width
• z-index

Mudah -mudahan ini memberi anda pemahaman yang jelas tentang bagaimana penyemak imbas mengira gaya dan bagaimana merujuknya dalam alat pemaju. Seperti yang anda lihat, terdapat banyak nilai di belakang tabir. Mempunyai konteks ini sangat membantu dalam membantu anda menyelesaikan masalah dan mengetahui lebih lanjut mengenai bahasa yang indah CSS yang kami tahu.

Bacaan lanjut

• Quirksmode.org inherit , nilai initial dan unset
• Warisan CSS Asha Laxmi: Pengenalan
• CSS Warisan, Cascading, dan Global Skop untuk Heydon Pickering: sahabat baik anda yang baru, lama, buruk
• Pendekatan terbaru Ollie Williams untuk mengendalikan Cascade, Warisan dan Kekhususan
• Cascading dan Warisan MDN
• Warisan MDN
• Cascade MDN
• CSS Cascade dan Warisan Tahap 4 (Spesifikasi W3C)
• Pembinaan, susun atur, dan lukisan pokok Ilya Grigorik
• Window.getComputedStyle()
• URL Interaktif Aaron Gustafson