Html & Css İle Özelleştirilebilir Bir İçerik Filtreleme Filtresi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve temel düzeyde HTML5 ve CSS3 bilgisine sahip olmanız yeterlidir. Herhangi bir sunucu tarafı dili veya karmaşık bir framework kurulumuna gerek yoktur. Kodlarınızı yazmak için VS Code gibi modern bir metin editörü kullanmanızı öneririm.

Başlamadan önce çalışma dizininizde bir index.html ve bir style.css dosyası oluşturun. Bu dosyaları birbirine bağlayarak projenin temelini atmış olacaksınız. Tarayıcı önbelleğini temiz tutmak için geliştirme aşamasında "gizli sekme" kullanmak, yaptığınız CSS değişikliklerinin anlık olarak yansımasını görmenizi kolaylaştıracaktır.

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

Filtreleme sisteminin temelini, kategorileri temsil eden butonlar ve filtrelenecek içeriklerin bulunduğu bir kapsayıcı oluşturur. Burada semantik HTML etiketleri kullanmak, SEO performansınız ve erişilebilirlik (A11y) açısından kritiktir.

  

    Tümü
    Web Tasarım
    Mobil Uygulama
  
  

    
Web Projesi 1
    
Mobil Proje 1
  

Burada data-filter özniteliği, JavaScript ile tetikleyeceğimiz filtreleme mantığının anahtarıdır. item sınıfları ise her bir içeriğin ait olduğu kategoriyi temsil eder.

Adım 2: CSS ile Görsel Tasarım ve Gizleme Mantığı

Filtreleme sisteminin görsel olarak düzgün çalışması için CSS sınıflarını stratejik kullanmalıyız. Özellikle display: none özelliği, filtrelenmeyen öğeleri sayfadan kaldırmak için en verimli yöntemdir.

.item {
  display: block;
  transition: all 0.3s ease;
}

.item.hidden {
  display: none;
  opacity: 0;
}

.filter-btn {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
}

.filter-btn.active {
  background: #007bff;
  color: #fff;
}

Bu CSS kodları, öğelerin görünürlüğünü kontrol eder. transition kullanımı, öğeler gizlenirken veya görünür hale gelirken yumuşak bir geçiş sağlar.

Adım 3: JavaScript ile Filtreleme Mantığını Kurma

HTML ve CSS tek başına statik bir görünüm sağlar. Filtreleme işlemini tetiklemek için tarayıcı üzerinde çalışan JavaScript dilinden faydalanıyoruz. Bu kod, butonlara tıklandığında ilgili sınıfları ekleyip kaldırır.

const buttons = document.querySelectorAll('.filter-btn');
const items = document.querySelectorAll('.item');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filter = button.getAttribute('data-filter');
    items.forEach(item => {
      if (filter === 'all' || item.classList.contains(filter)) {
        item.classList.remove('hidden');
      } else {
        item.classList.add('hidden');
      }
    });
  });
});

Bu kod bloğu, DOM (Document Object Model) üzerinde döngü kurarak ilgili sınıfları yönetir. classList kullanımı, modern tarayıcılarda sınıf yönetimini oldukça hızlandırır.

Filtreleme Yöntemlerinin Karşılaştırılması

Adım 4: Gelişmiş CSS Grid ile Duyarlı Yerleşim

İçeriklerin ekran boyutuna göre otomatik dizilmesi için CSS Grid kullanmak, modern web standartları gereğidir. Bu, mobil cihazlarda tek sütun, masaüstünde ise üç sütunlu bir yapı sağlar.

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

auto-fit ve minmax fonksiyonları, medya sorgularına (media queries) gerek kalmadan esnek bir yapı kurmanıza olanak tanır.

Adım 5: Güvenlik ve Performans İpuçları

Kullanıcı girişlerini veya dinamik içerikleri işlerken her zaman XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Eğer içeriklerinizi bir veritabanından çekiyorsanız, verileri mutlaka temizleyerek (sanitize) sayfaya basın.

Kritik Uyarı: Kullanıcıdan gelen verileri doğrudan innerHTML içerisine yerleştirmeyin. Bu, kötü niyetli kodların çalıştırılmasına sebep olabilir. Bunun yerine textContent veya innerText kullanmayı tercih edin.

Sıkça Sorulan Sorular

Filtreleme işlemi neden çalışmıyor?

JavaScript konsolunu (F12) kontrol edin. Hata mesajları, genellikle yanlış seçici (selector) kullanımından veya DOM öğelerinin henüz yüklenmemiş olmasından kaynaklanır.

Animasyonları nasıl daha akıcı yapabilirim?

CSS transform: scale() özelliğini opacity ile birlikte kullanarak, öğelerin gizlenirken küçülmesini sağlayabilirsiniz.

