CSS @when Kuralında Uzmanlaşmak: Dinamik Web Tasarımı için Koşullu Stil Uygulaması

CSS Koşullu Kurallar Modülü Seviye 5 spesifikasyonunun bir parçası olan CSS @when kuralı, belirli koşullara bağlı olarak stilleri koşullu bir şekilde uygulamak için güçlü bir yöntem sunar. Geleneksel medya sorgularının ötesine geçerek, kapsayıcı boyutlarına, özel özelliklere ve hatta elemanların durumuna göre stil üzerinde daha ayrıntılı kontrol sağlar. Bu, web tasarımlarınızın duyarlılığını ve uyarlanabilirliğini önemli ölçüde artırabilir ve farklı cihazlar ve bağlamlarda daha iyi bir kullanıcı deneyimi sağlayabilir.

@when Kuralının Temellerini Anlamak

Özünde, @when kuralı, yalnızca belirli bir koşul karşılandığında bir CSS stil bloğunu çalıştırmak için bir mekanizma sağlar. Bu, programlama dillerindeki if ifadelerine benzer. Söz dizimini inceleyelim:

@when koşul {
  /* Koşul doğru olduğunda uygulanacak CSS kuralları */
}

koşul çeşitli faktörlere dayanabilir, bunlar arasında:

• Kapsayıcı Sorguları (Container Queries): Elemanları viewport yerine onları içeren elemanın boyutuna göre şekillendirme.
• Özel Durumlar (Custom States): Kullanıcı etkileşimlerine veya uygulama durumlarına tepki verme.
• CSS Değişkenleri: CSS özel özelliklerinin değerine göre stiller uygulama.
• Aralık Sorguları (Range Queries): Bir değerin belirli bir aralığa düşüp düşmediğini kontrol etme.

@when kuralının gücü, gerçek anlamda bileşen tabanlı stil oluşturma yeteneğinde yatmaktadır. Stil mantığını bir bileşen içine kapsülleyebilir ve çevresindeki sayfa düzeninden bağımsız olarak, yalnızca bileşen belirli kriterleri karşıladığında uygulanmasını sağlayabilirsiniz.

@when ile Kapsayıcı Sorguları

Kapsayıcı sorguları, duyarlı tasarım için ezber bozan bir özelliktir. Elemanların stillerini sadece viewport genişliğine göre değil, kendi ebeveyn kapsayıcılarının boyutlarına göre uyarlamalarına olanak tanır. Bu, daha esnek ve yeniden kullanılabilir bileşenler sağlar. Dar bir kenar çubuğuna mı yoksa geniş bir ana içerik alanına mı yerleştirildiğine bağlı olarak farklı görünen bir kart bileşeni hayal edin. @when kuralı bunu inanılmaz derecede basit hale getirir.

Temel Kapsayıcı Sorgusu Örneği

Öncelikle, bir kapsayıcı bildirmeniz gerekir. Bunu container-type özelliğini kullanarak yapabilirsiniz:

.container {
  container-type: inline-size;
}

inline-size, kapsayıcının satır içi boyutuna (yatay yazı modlarında genişlik, dikey yazı modlarında yükseklik) göre sorgulanmasına olanak tanır. Her iki boyutu da sorgulamak için size kullanabilir veya bir sorgu kapsayıcısı oluşturmamak için normal kullanabilirsiniz.

Şimdi, kapsayıcının boyutuna göre stiller uygulamak için @container'ı (genellikle @when ile birlikte kullanılır) kullanabilirsiniz:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

Bu örnekte, .card'ın düzeni kapsayıcının genişliğine göre değişir. Kapsayıcı en az 300px genişliğinde olduğunda, kart resmi ve metni yan yana gösterir. Daha dar olduğunda ise dikey olarak sıralanırlar.

Aynı sonuca ulaşmak için @when'i nasıl kullanabileceğimizi görelim. Tarayıcı desteğine ve kodlama tercihine bağlı olarak @container ile birleştirilebilir (çünkü @when sadece kapsayıcı boyutu dışındaki bazı senaryolarda daha fazla esneklik sunar):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

