Nilai Sandaran dan var()
Sediakan nilai sandaran dalam var() apabila sifat tersuai tidak ditakrifkan atau tidak sah.
Nilai Sandaran dan var() ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Sintaks Nilai Sandaran var()
Fungsi var() menerima argumen kedua pilihan sebagai nilai sandaran, yang digunakan apabila sifat tersuai tidak ditakrifkan.
<button class="button">Fallback: royalblue</button>
Apabila Nilai Sandaran Digunakan
Nilai sandaran digunakan apabila:
- Sifat tidak ditakrifkan dalam skop
- Sifat mempunyai nilai
initial - Sifat diisytiharkan dengan nilai yang tidak sah untuk konteksnya
Berbilang Tahap Nilai Sandaran
Sarang panggilan var() untuk merangkaikan beberapa tahap nilai sandaran:
<p class="text">Falls through two levels to #3b82f6</p>
Nilai Sandaran Boleh Berupa Sebarang Nilai
Nilai sandaran boleh berupa sebarang nilai yang sah untuk sifat tersebut — termasuk pemboleh ubah lain, nilai terhitung atau nilai literal:
<div class="card">16px / 50%</div>
Kata Kunci initial
Menetapkan sifat tersuai kepada initial menjadikannya seolah-olah sifat itu tidak pernah ditetapkan. Apabila digabungkan dengan nilai sandaran, cara ini membolehkan komponen memilih untuk tidak menggunakan sifat tersuai yang diwarisi.
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
Nilai Tidak Sah Terjamin
Menggunakan initial sebagai nilai sifat tersuai ialah teknik untuk menjamin pencetusan nilai sandaran. Cara ini boleh mencipta bendera ciri pilihan dalam CSS.
Sifat Tersuai + @property
Peraturan @property (Houdini) mendaftarkan sifat tersuai bertip dengan nilai awal yang terjamin. Cara ini lebih teguh berbanding bergantung pada nilai sandaran.
<div class="track">
<div class="bar"></div>
</div>
Nilai Sandaran untuk Nilai Selamat Animasi
Pastikan peralihan berfungsi walaupun sifat tersuai tidak ditetapkan dengan menyediakan nilai sandaran selamat yang boleh menjadi titik permulaan peralihan:
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
Menyahpepijat Pemboleh Ubah yang Hilang
Jika sifat tersuai tiada dan tiada nilai sandaran disediakan, sifat itu dikira sebagai nilai awalnya (selalunya kata kunci initial). Bagi warna, hal ini boleh menghasilkan hasil lutsinar atau hitam yang tidak dijangka. Sentiasa tambahkan nilai sandaran pada sifat penting.
var() dalam Sifat Tersuai
Nilai sifat tersuai itu sendiri boleh merujuk kepada sifat tersuai lain, lalu membentuk rantaian token:
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
Nilai Sandaran dan Kekhususan
Nilai sandaran tidak berkaitan dengan kekhususan — nilai sandaran hanya digunakan apabila sifat tersuai yang dirujuk tidak ditakrifkan atau tidak sah. Kekhususan menentukan peraturan yang menetapkan sifat tersuai, bukannya nilai sandaran yang digunakan.
Semakan Pantas
Apakah yang dilakukan oleh color: var(--theme-text, #111) apabila --theme-text tidak ditakrifkan?
Ulang Kaji
var(--name, fallback) menyediakan nilai sandaran apabila sifat tersuai tidak ditakrifkan. Nilai sandaran boleh disarangkan untuk menyediakan beberapa tahap sandaran. Gunakan @property untuk sifat tersuai bertip dengan nilai awal yang terjamin. Sentiasa sediakan nilai sandaran untuk sifat visual yang kritikal.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Nilai Sandaran dan var()” percuma?
Ya — teks penuh “Nilai Sandaran dan var()” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Nilai Sandaran dan var()”?
Sediakan nilai sandaran dalam var() apabila sifat tersuai tidak ditakrifkan atau tidak sah. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Nilai Sandaran dan var()” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mengisytiharkan dan Menggunakan Sifat Tersuai
- Nilai Sandaran dan var()
- Menentukan Skop Pemboleh Ubah kepada Komponen
- Mengemas Kini Pemboleh Ubah dengan JavaScript