Arama kutusu eklemek istersem ne yapmalıyım?

Arama kutusuna bir input event listener ekleyerek, textContent değerini kullanıcının yazdığı metinle karşılaştırıp filtreleme mantığını genişletebilirsiniz.

SEO için bu yapı uygun mu?

Evet, semantik HTML etiketleri kullandığınız sürece arama motorları içeriğinizi doğru şekilde indeksleyecektir.

Mobil cihazlarda butonlar kayıyor, ne yapmalıyım?

Filtre butonlarını flex-wrap: wrap özelliğine sahip bir Flexbox kapsayıcısı içine alarak butonların bir alt satıra geçmesini sağlayabilirsiniz.

Filtreleme Sistemlerinde Performans Optimizasyonu ve Büyük Veri Yönetimi

Filtreleme sisteminizde öğe sayısı arttıkça, DOM manipülasyonu tarayıcıyı yavaşlatabilir. Özellikle yüzlerce veya binlerce öğeyi filtrelemeniz gerektiğinde, her tıklamada tüm DOM ağacını taramak yerine "Virtual DOM" mantığına yakın bir yaklaşım benimsemek performansı ciddi oranda artırır. Bu durumda, öğeleri doğrudan DOM'dan silmek yerine CSS display: none özelliğini kullanmak, öğelerin yeniden oluşturulma maliyetini ortadan kaldırır.

Performansı optimize etmek için uygulayabileceğiniz bir diğer yöntem ise Debounce tekniğidir. Özellikle arama kutusu ile filtreleme yapıyorsanız, kullanıcı her tuşa bastığında filtreleme fonksiyonunu tetiklemek yerine, kullanıcının yazmayı bırakmasını bekleyen bir zamanlayıcı kullanmalısınız.

// Debounce Fonksiyonu
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const filterItems = debounce((query) => {
  // Filtreleme mantığı buraya gelecek
  console.log("Filtreleniyor: ", query);
}, 300);

document.getElementById('searchBox').addEventListener('input', (e) => {
  filterItems(e.target.value);
});

Filtreleme Sonuçlarını URL Parametreleri ile Kalıcı Hale Getirme

Kullanıcıların seçtikleri filtreleri arkadaşlarıyla paylaşabilmesi veya sayfayı yenilediklerinde aynı filtrelerin kalmasını sağlamak için URLSearchParams API'sini kullanabilirsiniz. Bu yöntem, uygulamanızın durumunu URL'ye taşır ve kullanıcı deneyimini bir üst seviyeye çıkarır.

Aşağıdaki örnekte, seçilen kategorinin URL'ye nasıl ekleneceği gösterilmiştir:

function updateURL(category) {
  const url = new URL(window.location);
  if (category === 'all') {
    url.searchParams.delete('filter');
  } else {
    url.searchParams.set('filter', category);
  }
  window.history.pushState({}, '', url);
}

// Sayfa yüklendiğinde URL'den filtreyi oku
window.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  const filter = params.get('filter');
  if (filter) {
    applyFilter(filter); // Mevcut filtreleme fonksiyonunuz
  }
});

Filtreleme Sistemlerinde Erişilebilirlik (A11y) Standartları

Filtreleme butonlarınızın ekran okuyucular tarafından doğru algılanması için aria-pressed ve aria-controls gibi nitelikleri kullanmak zorunludur. Bu, görme engelli kullanıcıların hangi filtrenin aktif olduğunu anlamasını sağlar.

• aria-pressed: Butonun aktif olup olmadığını belirtir (true/false).
• aria-controls: Butonun hangi içerik alanını kontrol ettiğini ID bazlı belirtir.
• aria-live: Filtreleme sonucu içerik değiştiğinde ekran okuyucunun kullanıcıyı bilgilendirmesini sağlar.

Bu standartları uygulamak, projenizin sadece teknik olarak çalışmasını değil, aynı zamanda kapsayıcı bir web deneyimi sunmasını sağlar.

Sonuç

Html & Css ile özelleştirilebilir bir içerik filtreleme filtresi yapmak, hem teknik becerilerinizi geliştirir hem de kullanıcılarınıza profesyonel bir deneyim sunar. Bu temel yapı üzerine, ilerleyen aşamalarda veritabanı entegrasyonu veya gelişmiş arama algoritmaları ekleyerek projenizi daha ileriye taşıyabilirsiniz. Bir sonraki adım olarak, filtreleme sonuçlarını URL parametrelerine yansıtarak kullanıcıların filtreli sayfaları paylaşabilmesini sağlamayı deneyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce güvenlik açıklarını (XSS, CSRF) kontrol edin ve gerekli veri temizleme işlemlerini uygulayın.