Yeni if() işleviyle CSS koşullu ifadeleri

Una Kravets

Yayınlanma tarihi: 1 Temmuz 2025

Chrome 137'den itibaren if() işleviyle CSS satır içi koşullu ifadelerini deneyebilirsiniz. if(), stil sorguları ve medya sorguları gibi dinamik stiller için daha temiz bir geliştirici arayüzü sağlar. Bu gönderide, bu iki özellik arasındaki temel farklar hakkında bilgi edinebilirsiniz.

CSS if() işlevi, aşağıdaki şekilde yapılandırılmış bir dizi koşul-değer çifti kullanılarak çalışır:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

Diğer koşulların hiçbiri karşılanmadığında kullanılan bir else ifadesi sağlayabilirsiniz:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

Şu anda if() üç farklı sorgu türüyle çalışmaktadır:

• style(): Stille ilgili sorgular
• media(): Medya sorguları
• supports(): Sorguları destekler

Bunu bazı örneklerle bağlama oturtalım:

Demo: Satır içi medya sorguları

if() kullanmak, stillerinize satır içi medya sorguları eklemenin harika bir yoludur. Örneğin, kullanıcının tema tercihini (açık veya koyu) kontrol edebilir ya da görünüm alanı genişliği için satır içi medya sorguları yapabilirsiniz. Aşağıdaki örnekte, işaretleme cihazları için medya sorgusu gösterilmektedir. Düğmenin varsayılan boyutu, fare gibi hassas işaretçili bir cihazda 30 piksel olur. Ancak kaba işaretçili dokunmatik ekranlı cihazlarda, daha kolay erişim için uygun dokunma aralığı sağlamak amacıyla düğme boyutu, önerilen minimum 44 piksel olur.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Yukarıdaki kod, aşağıdaki medya sorgusuyla aynı sonucu verir:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

if() biçimini kullanarak stil mantığının iki farklı yerde bulunmasını gerektirmeden mantığı satır içi olarak kullanabilirsiniz.

Demo: Satır içi destek sorguları

if() simgesini kullanmanın bir başka yolu da satır içi destek sorguları oluşturmaktır. Örneğin, OKLCH gibi geniş gamlı renk desteğini kontrol etmek için şunları kullanabilirsiniz:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

Bu kodla, tarayıcı oklch renk alanını destekliyorsa kullanıcı daha canlı bir renk görür ve ::after sözde içeriğinde "Tarayıcınız OKLCH'yi destekliyor" mesajını alır.

Daha fazla bilgi edinmek ve RGB ile daha gelişmiş renk uzayları arasındaki farkı görmek için oklch.com adresindeki renk seçiciye ve kaynaklara göz atın.

Demo: Kullanıcı arayüzü durumunu görselleştirme

Duruma dayalı stil için if() öğesini de kullanabilirsiniz. Örneğin, ilerleme kartlarını kullanıcı arayüzü durumlarına (beklemede veya tamamlandı) göre stilize etme. Durumu doğrudan bir veri özelliğinde veya özel bir özellikte saklayın, ardından if() kullanarak özelliğe satır içi stiller uygulayın.

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

style(), if() işlevinin içinde olduğunda, hedeflediğiniz öğeyi doğrudan stilize edebilirsiniz. CSS stil sorgularının gerektirdiği gibi bir üst öğeye ihtiyacınız yoktur.

Bu demoda, if() kullanarak CSS'ye yeni bir mimari yaklaşımı nasıl destekleyebileceğinizle ilgili temel bir örnek gösterilmektedir. CSS özel niteliklerini sınıflar yerine kullanmanın bir avantajı, CSS'de güncellemeyi kolaylaştırmasıdır. Örneğin, medya sorguları veya :hover gibi sözde durumlar kullanılarak güncellenebilirler.

Sırada ne var?

if()'nın eklenmesi, CSS geliştiricileri için yeni bir mimari fırsat sunuyor. Stil sorguları gibi teknolojiler geliştikçe if() işlevlerinde aralık sorgulama olasılığı artacak ve bu işlevler, yakında kullanıma sunulacak özel işlevler önerisiyle (CSS @function) birlikte kullanıldığında da faydalı olacaktır.

Bu özellikler hakkında daha fazla bilgi edinmek için aşağıdaki makaleleri inceleyin:

• 3. demo ile ilgili 3 dakikalık video
• Lea Verou'nun makalesi