CSS'de if() Fonksiyonunu Doğru Şekilde Nasıl Kullanılır

Chrome 137 ile birlikte CSS'e eklenen if() fonksiyonu, koşullu değerleri ifade etmek için güçlü bir yol sunuyor. Fonksiyon, koşul-değer çiftlerini kabul eder ve ilk doğru koşulun değerini döndürür.

Temel Sözdizimi

.box {
  --theme: dark;
  background: if(style(--theme: dark), black, white);
  color: if(style(--theme: dark), white, black);
}

Hesaplanan Değerler ile Sorun

Hesaplanan değerlerle çalışırken dikkat edilmesi gereken bir durum var:

.box {
  --n: 6;
  --f: calc(var(--n) / 2); / 3 olmasını bekliyoruz /
  background: if(style(--f: 3), red, green); / Yeşil renk alıyoruz! /
}

Neden yeşil? Çünkü --f değeri henüz hesaplanmamış durumda.

Sorunun Nedeni

Bu durum kafa karıştırıcı olabilir, ancak çözümü oldukça basit. Tarayıcının hesaplamayı gerçekleştirebilmesi için değeri @property kullanarak kaydetmeniz gerekiyor. Aksi takdirde, tarayıcı değeri olduğu gibi görür (sanki bir string değeri gibi).

Doğru Kullanım

Hesaplanan değerlerin doğru çalışması için @property ile kayıt yapın:

@property --f {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.box {
  --n: 6;
  --f: calc(var(--n) / 2); / Şimdi gerçekten 3 /
  background: if(style(--f: 3), red, green); / Kırmızı renk alıyoruz /
}

Daha Fazla Örnek

Tema Değiştirme

.card {
  --theme: light;
  background: if(
    style(--theme: dark),
    #333,
    style(--theme: light),
    #fff,
    #f0f0f0 / varsayılan /
  );
}

Sayısal Karşılaştırmalar

@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.notification {
  --count: 5;
  display: if(style(--count: 0), none, block);
  background: if(style(--count: 0), transparent, red);
}

Basit Koşullar

.button {
  --disabled: false;
  opacity: if(style(--disabled: true), 0.5, 1);
  cursor: if(style(--disabled: true), not-allowed, pointer);
}

Tarayıcı Desteği

CSS if() fonksiyonu şu anda sadece Chrome 137+ sürümünde destekleniyor. Diğer tarayıcılar için fallback değerler kullanmayı unutmayın:

.box {
  / Fallback /
  background: gray;

  / Modern tarayıcılar için /
  background: if(style(--theme: dark), black, white);
}

Özet

• Sözdizimi: if(koşul, değer1, koşul2, değer2, varsayılan)
• Hesaplanan değerler: @property ile kayıt gerektirir
• Tarayıcı desteği: Chrome 137+ (2025 itibariyle)
• Fallback: Eski tarayıcılar için alternatif değerler sağlayın

CSS if() fonksiyonu, koşullu stilleri daha temiz ve okunabilir şekilde yazmanıza olanak tanır. Hesaplanan değerlerle çalışırken @property kaydını unutmayın ve tarayıcı desteği için fallback değerler kullanın.