CSS'de Büyük/Küçük Harf Duyarsız Seçici: [class=example i] ile Kolay Eşleştirme

CSS seçiciler, karmaşık desenleri eşleştirme konusunda inanılmaz güçlüdür. Ancak bu esnekliğin çoğu ebeveyn/çocuk/kardeş ilişkilerinde kendini gösterir; değer eşleştirmede çok nadiren. Bu nedenle, CSS'nin öznitelik değerlerini büyük/küçük harf duyarsız olarak eşleştirebildiğini öğrendiğimde oldukça şaşırdım!

Attribute seçici parantezlerine boşluklu bir 'i' eklemek, öznitelik değeri aramasını büyük/küçük harf duyarsız hale getirir. Örneğin: '[class=example]' yalnızca 'example' ile eşleşirken, '[class=example i]' 'example', 'eXampLe' gibi tüm varyasyonları eşleştirir. Bu, özellikle kullanıcı girdisiyle oluşturulan veya farklı kaynaklardan gelen HTML'lerde büyük/küçük harf tutarsızlıklarını yönetmek için idealdir.

Bu özellik, CSS Seçiciler Seviye 4'ün bir parçasıdır ve modern tarayıcılar tarafından geniş ölçüde desteklenmektedir. Chrome, Firefox, Safari ve Edge'in güncel sürümlerinde sorunsuz çalışır. IE11 gibi eski tarayıcılarda desteklenmez, bu nedenle geriye dönük uyumluluk gerekiyorsa dikkatli olunmalıdır.

Sonuç ve Değerlendirme

Kullanım alanları oldukça geniştir. Örneğin, bir formda kullanıcının girdiği e-posta adresini büyük/küçük harf duyarsız olarak eşleştirmek veya birden fazla sınıf adına sahip öğeleri seçmek için kullanılabilir. Ayrıca, veri öznitelikleriyle çalışırken değerlerin tutarlı olmadığı durumlarda büyük kolaylık sağlar.

Pratik bir örnek: '[data-type=warning i] { color: red; }' kuralı, 'data-type' özniteliği 'Warning', 'WARNING' veya 'warning' olan tüm öğeleri kırmızı yapar. Bu sayede HTML'deki tutarsız yazımlar için ayrı ayrı kural yazmak zorunda kalmazsınız.

Sistem Güvenliği

Sonuç olarak, CSS'deki bu küçük ama güçlü özellik, geliştiricilere daha esnek ve bakımı kolay stiller oluşturma imkanı tanır. Büyük/küçük harf duyarsız eşleştirme, özellikle dinamik içerikli projelerde zamandan tasarruf sağlar ve kod tekrarını azaltır.

Kaynak: davidwalsh.name