Bu durumda, `card-container` `@container` ile atanmış bir kapsayıcı adıdır ve `@when` içindeki `container(card-container)` belirtilen kapsayıcı bağlamının aktif olup olmadığını kontrol eder. Not: `container()` fonksiyonu desteği ve kesin söz dizimi tarayıcılar ve sürümler arasında değişiklik gösterebilir. Uygulamadan önce tarayıcı uyumluluk tablolarına başvurun.

Pratik Uluslararası Örnekler

• E-ticaret Ürün Listeleri: Kategori sayfası ızgarasındaki mevcut alana göre ürün listelerini farklı şekilde görüntüleyin. Daha küçük bir kapsayıcı sadece ürün resmini ve fiyatını gösterirken, daha büyük bir kapsayıcı kısa bir açıklama ve derecelendirme içerebilir. Bu, farklı internet hızlarına ve cihaz türlerine sahip farklı bölgeler için kullanışlıdır ve hem gelişmiş masaüstü bilgisayarlarda hem de gelişmekte olan ülkelerdeki düşük bant genişliğine sahip mobil bağlantılarda optimize edilmiş deneyimler sağlar.
• Haber Makalesi Özetleri: Bir haber web sitesinin ana sayfasında görüntülenen makale özetlerinin uzunluğunu kapsayıcının genişliğine göre ayarlayın. Dar bir kenar çubuğunda sadece bir başlık ve birkaç kelime gösterin; ana içerik alanında ise daha ayrıntılı bir özet sunun. Bazı dillerin (örneğin Almanca) daha uzun kelime ve ifadelere sahip olma eğiliminde olduğu dil farklılıklarını göz önünde bulundurun; bu durum özetler için gereken alanı etkiler.
• Kontrol Paneli Widget'ları: Kontrol paneli widget'larının düzenini kapsayıcı boyutlarına göre değiştirin. Küçük bir widget basit bir grafik gösterebilirken, daha büyük bir widget ayrıntılı istatistikler ve kontroller içerebilir. Veri görselleştirmesi için kültürel tercihleri göz önünde bulundurarak kontrol paneli deneyimini kullanıcının belirli cihazına ve ekran boyutuna göre uyarlayın. Örneğin, bazı kültürler pasta grafikler yerine çubuk grafikleri tercih edebilir.

Özel Durumlar ile @when Kullanımı

Özel durumlar, elemanlar için kendi durumlarınızı tanımlamanıza ve bu durumlara göre stil değişikliklerini tetiklemenize olanak tanır. Bu, özellikle :hover ve :active gibi geleneksel CSS sözde sınıflarının yetersiz kaldığı karmaşık web uygulamalarında kullanışlıdır. Özel durumlar tarayıcı uygulamalarında hala gelişiyor olsa da, @when kuralı destek olgunlaştığında bu durumlara göre stilleri kontrol etmek için umut verici bir yol sunmaktadır.

Kavramsal Örnek (Durumları Simüle Etmek için CSS Değişkenlerini Kullanma)

Doğal özel durum desteği henüz evrensel olarak mevcut olmadığından, bunu CSS değişkenleri ve JavaScript kullanarak simüle edebiliriz.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

Bu örnekte, elemanın durumunu izlemek için --is-active adlı bir CSS değişkeni kullanıyoruz. JavaScript kodu, elemana tıklandığında bu değişkenin değerini değiştirir. Ardından @when kuralı, --is-active 1'e eşit olduğunda farklı bir arka plan rengi uygular. Bu bir geçici çözüm olsa da, duruma dayalı koşullu stil kavramını göstermektedir.

Gerçek Özel Durumlarla Potansiyel Gelecekteki Kullanım Alanları

Gerçek özel durumlar uygulandığında, söz dizimi şuna benzer olabilir (not: bu spekülatiftir ve tekliflere dayanmaktadır):

.my-element {
  /* Başlangıç stilleri */
}

@when :state(my-custom-state) {
  .my-element {
    /* Özel durum aktif olduğunda stiller */
  }
}

Daha sonra özel durumu ayarlamak ve kaldırmak için JavaScript kullanırsınız:

element.states.add('my-custom-state'); // Durumu etkinleştir
element.states.remove('my-custom-state'); // Durumu devre dışı bırak

Bu, uygulama mantığına dayalı olarak stil üzerinde inanılmaz derecede hassas kontrol sağlayacaktır.

Uluslararasılaştırma ve Yerelleştirme Hususları

• Sağdan Sola Diller (RTL): Arapça ve İbranice gibi RTL dilleri için bileşenlerin düzenini ve stilini uyarlamak için özel durumlar kullanılabilir. Örneğin, belirli bir RTL durumu etkin olduğunda bir gezinme menüsünün düzenini yansıtmak.
• Erişilebilirlik: Odaklanmış elemanları vurgulamak veya bir kullanıcı etkileşim durumu tetiklendiğinde alternatif metin açıklamaları sağlamak gibi gelişmiş erişilebilirlik özellikleri sunmak için özel durumları kullanın. Bu durum değişikliklerinin yardımcı teknolojilere etkili bir şekilde iletildiğinden emin olun.
• Kültürel Tasarım Tercihleri: Bileşenlerin görsel görünümünü kültürel tasarım tercihlerine göre uyarlayın. Örneğin, kullanıcının yerel ayarına veya diline göre farklı renk şemaları veya simge setleri kullanmak.

CSS Değişkenleri ve Aralık Sorguları ile Çalışma

@when kuralı, dinamik ve özelleştirilebilir stiller oluşturmak için CSS değişkenleriyle de kullanılabilir. Bir CSS değişkeninin değerine göre stiller uygulayabilir, kullanıcıların herhangi bir kod yazmadan web sitenizin görünümünü özelleştirmesine olanak tanıyabilirsiniz.

Örnek: Tema Değiştirme

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

Bu örnekte, --theme-color değişkeni gövdenin arka plan rengini kontrol eder. #000 olarak ayarlandığında, @when kuralı --text-color'ı #fff olarak değiştirerek karanlık bir tema oluşturur. Kullanıcılar daha sonra --theme-color değerini JavaScript kullanarak veya bir kullanıcı stil sayfasında farklı bir CSS değişkeni ayarlayarak değiştirebilirler.

Aralık Sorguları

Aralık sorguları, bir değerin belirli bir aralığa düşüp düşmediğini kontrol etmenizi sağlar. Bu, daha karmaşık koşullu stiller oluşturmak için kullanışlı olabilir.

@when (400px <= width <= 800px) {
  .element {
    /* Genişlik 400px ile 800px arasında olduğunda uygulanan stiller */
  }
}

Ancak, @when içindeki aralık sorguları için kesin söz dizimi ve destek değişebilir. En son spesifikasyonlara ve tarayıcı uyumluluk tablolarına başvurmanız tavsiye edilir. Kapsayıcı sorguları genellikle boyuta dayalı koşullar için daha sağlam ve iyi desteklenen bir alternatif sunar.

Küresel Erişilebilirlik ve Kullanıcı Tercihleri

• Yüksek Kontrastlı Temalar: Görme engelli kullanıcılara hitap eden yüksek kontrastlı temalar uygulamak için CSS değişkenlerini ve @when kuralını kullanın. Kullanıcıların kendi özel ihtiyaçlarını karşılamak için renk paletini ve yazı tipi boyutlarını özelleştirmelerine izin verin.
• Azaltılmış Hareket: Kullanıcının işletim sisteminde "azaltılmış hareket" ayarını etkinleştirdiğinde animasyonları ve geçişleri devre dışı bırakmak için CSS değişkenlerini kullanarak kullanıcının azaltılmış hareket tercihine saygı gösterin. prefers-reduced-motion medya sorgusu, daha hassas kontrol için @when ile birleştirilebilir.
• Yazı Tipi Boyutu Ayarlamaları: Kullanıcıların CSS değişkenlerini kullanarak web sitesinin yazı tipi boyutunu ayarlamasına izin verin. Tüm kullanıcılar için okunabilirlik ve kullanılabilirlik sağlamak amacıyla farklı yazı tipi boyutlarına uyum sağlamak için elemanların düzenini ve aralıklarını uyarlamak için @when kuralını kullanın.

En İyi Uygulamalar ve Dikkat Edilmesi Gerekenler

• Tarayıcı Uyumluluğu: @when kuralı hala nispeten yenidir ve tarayıcı desteği henüz evrensel değildir. Üretimde kullanmadan önce daima tarayıcı uyumluluk tablolarını kontrol edin. Eski tarayıcılar için polyfill'ler veya yedek çözümler kullanmayı düşünün. 2024'ün sonları itibarıyla tarayıcı desteği sınırlı kalmaya devam etmektedir ve @container'a ve JavaScript yedekleriyle birlikte CSS değişkenlerinin akıllıca kullanımına güvenmek genellikle daha pratik bir yaklaşımdır.
• Özgüllük (Specificity): @when kuralını kullanırken CSS özgüllüğüne dikkat edin. Koşullu stillerinizin çakışan stilleri geçersiz kılacak kadar özgül olduğundan emin olun.
• Sürdürülebilirlik: Kodunuzu daha okunabilir ve sürdürülebilir hale getirmek için CSS değişkenleri ve yorumlar kullanın. Anlaşılması ve hata ayıklaması zor olan aşırı karmaşık koşullu kurallar oluşturmaktan kaçının.
• Performans: @when kuralı, ayrıştırılması gereken CSS miktarını azaltarak performansı artırabilse de, onu akıllıca kullanmak önemlidir. Koşullu kuralların aşırı kullanımı, özellikle eski cihazlarda performansı olumsuz etkileyebilir.
• Aşamalı Geliştirme (Progressive Enhancement): Web sitenizin tarayıcı @when kuralını desteklemese bile iyi çalışmasını sağlamak için aşamalı geliştirme kullanın. Tüm kullanıcılar için temel, işlevsel bir deneyim sunun ve ardından özelliği destekleyen tarayıcılar için aşamalı olarak geliştirin.

Koşullu Stilin Geleceği

@when kuralı, CSS'te ileriye doğru atılmış önemli bir adımı temsil etmektedir. Daha etkileyici ve dinamik stil oluşturmaya olanak tanıyarak daha karmaşık ve duyarlı web uygulamalarının önünü açmaktadır. Tarayıcı desteği geliştikçe ve spesifikasyon evrildikçe, @when kuralının web geliştiricileri için vazgeçilmez bir araç haline gelmesi muhtemeldir.

CSS Houdini'deki ilerlemeler ve özel durumların standartlaştırılması, @when'in yeteneklerini daha da artıracak, stil üzerinde daha da ayrıntılı kontrol ve JavaScript ile daha sorunsuz entegrasyon sağlayacaktır.

Sonuç

CSS @when kuralı, kapsayıcı sorgularına, özel durumlara, CSS değişkenlerine ve diğer kriterlere göre koşullu olarak stiller uygulamak için güçlü ve esnek bir yol sunar. Tarayıcı desteği hala gelişmekte olsa da, farklı bağlamlara ve kullanıcı tercihlerine uyum sağlayan dinamik ve duyarlı web tasarımları oluşturmak için cephanenizde bulundurmanız gereken değerli bir araçtır. @when kuralının temellerini anlayarak ve en iyi uygulamaları takip ederek, tam potansiyelini ortaya çıkarabilir ve gerçekten olağanüstü kullanıcı deneyimleri yaratabilirsiniz. Uyumluluk ve optimum performans sağlamak için her zaman farklı tarayıcılarda ve cihazlarda kapsamlı bir şekilde test etmeyi unutmayın.

Web gelişmeye devam ettikçe, @when gibi yeni CSS özelliklerini benimsemek, trendlerin önünde kalmak ve küresel bir kitleye en son teknoloji web deneyimleri sunmak için çok önemlidir.