Twister Otak Properti Kustom

Saya adalah bagian dari 82% yang salah dalam kuis Lea ( versi tweet ).

Berikut kodenya:

 :root { --accent-color: skyblue; } div { --accent-color: revert; background: var(--accent-color, orange); }

Jadi latar belakang apa yang saya harapkan <div> miliki?

Otak saya berjalan seperti ini:

  1. Nah, --accent-color dideklarasikan, jadi jelas bukan orange (fallback).
  2. Nilai untuk background adalah revert , jadi pada dasarnya background: revert;
  3. background tidak mewarisi, dan bahkan jika Anda memaksanya, itu akan mewarisi dari <body> , bukan root.
  4. Jadi… transparent .

Nggak.

Lea:

[Karena nilainya revert ] membatalkan gaya penulis apa pun, dan menyetel ulang kembali ke nilai apa pun yang akan dimiliki properti dari lembar gaya pengguna dan lembar gaya UA. Dengan asumsi tidak ada --accent-color deklarasi di lembar gaya pengguna, dan tentu saja lembar gaya UA tidak menyetel properti khusus, maka itu berarti properti tidak memiliki nilai.

Karena properti khusus adalah properti yang diwarisi (kecuali mereka terdaftar dengan inherits: false , tetapi yang ini tidak), ini berarti nilai yang diwarisi menetes, yaitu — Anda dapat menebaknya — skyblue .

Stephen memposting kuis serupa tempo hari:

Sekali lagi, otak saya benar-benar salah. Ini berjalan:

  1. OK, baik, --color dideklarasikan, jadi bukan biru (fallback).
  2. Ini bukan red karena deklarasi kedua akan menimpa yang itu.
  3. Jadi, pada dasarnya seperti p { color: inherit; } .
  4. <p> akan mewarisi yellow dari <body> , yang akan tetap dilakukan secara alami, tapi apa pun, itu tetap yellow .

Nggak.

Rupanya inherit sana sebenarnya mewarisi dari tempat berikutnya di pohon yang menetapkannya, yang html lakukan, jadi green . Begitulah cara kerja pewarisan normal. Ini hanya twister otak karena mudah untuk menggabungkan color properti dengan --color properti kustom.

Mungkin juga berguna untuk mengetahui bahwa ketika Anda benar-benar mendeklarasikan properti khusus dengan @property Anda dapat mengatakan apakah Anda ingin properti itu diwarisi atau tidak. Jadi itu akan mengubah permainan dengan twister otak ini!

 @property --property-name { syntax: '<color>'; inherits: false; initial-value: #c0ffee; }

Postingan Custom Property Brain Twisters muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 26, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *