CSS'te Büyük/Küçük Harf Duyarsız Seçici: [class=value i] ile Esnek Stil Atama

CSS seçiciler, ebeveyn-çocuk ve kardeş öğe ilişkilerinde karmaşık desenleri eşleştirme konusunda oldukça güçlüdür. Ancak öznitelik değerlerini eşleştirme söz konusu olduğunda bu esneklik genellikle sınırlı kalır. Neyse ki CSS, öznitelik değerlerini büyük/küçük harf duyarsız bir şekilde eşleştirmemize olanak tanıyan bir özellik sunuyor: [attr=value i] sözdizimi.

Bu özellik, özellikle HTML yapısının kontrolümüz dışında olduğu durumlarda büyük kolaylık sağlar. Örneğin, bir içerik yönetim sisteminin ürettiği sınıf adları bazen büyük harf, bazen küçük harf içerebilir. Geleneksel CSS seçicileri bu durumda tam eşleşme aradığından, her varyasyon için ayrı bir kural yazmak gerekir. Ancak [class=example i] gibi bir seçici, "example", "Example", "EXAMPLE" gibi tüm farklı yazımları tek bir kuralda yakalar.

CSS standartlarına göre, [attr=value i] ifadesindeki 'i' harfi, öznitelik değerinin karşılaştırmasında ASCII karakter bağlamında büyük/küçük harf duyarsızlığı sağlar. Bu, yalnızca İngilizce alfabedeki harfler için geçerlidir; Türkçe karakterlerde (örneğin İ ve I) aynı duyarsızlık beklenmemelidir. Yine de pratikte çoğu durum için yeterlidir.

Tarayıcı desteği oldukça iyidir. Modern tarayıcıların tümü (Chrome, Firefox, Safari, Edge) bu özelliği destekler. Internet Explorer ise desteklemez, ancak günümüzde kullanım oranı düşüktür. Bu nedenle projelerinizde güvenle kullanabilirsiniz.

Gelecekte Ne Bekleniyor?

Pratik bir örnek: Bir e-ticaret sitesinde ürünlerin durumunu belirten 'stock', 'Stock', 'STOCK' gibi farklı yazımlarla karşılaşabilirsiniz. [data-status=available i] seçicisi ile tüm varyasyonları tek bir kuralla hedefleyebilirsiniz. Aynı şekilde, kullanıcı tarafından girilen verilerle oluşturulan HTML'lerde de bu özellik hayat kurtarır.

Sonuç olarak, CSS'in bu az bilinen özelliği, özellikle dinamik içeriklerle çalışırken stil tanımlamalarınızı daha esnek ve yönetilebilir hale getirir. Büyük/küçük harf duyarsız öznitelik seçicileri, kod tekrarını azaltır ve bakımı kolaylaştırır. Projenizde bu tekniği kullanarak daha temiz ve etkili CSS yazabilirsiniz.

Kaynak: davidwalsh.name