Html & Css İle Özelleştirilebilir Bir Kategori Filtreleme Arayüzü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve temel düzeyde Html5 ve Css3 bilginizin olması yeterlidir. Herhangi bir sunucu tarafı dili veya JavaScript kütüphanesi gerektirmeden, sadece tarayıcının yerel yeteneklerini kullanarak bir arayüz tasarlayacağız.

• HTML5: Yapısal iskeleti oluşturmak için.
• CSS3: Görsel düzenleme, animasyonlar ve filtreleme mantığı (Checkbox hack yöntemi) için.
• Kod Editörü: VS Code veya benzeri bir editör.

Adım 1: HTML Yapısını Oluşturma

Filtreleme arayüzümüzün temelinde, kullanıcının seçim yapmasını sağlayacak "input" elemanları ve bu seçimlere göre şekillenecek içerik kartları yer alır. Burada "radio" veya "checkbox" inputlarını kullanarak bir durum yönetimi sağlayacağız.

  
  
  

  

    Hepsi
    Tasarım
    Yazılım
  

  

    
Tasarım Projesi
    
Yazılım Projesi
  

Bu yapıda, input elemanlarını "radio" tipinde tanımlayarak aynı anda sadece bir kategorinin seçilmesini sağlıyoruz. Label etiketleri ise inputlara "for" özniteliği ile bağlanarak tıklanabilir butonlar oluşturur.

Adım 2: CSS ile Filtreleme Mantığını Kurma

Css'in "general sibling combinator" (~) seçicisini kullanarak, seçilen input'un durumuna göre içeriklerin görünürlüğünü kontrol edeceğiz. Bu yöntem, JavaScript kullanmadan dinamik bir arayüz oluşturmanın en temiz yoludur.

.item { display: block; }

#tasarim:checked ~ .content .item:not(.tasarim),
#yazilim:checked ~ .content .item:not(.yazilim) {
  display: none;
}

Yukarıdaki kod, eğer "tasarim" input'u seçiliyse, "tasarim" sınıfına sahip olmayan tüm öğeleri gizler. Bu sayede tarayıcı, seçime bağlı olarak DOM üzerindeki öğeleri anlık olarak filtreler.

Adım 3: Görsel Tasarım ve Kullanıcı Deneyimi

Arayüzün profesyonel görünmesi için butonlara ve kartlara modern stiller eklemeliyiz. Flexbox kullanarak butonları hizalayalım ve yumuşak geçişler (transition) ile kullanıcı etkileşimini güçlendirelim.

.buttons { display: flex; gap: 10px; margin-bottom: 20px; }
.buttons label { 
  padding: 10px 20px; 
  background: #f0f0f0; 
  cursor: pointer; 
  transition: 0.3s; 
}
#hepsi:checked ~ .buttons label[for="hepsi"],
#tasarim:checked ~ .buttons label[for="tasarim"],
#yazilim:checked ~ .buttons label[for="yazilim"] {
  background: #007bff;
  color: white;
}

Bu Css bloğu, aktif olan kategorinin butonunun rengini değiştirerek kullanıcıya hangi filtrede olduğunu görsel olarak belirtir. "Transition" özelliği, renk değişiminin keskin değil, yumuşak bir şekilde gerçekleşmesini sağlar.

Adım 4: Karşılaştırmalı Yöntemler Tablosu

Filtreleme arayüzleri geliştirirken kullanabileceğiniz farklı yaklaşımları aşağıda karşılaştırmalı olarak inceleyebilirsiniz.

Adım 5: Gelişmiş Filtreleme ve Animasyonlar

Kullanıcı deneyimini bir üst seviyeye taşımak için filtreleme sırasında öğelerin kaybolup gelmesini bir animasyon ile destekleyebiliriz. "Opacity" ve "transform" özelliklerini kullanarak öğelere giriş efekti verebiliriz.

.item {
  transition: all 0.5s ease;
  opacity: 1;
  transform: scale(1);
}

/* Gizlenen öğeler için */
#tasarim:checked ~ .content .item:not(.tasarim) {
  opacity: 0;
  transform: scale(0);
  display: none;
}

Bu animasyon, öğelerin aniden yok olması yerine küçülerek kaybolmasını sağlar. Bu tür küçük detaylar, arayüzün daha "premium" ve özenli hissettirmesine yardımcı olur.

Güvenlik Uyarısı: Bu yöntem tamamen istemci tarafında (Client-side) çalışır. Eğer filtrelediğiniz veriler hassas bilgiler içeriyorsa, bu verileri HTML içinde gizlemek yerine sunucu tarafında (backend) filtreleyerek göndermelisiniz. Aksi takdirde, kullanıcı tarayıcı araçlarını kullanarak gizli verileri görüntüleyebilir.

Sıkça Sorulan Sorular

CSS ile filtreleme yapmak SEO için uygun mu?

Evet, içerik HTML içerisinde yer aldığı için arama motorları tarafından dizine eklenebilir. Ancak, çok büyük veri setlerinde performans sorunları yaşanmaması için "lazy loading" veya sunucu taraflı filtreleme önerilir.

