Html & Css İle Dinamik Bir İçerik Filtreleme Paneli Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için modern bir tarayıcı (Chrome, Firefox veya Edge'in güncel sürümleri) ve herhangi bir kod editörü (VS Code gibi) yeterlidir. Projemizde modern CSS teknikleri olan Flexbox ve Grid sistemlerini kullanacağız. 2026 standartlarına uygun olarak, kodlarımızı temiz ve sürdürülebilir bir yapıda tutacağız.

• Modern bir kod editörü (Visual Studio Code önerilir).
• Temel düzeyde HTML5 ve CSS3 bilgisi.
• Mantıksal süreçleri yönetmek için temel JavaScript bilgisi.
• Tarayıcı geliştirici araçlarını (F12) kullanma yetkinliği.

Adım 1: HTML Yapısını Kurma

Filtreleme panelinin temelini oluştururken, filtre butonları ve bu filtreye tabi tutulacak içerik kartlarını ayrı konteynerlerde tanımlamalıyız. Aşağıdaki kod bloğu, filtreleme butonlarını ve içerik kartlarını temsil eden temel HTML iskeletini göstermektedir.

  Tümü
  Tasarım
  Yazılım



  
UI Tasarımı
  
JavaScript Eğitimi

Burada data-filter ve data-category öznitelikleri, filtreleme mantığımızın temelini oluşturur. Bu özel veri öznitelikleri, JavaScript ile içerikleri eşleştirmemizi kolaylaştırır.

Adım 2: CSS ile Görsel Filtreleme Mantığı

CSS tarafında, filtreleme işlemini görsel olarak yönetmek için display: none özelliğini kullanacağız. Filtreleme işlemi gerçekleştiğinde, eşleşmeyen öğeleri gizlemek için bir CSS sınıfı tanımlamak en temiz yöntemdir.

.item {
  transition: all 0.3s ease;
}

.item.hide {
  display: none;
}

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

transition özelliği, öğelerin gizlenip görünür hale gelmesi sırasında yumuşak bir geçiş sağlar. .hide sınıfı, JavaScript ile dinamik olarak öğelere eklenecek veya kaldırılacaktır.

Adım 3: JavaScript ile Dinamik Filtreleme İşlemi

Şimdi, butonlara tıklandığında ilgili içerikleri gösteren veya gizleyen JavaScript kodunu yazalım. Bu mantık, data-filter değeri ile data-category değerini karşılaştı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.getAttribute('data-category') === filter) {
        item.classList.remove('hide');
      } else {
        item.classList.add('hide');
      }
    });
  });
});

Bu kod bloğu, her buton tıklamasında tüm öğeleri kontrol eder. Eğer filtre "all" ise tümü gösterilir, aksi takdirde sadece kategori ile eşleşenler görünür hale getirilir.

Adım 4: Performans ve SEO Optimizasyonu

Filtreleme panelleri, özellikle çok sayıda içerik barındırdığında tarayıcı performansını etkileyebilir. İçerikleri DOM'a (Document Object Model) yüklerken "Lazy Loading" veya sayfalama yöntemlerini tercih etmek, sayfa açılış hızını artıracaktır. SEO açısından, filtreleme butonlarının button etiketiyle tanımlanması erişilebilirlik (A11y) standartlarına uygundur.

Adım 5: Güvenlik ve Hata Ayıklama

Kullanıcı girişlerine dayalı bir filtreleme yapmıyor olsak da, dinamik içerik ekleme süreçlerinde XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olunmalıdır. Eğer içeriklerinizi bir veritabanından çekiyorsanız, verileri mutlaka temizleyerek (sanitizing) ekrana basmalısınız.

Güvenlik Uyarısı: Dinamik içerik oluştururken innerHTML yerine textContent kullanmayı tercih edin. Bu, kötü niyetli scriptlerin çalıştırılmasını engeller ve uygulamanızı güvenli kılar.

Sıkça Sorulan Sorular

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

Öncelikle tarayıcı konsolunda (F12) bir hata olup olmadığını kontrol edin. JavaScript dosyanızın HTML'in sonunda yüklendiğinden veya defer özniteliği ile çağrıldığından emin olun.

Çok sayıda öğe için bu yöntem uygun mu?

