Selamlar! Bugün CSS dünyasında böyle ufak ama etkili bir konuya dalacağız: Attribute Selectors ve Filter. Hani bazen bir elementin sadece belirli bir özelliğine göre stil vermek istersiniz ya, işte tam o noktada bu iki can simidi imdadımıza yetişiyor. Ben de geçenlerde bir projede denk geldim, dedim ki ‘Hadi bunu bir de kendi blogumda keyifli bir dille anlatayım!’ Bakalım ne kadar anlaşılır olacak, hep birlikte göreceğiz 🙂
Şimdi düşünün, bir sürü link var sayfanızda. Bazıları doğrudan bir sayfaya giderken, bazıları bir PDF dosyasına yönlendiriyor. Siz sadece PDF linklerini farklı renkte göstermek istiyorsunuz. İşte tam burada klasik CSS seçicileri yetersiz kalıyor. Ne yapacaksınız? İşte tam da bu yüzden attribute selectors devreye giriyor. Bu seçiciler sayesinde, elementlerin ‘attribute’ dediğimiz özelliklerine göre onlara farklı stiller atayabiliyoruz.
Mesela bir linkin `href` özelliğinde `.pdf` uzantısı olup olmadığını kontrol edebiliyorsunuz. Ya da bir input alanının `type` özelliğinin ‘submit’ olup olmadığını. Bu, kodunuzu çok daha dinamik ve esnek hale getiriyor. İnanın bana, bir kere alıştıktan sonra bırakamıyorsunuz. Gerçi ilk başta biraz yabancı gelebilir ama emin olun, pratik yaptıkça ‘vay be’ diyeceksiniz.
Attribute selector’ların en sık kullanılanlarından biri `[attribute]` formatı. Bu, sadece o attribute’a sahip olan elementleri seçer. Sonra `[attribute=’value’]` var ki bu, attribute’un tam olarak verdiğiniz değere eşit olduğu elementleri seçiyor. Mesela `PDF İndir` gibi bir linkiniz varsa, `a[href=’dosya.pdf’]` diyerek sadece bu linki hedefleyebilirsiniz. Bu da ne kadar hassas olabildiğinizi gösteriyor.
Bir de `[attribute~=’value’]` var ki bu, attribute’un değerleri arasında boşlukla ayrılmış bir kelime listesi olduğunda, o listede verdiğiniz değeri içerenleri seçiyor. Ya da `[attribute|=’value’]` var, bu da attribute değerinin verdiğiniz değerle başladığı (veya tam olarak eşit olduğu) durumları yakalıyor. Mesela bir dil seçimi yaparken `[lang|=’en’]` dediğinizde, hem ‘en’ hem de ‘en-US’ gibi değerleri yakalayabilir. Bu da ne kadar ince ayarlar yapabildiğimizi gösteriyor.
Tabi, sadece attribute’lara bakmakla kalmıyor, attribute’un değerinin belirli bir metinle başlayıp başlamadığını (`[attribute^=’value’]`), belirli bir metinle bitip bitmediğini (`[attribute$=’value’]`) veya belirli bir metni içerip içermediğini (`[attribute*=’value’]`) de kontrol edebiliyoruz. Yani bir linkin href’inin `http://` ile başlayıp başlamadığını `a[href^=’http://’]` ile yakalayabilirsiniz. Bu özellikler, web sitelerindeki kullanıcı deneyimini iyileştirmek için inanılmaz faydalı. Mesela bir butona tıklandığında, belirli bir ‘data-‘ attribute’una sahip olanları gösterip diğerlerini gizleyebiliyorsunuz.
Bu arada, bazen bu attribute seçicilerini kullanırken aklıma geliyor, ‘Acaba bu seçici ne kadar performanslı?’ diye. Malum, her şeyde kullanırsak sayfa yavaşlayabilir. Ama genellikle, doğru kullanıldığında, bu seçiciler oldukça performanslı çalışıyor. Özellikle modern tarayıcılar bu konuda epey gelişti. Yani endişelenmenize gerek yok, gönül rahatlığıyla kullanabilirsiniz.
Şimdi gelelim Filter’a. Bu tam olarak CSS’in bir parçası değil ama JavaScript ile birlikte çalışarak daha da güçlü hale geliyor. Filter, bir elementin belirli bir koşulu sağlayıp sağlamadığını kontrol etmemize yarıyor. Attribute seçicilerle beraber kullanıldığında, sanki bir filtreleme mekanizması kurmuş gibi oluyorsunuz. Mesela siz bir liste oluşturdunuz ve bu listenin sadece ‘aktif’ olan elemanlarını farklı göstermek istiyorsunuz. JavaScript ile bu elemanları seçip onlara bir sınıf ekleyip sonra CSS ile o sınıfı stilize edebilirsiniz.
Ya da şöyle düşünün, bir sürü ürün listesi var ve siz sadece stokta olanları farklı bir renkte göstermek istiyorsunuz. JavaScript ile `document.querySelectorAll` kullanarak tüm ürünleri seçersiniz, sonra her birini döngüye alıp `dataset.stock` gibi özel bir attribute’unu kontrol edersiniz. Eğer değeri ‘true’ ise, o ürüne özel bir sınıf eklersiniz. Sonra CSS’te `.stokta-olan { background-color: lightgreen; }` gibi bir stil tanımlarsınız. Ne güzel değil mi? Bu sayede kullanıcıya anlık olarak stok durumunu gösterebilirsiniz.
Hatta bu filter mantığını daha da ileri götürüp, kullanıcıların arama yapabilmesini sağlayabilirsiniz. Bir input alanına yazdıkça, ürün listesindeki elemanları filtreleyip sadece arama terimiyle eşleşenleri gösterebilirsiniz. Bu, attribute seçicilerle değil ama JavaScript’in DOM manipülasyonuyla ve string karşılaştırmalarıyla oluyor. Yani attribute seçiciler, statik olarak stil vermek için harika, filter mantığı ise dinamik etkileşimler için biçilmiş kaftan.
Peki, attribute selector’ları ve bu filter mantığını birleştiren bir örnek yapsak nasıl olur? Mesela bir web sayfasında bazı görevler var ve bu görevlerin durumunu gösteren butonlar var: ‘Yapılacak’, ‘Yapılıyor’, ‘Tamamlandı’. Biz sadece ‘Tamamlandı’ olanları farklı renkte göstermek istiyoruz. Bunu hem attribute selector ile yapabiliriz hem de JavaScript ile daha dinamik hale getirebiliriz.
Önce basit CSS ile attribute selector’ı kullanalım:
.task-status { padding: 5px 10px; border-radius: 4px; margin-right: 5px; }/* Yapılacak görevler */ .task-status[data-status='todo'] { background-color: #ffcccc; /* Açık kırmızı */ color: #660000; }
/* Yapılıyor görevler */ .task-status[data-status='in-progress'] { background-color: #fff0cc; /* Açık sarı */ color: #663300; }
/* Tamamlandı görevler */ .task-status[data-status='completed'] { background-color: #ccffcc; /* Açık yeşil */ color: #006600; }
Bu kodda, her bir görev durumunu bir `` elementine `data-status` attribute’u ile belirtmişiz. CSS de bu attribute’un değerine göre farklı renkler veriyor. Çok basit ve etkili değil mi? Hiç JavaScript’e gerek kalmadan bu işi hallettik.
Şimdi bir de bu işi JavaScript ile daha dinamik hale getirelim. Diyelim ki bir butona basınca, bir görevin durumunu ‘todo’dan ‘completed’e değiştirmek istiyoruz. Bunu yaparken de o elementin stilinin otomatik olarak değişmesini bekliyoruz. İşte burada JavaScript devreye giriyor ve attribute’u güncelliyor.
// Varsayımsal HTML yapısı: // // // // JavaScript ile durum güncelleme (örnek) function completeTask(buttonElement) { buttonElement.setAttribute('data-status', 'completed'); // CSS otomatik olarak güncellenecektir çünkü attribute değişti. // Eğer attribute ismi değişseydi veya yeni bir class ekleyip çıkarmak isteseydik, // JavaScript ile de class listesini manipüle etmemiz gerekirdi. }
// Diyelim ki bir görevin tamamlandığını varsayıyoruz // const taskButton = document.querySelector('.task-status[data-status="todo"]'); // if (taskButton) { // completeTask(taskButton); // }
// Bu kod örneği, attribute selector'ların nasıl çalıştığını gösteriyor. // JavaScript ile attribute'u değiştirdiğimizde, CSS kuralları // otomatik olarak o yeni duruma göre stili uygular. // Bu, hem temiz kod yazmamızı sağlıyor hem de // kullanıcı arayüzünü dinamik hale getiriyor. // Yani hem attribute seçiciler hem de JavaScript'in // DOM manipülasyonu yetenekleri birleşince harika sonuçlar elde ediliyor.
Bu örnekte de gördüğünüz gibi, attribute seçiciler ve JavaScript birbirini harika tamamlıyor. Attribute seçiciler, belirli özelliklere sahip elementleri hedeflememizi sağlıyor, JavaScript ise bu özellikleri dinamik olarak değiştirmemize olanak tanıyor. Sonuç olarak, daha etkileşimli ve kullanıcı dostu arayüzler oluşturabiliyoruz. Bu arada, bu tür seçicileri kullandığınızda, tarayıcı uyumluluğuna da dikkat etmekte fayda var. Ama artık çoğu modern tarayıcıda sorunsuz çalışıyorlar, sanırım.
Neticede, attribute selectors ve filter mantığını anlamak, CSS’te daha ileri seviye stil tekniklerine kapı aralıyor. Sadece basit renk, font ayarlamaları değil, aynı zamanda elementlerin davranışlarına ve özelliklerine göre stil verme yeteneği kazanıyorsunuz. Bu da sizi diğer geliştiricilerden bir adım öne taşıyacaktır. İnanın bana, bu iki konuya hakim olmak, web geliştirme yolculuğunuzda size çok şey katacak.
Bu arada, aklınıza takılan bir şey olursa veya kendi deneyimlerinizi paylaşmak isterseniz, her zaman beklerim. Google’da bu konularla ilgili pek çok kaynak bulabilirsiniz, örneğin CSS attribute selectors diye aratırsanız bolca örnek ve açıklama çıkar karşınıza. Hatta YouTube’da da güzel anlatımlarını bulabilirsiniz. Keyifli kodlamalar!