Butiran Mengejutkan Pembolehubah CSS - Menggunakan var() dan Contoh Hebat

Ini ialah separuh kedua siaran CSS Variable saya, separuh pertama sudah tiba.
Dalam artikel ini kita akan melihat butiran var(). Dan dua contoh hebat:

• Animasi menggunakan Pembolehubah CSS
• Togol mod gelap CSS tulen dengan pengesanan tetapan sistem

Menggunakan var()

Var() mengakses nilai sifat tersuai (pembolehubah CSS). Sintaksnya adalah seperti berikut:

var( <custom-property-name>, <fallback-value>? )

Peraturan Asas

1. Parameter pertama mestilah pembolehubah CSS: Nilai langsung, seperti var(20px), akan mengakibatkan ralat, kerana var() hanya menerima nama sifat tersuai.

2. var() tidak boleh menggantikan nama harta: Dalam erti kata lain, anda tidak boleh menulis sesuatu seperti var(--prop-name): 20px; kerana var() terhad untuk digunakan dalam nilai hartanah sahaja.
   

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

Tingkah Laku Terperinci

1. var(--b, fallback_value) Fallback: Parameter kedua bertindak sebagai nilai fallback, digunakan apabila --b tidak sah.

2. var(--c,) Sintaks dengan Sandaran Kosong: Jika nilai sandaran dibiarkan kosong, sintaks kekal sah dan akan lalai kepada nilai kosong jika --c tidak sah .

3. Koma Berbilang: Dalam var(--d, var(--e), var(--f), var(--g)), semuanya selepas koma pertama ialah dianggap sebagai sandaran, jadi jika --d tidak sah, ungkapan var() menilai var(--e), var(--f), var(--g) sebagai satu sandaran, kepada tentukan keputusan.

4. var() sebagai Token CSS Lengkap: Fungsi bertindak sebagai token CSS lengkap, seperti 20px. Oleh itu, var(--size)var(--unit) tidak akan mencipta 20px dan dianggap tidak sah.

5. Menggunakan paral dengan Pembolehubah CSS: Menetapkan parap kepada pembolehubah CSS bermakna ia tidak sah. Untuk memaparkan awalan sebagai nilai, ia mesti diletakkan dalam sandaran.

6. url() dan var() Penggunaan: Memandangkan url() dianggap sebagai token CSS yang lengkap, anda perlu mentakrifkan url() penuh dalam pembolehubah.
   

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

Resolusi dan Skop Pembolehubah

Pembolehubah CSS, seperti sifat CSS lain, ikut peraturan khusus CSS untuk skop dan kekhususan. Memahami cara faktor ini mempengaruhi pembolehubah CSS membolehkan kawalan yang lebih tepat.

Pembolehubah Global dan Skop:
Pembolehubah yang ditakrifkan dalam :root digunakan secara global, manakala pembolehubah yang ditakrifkan dalam pemilih mempunyai skop yang lebih terhad.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

Keutamaan mengikut Kekhususan:
Kekhususan yang lebih tinggi akan mengatasi kekhususan yang lebih rendah untuk pembolehubah CSS.

var( <custom-property-name>, <fallback-value>? )

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

Dalam contoh ini, warna latar belakang .box kekal putih, kerana --background telah diselesaikan kepada rgb(255, 255, 255) sebelum .box ditakrifkan semula --hijau: 0.

Menilai Semula Pembolehubah dengan Kelas Pseudo:
Pembolehubah berubah berdasarkan keadaan kelas pseudo apabila ditakrifkan pada tahap yang sama.

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

---

Seterusnya, mari kita terokai beberapa kes penggunaan lanjutan untuk pembolehubah CSS:

Contoh Penggunaan A: Animasi

Pembolehubah CSS tidak boleh dianimasikan secara langsung kerana penyemak imbas tidak boleh membuat kesimpulan jenis data. Untuk menyelesaikan masalah ini, gunakan @property untuk menentukan jenis pembolehubah dan nilai awal, membolehkan penyemak imbas memahami cara menghidupkan pembolehubah.

   :root {
     --main-color: blue; /* Globally applied */
   }

   .container {
     --main-color: green; /* Scoped, applies only within .container */
   }

   :root {
     --main-color: blue;
   }

   .section {
     --main-color: green; /* Overrides :root definition */
   }

   .section p {
     color: var(--main-color); /* Shows green */
   }

   p {
     color: var(--main-color); /* Shows blue */
   }

Menambah Togol Manual yang Sejajar dengan Keutamaan Sistem

Walaupun tetapan sistem mengawal tema secara lalai, kami mungkin mahu memberi pengguna pilihan untuk menogol antara tema terang dan gelap secara manual. Untuk mencapai ini, kami boleh menambah kotak pilihan untuk menogol keadaan. Sebaik-baiknya, apabila kotak pilihan dipilih, ia menunjukkan mod gelap dan apabila dinyahpilih, ia mewakili mod cahaya.

Walau bagaimanapun, CSS tidak dapat mengesan tetapan sistem secara automatik dan menukar keadaan kotak semak dengan sewajarnya, terutamanya dalam mod gelap. Untuk mengendalikan pengehadan ini, kita boleh menggunakan pembolehubah CSS dan pemilih :has() untuk mengawal penukaran tema berdasarkan keadaan kotak pilihan.

Saya ingin mencuba mencapai ini sepenuhnya dengan CSS, tetapi memandangkan sistem pengguna mungkin ditetapkan sama ada kepada mod terang atau gelap, CSS sahaja tidak boleh menanda kotak semak secara automatik dalam mod gelap.