100-200 öğeye kadar bu yöntem oldukça hızlıdır. Ancak binlerce öğe varsa, sanal listeleme (virtual scrolling) tekniklerini araştırmanız önerilir.

Filtreleme butonlarına animasyon ekleyebilir miyim?

Evet, CSS @keyframes kullanarak butonlara veya içerik kartlarına giriş animasyonları ekleyebilirsiniz.

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

CSS flex-wrap: wrap özelliğini kullanarak, butonlarınızın mobil ekranlarda alt alta dizilmesini sağlayabilirsiniz.

Arama çubuğu ile entegre edilebilir mi?

Evet, filtreleme mantığına ek olarak bir input alanı ekleyip, içerik metinleri ile includes() metodunu kullanarak arama özelliği de ekleyebilirsiniz.

Gelişmiş Filtreleme Senaryosu: Çoklu Kriterli Seçim Mantığı

Temel filtreleme işlemlerini başarıyla tamamladıktan sonra, kullanıcı deneyimini artırmak için "Çoklu Kriterli Filtreleme" (Multi-select Filtering) yapısına geçiş yapabilirsiniz. Bu yöntem, kullanıcının aynı anda hem kategori hem de fiyat aralığı gibi birden fazla parametreyi seçmesine olanak tanır. Bu senaryoda, her filtreleme değişikliğinde tüm aktif filtreleri kontrol eden bir "state" yönetimi kurmak gerekir.

Aşağıdaki örnekte, seçili olan tüm filtreleri bir dizi (array) içerisinde tutarak, öğelerin bu dizideki tüm kriterleri karşılayıp karşılamadığını kontrol eden bir mantık kurguluyoruz:

// Çoklu filtreleme için state yönetimi
let activeFilters = {
    category: 'all',
    color: 'all'
};

function applyFilters() {
    const items = document.querySelectorAll('.filter-item');
    
    items.forEach(item => {
        const matchesCategory = activeFilters.category === 'all' || item.dataset.category === activeFilters.category;
        const matchesColor = activeFilters.color === 'all' || item.dataset.color === activeFilters.color;
        
        if (matchesCategory && matchesColor) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}

Filtreleme Sistemlerinde Performans Optimizasyonu

İçerik sayısı arttıkça (örneğin 500+ öğe), her filtreleme işleminde DOM manipülasyonu yapmak tarayıcıyı yorabilir. Performansı optimize etmek için şu stratejileri uygulayabilirsiniz:

• Debouncing Kullanımı: Arama çubuğu gibi sürekli tetiklenen işlemlerde, kullanıcının yazmayı bitirmesini beklemek için 200-300ms'lik bir gecikme ekleyin.
• DocumentFragment Kullanımı: Eğer sonuçları dinamik olarak oluşturuyorsanız, DOM'a tek tek eklemek yerine DocumentFragment kullanarak tek bir işlemde render edin.
• CSS Sınıfları ile Yönetim: Her öğeye tek tek style.display atamak yerine, kapsayıcıya bir sınıf ekleyerek CSS üzerinden gizleme/gösterme işlemini yönetin.

Özellikle büyük veri setlerinde, filtreleme işlemini JavaScript'in requestAnimationFrame metodu ile senkronize etmek, animasyonların takılmadan çalışmasını sağlar:

function filterWithAnimation(callback) {
    window.requestAnimationFrame(() => {
        // Filtreleme mantığı burada çalışır
        callback();
    });
}

Profesyonel İpucu: Çok büyük veri setleri ile çalışıyorsanız, filtreleme işlemini DOM üzerinde değil, verinin kendisi (JSON dizisi) üzerinde yapıp, ardından sadece değişen kısımları güncelleyen "Virtual DOM" benzeri bir yaklaşım benimsemeniz önerilir.

Sonuç

Html & Css ile dinamik bir içerik filtreleme paneli oluşturmak, modern web geliştirme süreçlerinde temel bir beceridir. Bu rehberde öğrendiğiniz yöntemleri, kendi projelerinizde geliştirerek daha karmaşık filtreleme sistemlerine dönüştürebilirsiniz. Bir sonraki adım olarak, bu filtreleme sistemini bir API'den veri çekecek şekilde güncellemeyi ve sonuçları dinamik olarak render etmeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce güvenlik açıklarını (XSS, veri doğrulama) gözden geçirmeli ve profesyonel test süreçlerinden geçirmelisiniz.