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 ifadeleri deneyebilirsiniz. if(), stil sorguları ve medya sorguları gibi dinamik stiller için daha temiz bir geliştirici arayüzü sağlar. Bu arayüzde, bu gönderide bahsedilen bazı önemli farklılıklar vardır.

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

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

Diğer koşullardan hiçbiri karşılanmıyorsa kullanılan bir else ifadesi sağlayabilirsiniz:

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

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

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

Bunu bazı örneklerle açıklayalım:

Demo: Satır içi medya sorguları

if() kullanmak, stillerinize satır içi medya sorguları eklemenin mükemmel bir yoludur. Örneğin, kullanıcının tema tercihini (açık veya koyu) kontrol edebilir veya ekran genişliği için satır içi medya sorguları yapabilirsiniz. Aşağıdaki örnekte, işaretçi cihazlar için medya sorgusu gösterilmektedir. Düğmenin varsayılan boyutu, fare gibi hassas bir işaretçiye sahip cihazlarda 30 piksel olur. Ancak kaba işaretçiye sahip dokunmatik ekranlı cihazlarda, daha kolay erişim için uygun dokunma aralığıyla düğmenin boyutu en az 44 piksel olmalıdır.

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

Önceki 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 kullanmak, stil mantığının iki farklı yerde olmasına gerek kalmadan mantığı satır içi olarak kullanmanıza olanak tanır.

Demo: Satır içi destek sorguları

if()'ü kullanmanın bir diğer yolu da satır içi destek sorguları oluşturmaktır. Örneğin, OKLCH gibi geniş renk yelpazesi 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ı da alır.

Daha fazla bilgi edinmek ve rgb ile daha gelişmiş renk alanları 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() değerini de kullanabilirsiniz. Örneğin, ilerleme kartlarının stilini kullanıcı arayüzü durumuna (beklemede veya tamamlandı) göre ayarlama. Durumu doğrudan bir veri özelliğinde veya özel mülkte saklayın ve ardından if() kullanarak mülkte satır içi stiller uygulayın.

<div class="card" data-status=>"c<ompl>ete"
  ...
/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);
}

if() işlevi içinde style() ile, hedeflediğiniz öğeye doğrudan stil uygulayabilirsiniz. CSS stil sorguları gibi bir üst öğeye gerek yoktur.

Bu demoda, CSS'ye yönelik yeni bir mimari yaklaşımı desteklemek için if()'ü nasıl kullanabileceğinizle ilgili temel bir örnek gösterilmektedir. CSS özel özelliklerini sınıflar yerine kullanmanın avantajlarından biri, CSS'de bunları güncellemenin kolay olmasıdır. Örneğin, medya sorguları veya :hover gibi sözde durumlar kullanılarak güncellenebilirler.

Sırada ne var?

if() eklenmesiyle CSS geliştiricileri için yeni bir mimari fırsatı sağlandı. Stil sorguları gibi teknolojiler geliştikçe aralık sorgulama, if() işlevleri içinde büyük olasılıkla mümkün olacak ve yaklaşan özel işlev önerisiyle (CSS @function) birlikte kullanıldığında da faydalı olacaktır.

Bu özellikler hakkında daha fazla bilgi edinmek için:

• 3. Demo'nun 3 dakikalık videolu açıklamalı kılavuzu
• Lea Verou'nun makalesi