Değişken fallback
var() içinde fallback değer kullanmayı öğrenirsin.
Fallback değeri
Bazen bir değişken tanımlanmamış olabilir; ad yanlış yazılmış ya da henüz eklenmemiş olabilir. Böyle durumlarda var()'a ikinci bir bağımsız değişken verirsin: fallback değeri.
Yazımı: var(--ad, yenideger). Değişken bulunamazsa, tarayıcı fallback'i kullanır. Böylece sayfan görünümü bozulmaz; güvenli bir yedek vardır.
Fallback ne zaman gerekir?
İki yaygın durum vardır. Birincisi: değişken adını henüz hiçbir yerde tanımlamadıysan. İkincisi: değişkeni dış stillerden bekliyorsan ama o dosya yüklenmezse.
Örnek: color: var(--metin, #111827);. --metin tanımsızsa metin koyu gri olur; tanımlıysa tanımdaki değer kullanılır. Fallback her zaman aynı türden olmalı; renkse renk, uzunluksa uzunluk.
Uygulama Fallback'li var() yaz
.uyari seçicisi içine color: var(--text, #111827); bildirimini ekle. Değişken adı --text, fallback değeri #111827 olmalı.
Örnek çözümü göster
.uyari seçicisi aç; color: var(--text, #111827); yaz.
Örnek çözüm:
.uyari {
color: var(--text, #111827);
}Kendini test et
-
Hangisi var() içinde fallback'i doğru yazar?
color: ?- var(--renk #2563eb)
- var(--renk; #2563eb)
- var(--renk | #2563eb)
- var(--renk, #2563eb)
Cevabı göster
var(--renk, #2563eb) — Doğru! Fallback virgülle ayrılır: var(--ad, değer).
-
Boşluğa fallback ekle
p { padding: var(--boşluk____; }Cevabı göster
p { padding: var(--boşluk, 16px); } -
Senaryoları eşleştir
- --ad tanımsız
- fallback devreye girer
- --ad tanımlı
- tanımdaki değer kullanılır
- var(--ad, yedek)
- fallback sözdizimi
- virgülle ayrım
- fallback ayıracı