Jika kami tidak dapat memindahkan gunung, kami akan menghalakan laluan itu. Inilah penyelesaiannya:

• Kami akan menggunakan CSS untuk membuat suis togol, dengan keadaan "MATI" visual mewakili mod cahaya dan "HIDUP" mewakili mod gelap.

• Apabila sistem ditetapkan kepada mod cahaya: Apabila kotak pilihan dinyahpilih, ia sepadan dengan keadaan "MATI" (mod cahaya). Apabila dipilih, ia sepadan dengan keadaan "HIDUP" (mod gelap).

• Apabila sistem ditetapkan kepada mod gelap: Memandangkan pilihan sistem diterbalikkan, keadaan visual juga terbalik. Apabila kotak pilihan dinyahpilih, ia sepadan dengan "HIDUP" (mod gelap). Apabila dipilih, ia sepadan dengan "MATI" (mod cahaya).

Untuk mencapai kesan ini, kita memerlukan dua elemen utama:

Pertama: Pembolehubah yang Berubah Berdasarkan Tetapan Sistem dan Keadaan Kotak Semak

var( <custom-property-name>, <fallback-value>? )

Kedua: Togol Gelagat Berdasarkan Tetapan Sistem untuk Perwakilan Keadaan dan HIDUP/MATI yang ditandai

Sifat CSS mod terang dan gelap diterbalikkan bergantung pada tetapan sistem.

.foo {
  margin: var(20px); /* Error, 20px is not a CSS variable */

  --prop-name: margin-top;
  var(--prop-name): 20px; /* Error, cannot use var() this way */
}

Memudahkan Persediaan Pembolehubah dengan Trik Pembolehubah CSS

Di sini kami akan menggunakan teknik Togol Angkasa untuk memudahkan tetapan pembolehubah. Berikut ialah kodnya, diikuti dengan penjelasan tentang cara ia berfungsi:

:root {
  /* 1. */
  margin: var(--b, 20px); /* Uses 20px if --b is invalid */

  /* 2. */
  padding: var(--c,) 20px; /* Falls back to 20px if --c is invalid */

  /* 3. */
  font-family: var(--fonts, "lucida grande", tahoma, Arial); /* Uses fallback font stack if --fonts is invalid */

  /* 4. */
  --text-size: 12;
  --text-unit: px;
  font-size: var(--text-size)var(--text-unit); /* Invalid, as it does not resolve to 12px */

  /* 5. */
  --initialized: initial;
  background: var(--initialized, initial); /* Results in background: initial */

  /* 6. */
  --invalid-url: "https://useme.medium.com";
  background: url(var(--invalid-url)); /* Invalid, as url() cannot parse var() */

  --valid-url: url(https://useme.medium.com);
  background: var(--valid-url); /* Correct usage */
}

Kunci di sini adalah dalam baris --warna latar belakang: var(--light, #fbfbfb) var(--dark, #121212);. Di sini, warna latar belakang bergantung pada nilai --terang dan --gelap, dengan berkesan mensimulasikan if/else dalam harta itu.

Bagaimanakah ia berfungsi? Pada mulanya, --light: var(--ON); dan --ON: awal; jadikan --ON keadaan tidak sah. Sementara itu, --OFF ditetapkan sebagai rentetan kosong. Apabila digunakan pada var(--light, #fbfbfb) var(--dark, #121212), pembolehubah --light yang tidak sah akan lalai kepada #fbfbfb dan pembolehubah --dark yang sah (kosong) membenarkan --background-color untuk menyamai #fbfbfb.

Semua pembolehubah warna lain mengikut logik yang sama, melaraskan berdasarkan keadaan --terang dan --gelap. Dengan cara ini, setiap pembolehubah warna hanya perlu ditakrifkan sekali.

Menukar keadaan menjadi mudah. Jika mod gelap aktif, gunakan --light: var(--OFF); dan --dark: var(--ON);. Dalam mod cahaya, terbalikkannya. Walaupun tidak serta-merta intuitif, kaedah ini pada masa ini adalah yang paling berkesan dengan CSS. Jika ada penyelesaian yang lebih baik, ia patut diterokai.

Contoh lengkap: Contoh CodePen

---

Ringkasan

CSS terus berkembang, dengan pembolehubah CSS tersedia dalam penyemak imbas utama sejak 2016. Ciri baharu seperti @property dan :has() memperluaskan lagi fleksibiliti pembolehubah CSS. Digabungkan dengan alatan baharu yang lain, pembolehubah CSS menjadi lebih berkuasa—sebagai contoh, mereka kini boleh meningkatkan animasi dipacu tatal untuk mencipta kesan dinamik visual. Sebagai elemen teras untuk menyimpan keadaan dalam CSS, sama seperti pembolehubah dalam mana-mana bahasa pengaturcaraan, pemahaman yang kukuh tentang pembolehubah CSS akan terbukti tidak ternilai untuk penggayaan dan reka bentuk yang lebih canggih.

---

Rujukan

• https://stackoverflow.com/questions/42330075/is-there-a-way-to-interpolate-css-variables-with-url/42331003#42331003
• https://kizu.dev/cyclic-toggles/#was-this-always-possible
• https://dev.to/afif/what-no-one-told-you-about-css-variables-553o
• https://hackernoon.com/cool-css-variable-tricks-to-try-uyu35e9
• https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

Atas ialah kandungan terperinci Butiran Mengejutkan Pembolehubah CSS - Menggunakan var() dan Contoh Hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!