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ı

Sıradaki ders: Tema değiştirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler