CSS @when Kuralı: Koşullu Stil Uygulamalarında Uzmanlaşma

CSS dünyası sürekli olarak gelişiyor ve geliştiricilere web sayfalarını şekillendirmek için daha güçlü ve esnek yollar sunuyor. Bu özelliklerden biri de @when kuralıdır ve CSS Koşullu Kurallar Modülü Seviye 1 olarak da bilinir. Bu kural, belirli koşulların karşılanmasına bağlı olarak CSS stillerini koşullu olarak uygulamanıza olanak tanır. Duyarlı tasarım, özellik tespiti ve daha sağlam ve uyarlanabilir stil sayfaları oluşturmak için güçlü bir araçtır.

CSS @when Kuralı Nedir?

@when kuralı, CSS'de yalnızca belirli koşullar doğru olduğunda uygulanan stilleri tanımlamanıza olanak tanıyan koşullu bir at-rule'dur. Bunu CSS'iniz için bir if ifadesi gibi düşünebilirsiniz. Öncelikle görüntü alanı özelliklerine (ekran boyutu, yönlendirme vb.) odaklanan medya sorgularının aksine, @when koşullu stil işlemleri için daha genel ve genişletilebilir bir yol sağlar. @supports ve @media gibi mevcut koşullu at-rule'ları genişletir.

@when Kullanmanın Temel Avantajları

• İyileştirilmiş Kod Okunabilirliği: Koşullu mantığı @when blokları içinde kapsülleyerek CSS'inizi anlamayı ve bakımını kolaylaştırırsınız. Belirli stil uygulamalarının arkasındaki niyet daha net hale gelir.
• Artırılmış Esneklik: @when, özellikle özellik sorguları ve JavaScript güdümlü mantıkla (CSS Özel Özellikleri kullanarak) birleştirildiğinde, geleneksel medya sorgularından daha karmaşık koşulları yönetebilir.
• Basitleştirilmiş Özellik Tespiti: @when, @supports ile sorunsuz bir şekilde bütünleşerek, yalnızca belirli tarayıcı özellikleri mevcut olduğunda stilleri uygulamanıza olanak tanır. Bu, aşamalı geliştirme için çok önemlidir.
• Daha Anlamsal Stil Verme: @when, öğeleri durumlarına veya bağlamlarına göre şekillendirmenize olanak tanıyarak daha anlamsal ve bakımı yapılabilir CSS'e yol açar. Örneğin, JavaScript tarafından ayarlanan veri niteliklerine veya özel özelliklere dayalı olarak öğeleri şekillendirmek.

@when Kuralının Sözdizimi

@when kuralının temel sözdizimi aşağıdaki gibidir:

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

<condition> (koşul), doğru veya yanlış olarak değerlendirilen herhangi bir geçerli boolean ifadesi olabilir. Bu ifade genellikle şunları içerir:

• Medya Sorguları: Görüntü alanı özelliklerine dayalı koşullar (örneğin, ekran genişliği, cihaz yönlendirmesi).
• Özellik Sorguları (@supports): Belirli CSS özellikleri için tarayıcı desteğine dayalı koşullar.
• Boole Cebiri: Mantıksal operatörler (and, or, not) kullanarak birden fazla koşulu birleştirmek.

@when'in Pratik Uygulama Örnekleri

@when kuralının gücünü ve çok yönlülüğünü göstermek için bazı pratik örnekleri inceleyelim.

1. @when ve Medya Sorguları ile Duyarlı Tasarım

@when için en yaygın kullanım durumu, stilleri ekran boyutuna göre ayarladığınız duyarlı tasarımdır. Medya sorguları bunu tek başına başarabilse de, @when özellikle karmaşık koşullarla uğraşırken daha yapılandırılmış ve okunabilir bir yaklaşım sunar.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

Bu örnekte, @when bloğu içindeki stiller yalnızca ekran genişliği 768 piksel ile 1023 piksel arasında olduğunda (tipik tablet boyutu) uygulanır. Bu, belirli görüntü alanı aralıkları için stilleri tanımlamanın açık ve öz bir yolunu sağlar.

Uluslararasılaştırma Notu: Duyarlı tasarım, küresel bir kitle için kritik öneme sahiptir. Farklı bölgelerdeki değişen ekran boyutlarını göz önünde bulundurun. Örneğin, bazı ülkelerde mobil kullanım daha yüksektir, bu da mobil öncelikli tasarımı daha da önemli hale getirir.

2. @when ve @supports ile Özellik Tespiti

@when, yalnızca belirli bir CSS özelliği tarayıcı tarafından desteklendiğinde stilleri uygulamak için @supports ile birleştirilebilir. Bu, web sitenizi aşamalı olarak geliştirmenize olanak tanır, modern tarayıcılara sahip kullanıcılar için daha iyi bir deneyim sunarken eski tarayıcılarla uyumluluğu korur.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Grid'i desteklemeyen tarayıcılar için yedek stiller */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Eski tarayıcılar için genişliği ayarla */
  }
}

Burada, tarayıcının CSS Grid Layout'u destekleyip desteklemediğini kontrol etmek için @supports kullanıyoruz. Eğer destekliyorsa, .container'a grid tabanlı stiller uyguluyoruz. Desteklemiyorsa, eski tarayıcılarda benzer bir düzenin elde edilmesini sağlamak için flexbox kullanarak yedek stiller sağlıyoruz.

Küresel Erişilebilirlik Notu: Özellik tespiti erişilebilirlik için önemlidir. Eski tarayıcılar yeni ARIA nitelikleri veya anlamsal HTML5 öğeleri için destekten yoksun olabilir. İçeriğin erişilebilir kalmasını sağlamak için uygun yedekler sağlayın.

3. Medya Sorguları ve Özellik Sorgularını Birleştirme

@when'in gerçek gücü, daha karmaşık ve incelikli koşullu stil kuralları oluşturmak için medya sorguları ve özellik sorgularını birleştirme yeteneğinden gelir.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

Bu örnekte, .modal öğesi yalnızca ekran genişliği en az 768 piksel olduğunda ve tarayıcı backdrop-filter özelliğini desteklediğinde bulanık bir arka plana sahip olacaktır. Bu, modern tarayıcılarda görsel olarak çekici efektler oluşturmanıza olanak tanırken, eski tarayıcılarda olası performans sorunlarından veya görüntüleme hatalarından kaçınmanızı sağlar.

4. Özel Özelliklere (CSS Değişkenleri) Dayalı Stil Verme

@when, dinamik ve duruma dayalı stil oluşturmak için CSS Özel Özellikleri (CSS değişkenleri olarak da bilinir) ile birlikte de kullanılabilir. Bir özel özelliğin değerini güncellemek için JavaScript kullanabilir ve ardından bu değere göre farklı stiller uygulamak için @when kullanabilirsiniz.

İlk olarak, bir özel özellik tanımlayın:

:root {
  --theme-color: #007bff; /* Varsayılan tema rengi */
  --is-dark-mode: false;
}

Ardından, özel özelliğin değerine göre stiller uygulamak için @when kullanın:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Son olarak, --is-dark-mode özel özelliğinin değerini değiştirmek için JavaScript kullanın:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Bu, kullanıcıların açık ve koyu temalar arasında geçiş yapmasına olanak tanır ve CSS, özel özellik değerine göre dinamik olarak güncellenir. @when içinde CSS değişkenlerinin doğrudan karşılaştırılmasının tüm tarayıcılarda evrensel olarak desteklenmeyebileceğini unutmayın. Bunun yerine, sıfır olmayan bir değeri kontrol eden bir medya sorgusuyla geçici bir çözüm kullanmanız gerekebilir:

@when ( --is-dark-mode > 0 ) { ... }

Ancak, bunun doğru çalışması için özel özelliğin sayısal bir değere sahip olduğundan emin olun.

Erişilebilirlik Notu: Alternatif temalar (örneğin, karanlık mod) sağlamak erişilebilirlik için çok önemlidir. Görme engelli kullanıcılar yüksek kontrastlı temalardan yararlanabilir. Tema değiştiricinizin klavye ve ekran okuyucular aracılığıyla erişilebilir olduğundan emin olun.

5. Veri Niteliklerine (Data Attributes) Dayalı Stil Verme

Ayrıca, öğeleri veri değerlerine göre şekillendirmek için @when'i veri nitelikleriyle birlikte kullanabilirsiniz. Bu, kullanıcı etkileşimine veya veri güncellemelerine göre öğelerin görünümünün değiştiği dinamik arayüzler oluşturmak için yararlı olabilir.

Örneğin, bir görev listeniz olduğunu ve her görevin durumunu belirten bir data-status niteliğine sahip olduğunu varsayalım (örneğin, "todo", "in-progress", "completed"). Her görevi durumuna göre farklı şekilde şekillendirmek için @when'i kullanabilirsiniz.

[data-status="todo"] {
  /* yapılacak görevler için varsayılan stiller */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Not: attribute() test koşulu için destek şu anda tüm tarayıcılarda sınırlı olabilir veya tam olarak uygulanmamış olabilir. Her zaman kapsamlı bir şekilde test edin.

Tarayıcı Uyumluluğu ve Polyfill'ler

2024'ün sonları itibarıyla, @when kuralı için tarayıcı desteği hala gelişmektedir. Birçok modern tarayıcı temel işlevselliği desteklese de, bazı eski tarayıcılar desteklemeyebilir. Bu nedenle, uyumluluk tablolarını kontrol etmek ve gerektiğinde uygun yedekleri veya polyfill'leri kullanmak çok önemlidir.

@when ve ilgili özelliklerin mevcut tarayıcı destek durumunu kontrol etmek için her zaman Can I use... gibi kaynaklara başvurun.

@when Kullanımı İçin En İyi Uygulamalar

• Koşulları Basit Tutun: @when blokları içinde aşırı karmaşık koşullardan kaçının. Karmaşık mantığı daha küçük, daha yönetilebilir parçalara ayırın.
• Yedekler Sağlayın: @when kurallarınızda kullandığınız özellikleri desteklemeyen tarayıcılar için her zaman yedek stiller sağlayın. Bu, farklı tarayıcılarda tutarlı bir deneyim sağlar.
• Kapsamlı Test Edin: @when kurallarınızın beklendiği gibi çalıştığından emin olmak için CSS'inizi çeşitli tarayıcılarda ve cihazlarda test edin.
• Anlamlı Yorumlar Kullanın: Her @when kuralının amacını ve dayandığı koşulları açıklamak için CSS'inize yorumlar ekleyin. Bu, kodunuzu anlamayı ve bakımını kolaylaştıracaktır.
• Performansı Göz Önünde Bulundurun: Potansiyel olarak performansı etkileyebileceğinden @when kurallarını aşırı kullanmaktan kaçının. Değerlendirilmesi gereken kural sayısını en aza indirmek için CSS'inizi optimize edin.

Sonuç

@when kuralı, CSS araç kutusuna güçlü bir ektir ve geliştiricilere stilleri koşullu olarak uygulamak için daha esnek ve etkileyici bir yol sunar. Medya sorguları, özellik sorguları ve CSS Özel Özellikleri ile birleştirerek daha sağlam, uyarlanabilir ve bakımı yapılabilir stil sayfaları oluşturabilirsiniz. Tarayıcı desteği hala gelişmekte olsa da, @when modern web geliştirme iş akışınıza keşfetmeye ve dahil etmeye değer bir özelliktir.

Web geliştikçe, @when gibi özellikleri öğrenmek, dünya çapındaki kullanıcılar için ilgi çekici, erişilebilir ve performanslı deneyimler yaratmak için gerekli olacaktır. Koşullu stil vermenin gücünü benimseyin ve CSS geliştirmenizde yeni olasılıkların kapısını aralayın.