Mobil cihazlarda nasıl görünür?

Flexbox kullanarak butonların mobil cihazlarda alt alta veya yan yana kaydırılabilir (overflow-x: auto) bir yapıda olmasını sağlayarak responsive bir tasarım elde edebilirsiniz.

Daha fazla kategori eklemek istersem ne yapmalıyım?

HTML kısmına yeni bir "input" ve "label" ekleyip, CSS kısmındaki seçici listesine yeni sınıfınızı dahil etmeniz yeterlidir. Yapı oldukça modülerdir.

JavaScript kullanmadan birden fazla kategori seçilebilir mi?

Evet, "radio" yerine "checkbox" input tiplerini kullanarak ve CSS seçicilerini buna göre güncelleyerek çoklu seçim yapısı kurabilirsiniz.

Bu yöntem tarayıcı desteği açısından sorun yaratır mı?

Modern tarayıcıların tamamı :checked sözdizimini ve sibling seçicilerini destekler. 2026 yılı itibarıyla tüm güncel tarayıcılarda sorunsuz çalışacaktır.

Performans Optimizasyonu ve Kod Verimliliği

Saf CSS ile filtreleme mantığı kurarken, DOM ağacının büyüklüğü doğrudan performansınızı etkiler. Özellikle binlerce öğeyi içeren listelerde, tarayıcının :checked seçicisi ile yaptığı hesaplamalar işlemciyi yorabilir. Bu durumu minimize etmek için "Lazy Loading" (tembel yükleme) mantığını CSS ile birleştirebilirsiniz.

Kodunuzun daha hızlı çalışması için şu stratejileri izleyin:

• Seçici Karmaşıklığını Azaltın: Çok derin iç içe geçmiş CSS seçicileri yerine, doğrudan sınıf (class) isimlerini hedefleyin.
• Görsel Render Optimizasyonu: Filtreleme sırasında display: none yerine visibility: hidden veya opacity: 0 kullanmak, sayfa düzeninin (reflow) sürekli değişmesini engelleyerek daha akıcı geçişler sağlar.
• GPU Hızlandırma: Animasyonlarda transform ve opacity özelliklerini kullanarak tarayıcının donanım hızlandırmasından faydalanın.

/* GPU hızlandırmalı geçiş örneği */
.filter-item {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
}

input[type="radio"]:checked ~ .container .item {
    transform: scale(1);
    opacity: 1;
}

Hata Ayıklama ve Tarayıcı Uyumluluk Testleri

CSS tabanlı filtreleme sistemlerinde en sık karşılaşılan sorun, "Checkbox Hack" yönteminin beklenmedik şekilde çalışmamasıdır. Bu durum genellikle HTML yapısındaki etiketlerin yanlış yerleştirilmesinden kaynaklanır. Hata ayıklarken şu adımları izleyin:

1. Etiket İlişkisi: input elemanının id değeri ile label elemanının for değerinin birebir eşleştiğinden emin olun.
2. Kapsayıcı (Container) Yapısı: CSS seçicileri (~ veya +) yalnızca kardeş (sibling) elemanlar üzerinde çalışır. Eğer öğeleriniz farklı kapsayıcılar içindeyse, CSS ile filtreleme yapamazsınız.
3. Z-Index Çakışmaları: Görünmez hale getirdiğiniz öğelerin tıklanabilir alanları (hitbox) başka öğelerin üzerine geliyorsa, pointer-events: none özelliğini kullanarak bu sorunu çözebilirsiniz.

Test sürecinde Chrome DevTools üzerinde "Rendering" sekmesini açarak, filtreleme sırasında hangi öğelerin yeniden boyandığını (repaint) takip edin. Eğer display: none kullanıyorsanız, tarayıcı bu öğeleri tamamen bellekten kaldırır; bu da SEO açısından içeriğin indekslenmesine engel olabilir. Bu yüzden, arama motoru görünürlüğü kritik olan içeriklerde CSS filtreleme yerine sunucu taraflı bir çözüm veya JavaScript tabanlı "hidden" sınıfı yönetimi tercih edilmelidir.

Not: CSS ile yapılan filtreleme, kullanıcı deneyimi açısından hızlı olsa da, çok büyük veri setlerinde (1000+ öğe) tarayıcıyı kilitleyebilir. Bu tür durumlarda sanal liste (virtual list) yöntemlerini araştırın.

Sonuç

Html & Css ile özelleştirilebilir bir kategori filtreleme arayüzü yapmak, web geliştirme temellerini anlamak için harika bir pratik çalışmasıdır. Bu yöntem, özellikle küçük ve orta ölçekli projelerde JavaScript yükünü azaltarak sayfa açılış hızını optimize etmenize olanak tanır. Bir sonraki adım olarak, bu yapıya "arama çubuğu" ekleyerek filtreleme mantığını daha da geliştirebilir veya verileri bir JSON dosyasından çekmek için JavaScript ile entegrasyon sağlayabilirsiniz.

Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce tarayıcı uyumluluk testlerini yapmalı ve veri güvenliği standartlarını göz önünde bulundurmalısınız.