Mengapa Pembolehubah CSS Tidak Boleh Digunakan Terus Dalam Fungsi `url()`?

Menginterpolasi Pembolehubah CSS dengan url()

Sifat tersuai (pembolehubah CSS) menyediakan cara yang berkesan untuk menyimpan dan menggunakan semula nilai penggayaan. Walau bagaimanapun, pengguna telah menghadapi cabaran apabila cuba menginterpolasi pembolehubah ini dalam fungsi url().

Mengapa Pembolehubah CSS Tidak Boleh Diinterpolasi dengan url()?

Walaupun keupayaan interpolasi fungsi CSS seperti rgba(), url() memberikan pengecualian yang ketara. Isu timbul kerana penghurai mentafsir url(var(--url)) sebagai token url() yang tidak sah, dan bukannya panggilan fungsi. Ini menghalang ungkapan var() daripada dinilai dan membawa kepada pengisytiharan latar belakang yang tidak sah.

Sebab Warisan

Ketidakupayaan untuk menginterpolasi pembolehubah dalam url() boleh dikaitkan kepada sebab warisan. Penghuraian token url() kekal tidak disentuh untuk mengekalkan keserasian ke belakang dengan versi CSS terdahulu.

Penyelesaian Alternatif

Walaupun interpolasi pembolehubah tidak boleh dilakukan dengan url(), terdapat ialah pendekatan alternatif untuk mencapai kesan yang serupa:

1. Tentukan URL Ungkapan dalam Harta Tersuai: Daripada menginterpolasi pembolehubah dalam fungsi url(), tentukan keseluruhan URL sebagai sifat tersuai. Contohnya:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

2. Gunakan JavaScript: Dengan JavaScript, anda boleh mencipta ungkapan url() secara dinamik daripada pembolehubah CSS dan menggunakannya menggunakan sifat latar belakang.

Atas ialah kandungan terperinci Mengapa Pembolehubah CSS Tidak Boleh Digunakan Terus Dalam Fungsi `url()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!