Pemutih Otak Properti Kustom | CSS-Trik

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> memiliki?

Otak saya berjalan seperti ini:

  1. Baik, --accent-color dideklarasikan, jadi itu pasti tidak orange (pengunduran).
  2. Nilai untuk latar belakang adalah revert, jadi intinya background: revert;
  3. Itu background properti tidak mewarisi, dan bahkan jika Anda memaksanya, itu akan mewarisi dari <body>, bukan akarnya.
  4. Begitu… transparent.

Nggak.

Lea:

[Because the value is revert it] membatalkan semua gaya penulis, 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 tersebut tidak memiliki nilai.

Karena properti khusus adalah properti yang diwarisi (kecuali jika properti tersebut terdaftar dengan inherits: false, tapi yang ini tidak), ini berarti nilai yang diwariskan masuk, yaitu — Anda dapat menebaknya — skyblue.

Stephen memposting kuis serupa tempo hari:

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

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

Nggak.

Tampaknya inherit sebenarnya ada warisan dari tempat berikutnya ke pohon yang menetapkannya, yang html apakah, jadi green. Itu sebenarnya sekarang adalah pekerjaan pewarisan normal. Ini hanya twister otak karena mudah digabungkan color properti dengan --color properti adat.

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

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