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

Gereksinimler ve Ön Hazırlık

Çalışmaya başlamadan önce modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve tercihen VS Code gibi bir metin editörüne ihtiyacınız vardır. 2026 yılı itibarıyla CSS Grid ve Flexbox kullanımı, responsive (duyarlı) tasarım için standart kabul edilmektedir.

Projenizi oluştururken dosya yapınızın şu şekilde olması önerilir:

• index.html (İçerik yapısını barındıran dosya)
• style.css (Görsel tasarımları ve filtreleme mantığını barındıran dosya)

Adım 1: İçerik Filtreleme İçin HTML Yapısını Kurma

Filtreleme sisteminin temelini, semantik (anlamlı) HTML etiketleri oluşturur. İçeriklerinizi bir kapsayıcı içerisinde gruplamak, CSS ile müdahale etmeyi kolaylaştırır. Aşağıdaki örnekte, her bir öğeye bir "kategori" sınıfı atayarak filtreleme mantığına zemin hazırlıyoruz.

  Tümü
  Teknoloji
  Tasarım



  
Yapay Zeka Blogu
  
UI/UX Prensipleri

Burada data-filter özniteliği, JavaScript ile tetikleyeceğimiz filtreleme mantığı için bir anahtar görevi görür. Her öğeye atanan sınıf isimleri ise CSS seçicileri ile eşleşmelidir.

Adım 2: CSS ile Görsel Filtreleme Mantığını Oluşturma

CSS, filtreleme işlemini görsel olarak yönetmek için oldukça güçlüdür. Özellikle "checkbox hack" yöntemi veya modern CSS seçicileri ile etkileşimli alanlar oluşturabilirsiniz. Aşağıdaki kod bloğu, içeriklerin nasıl gizlenip gösterileceğini temel bir CSS yapısıyla açıklar.

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

/* Filtrelenmemiş öğeleri gizle */
.content-grid.filter-teknoloji .item:not(.teknoloji) {
  display: none;
}

.content-grid.filter-tasarim .item:not(.tasarim) {
  display: none;
}

Bu yöntem, sınıf manipülasyonu ile içerikleri anlık olarak filtrelemenize olanak tanır. transition özelliği sayesinde geçişlerin daha yumuşak ve profesyonel görünmesini sağlıyoruz.

Adım 3: Responsive Tasarım ve CSS Grid Kullanımı

Filtrelenen içeriklerin farklı ekran boyutlarında düzgün görünmesi için CSS Grid kullanmak en verimli yöntemdir. Aşağıdaki örnek, içeriklerin mobil cihazlarda tek sütun, masaüstünde ise üç sütun halinde dizilmesini sağlar.

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

auto-fit ve minmax kullanımı, ekran genişliğine göre kutuların otomatik olarak yeniden boyutlanmasını sağlar. Bu, 2026 yılı responsive tasarım standartlarının temel taşıdır.

Adım 4: Etkileşim İçin JavaScript ile Filtreleme Fonksiyonu

HTML ve CSS tek başına statik kalabilir; etkileşim için küçük bir JavaScript fonksiyonu eklememiz gerekir. Bu kod, butonlara tıklandığında ilgili sınıfı content-grid kapsayıcısına ekler.

const buttons = document.querySelectorAll('.filter-btn');
const grid = document.querySelector('.content-grid');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const filter = btn.getAttribute('data-filter');
    grid.className = 'content-grid filter-' + filter;
  });
});

Bu fonksiyon, butonun data-filter değerini alır ve grid kapsayıcısının sınıfını günceller. CSS'deki seçicilerimiz bu sınıf değişikliğine göre içerikleri otomatik olarak gizler veya gösterir.

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

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

Kullanıcı verisiyle çalışırken her zaman XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Filtreleme sisteminizde dinamik olarak içerik oluşturuyorsanız, kullanıcıdan gelen verileri mutlaka temizleyin.

Güvenlik Uyarısı: Kullanıcı girdilerini doğrudan DOM'a eklemek yerine textContent kullanın. Asla innerHTML içerisine filtrelenmemiş kullanıcı girdisi yerleştirmeyin.

Performans için ise, çok fazla içerik varsa "Lazy Loading" (tembel yükleme) yöntemini kullanarak sadece ekranda görünen öğelerin yüklenmesini sağlayabilirsiniz.

Sıkça Sorulan Sorular

Filtreleme sırasında animasyon ekleyebilir miyim?

Evet, CSS opacity ve transform özelliklerini kullanarak öğelerin kaybolurken veya görünürken yumuşak bir animasyonla hareket etmesini sağlayabilirsiniz.

Çok fazla kategorim varsa ne yapmalıyım?

Kategorileri bir açılır menü (dropdown) içerisine alarak kullanıcı arayüzünü sadeleştirebilirsiniz.

Bu yöntem SEO dostu mudur?

Evet, içerikler HTML içerisinde yer aldığı için arama motorları tarafından dizine eklenebilir. Ancak filtreleme sonuçlarının URL ile desteklenmesi (örneğin: site.com?kategori=teknoloji) SEO başarısını artırır.

Mobil cihazlarda filtreleme butonları nasıl görünmeli?

Mobil cihazlarda butonları yatay bir kaydırma çubuğu (horizontal scroll) içerisinde göstermek, kullanıcı deneyimini ciddi oranda artırır.

Hangi durumlarda JavaScript kullanmalıyım?

Eğer filtreleme mantığı çok karmaşık değilse CSS yeterlidir; ancak veritabanından gelen verileri filtreleyecekseniz JavaScript şarttır.

Sorumluluk Reddi: Bu rehberde sunulan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce güvenlik açıklarını taramanız ve güncel kütüphane sürümlerini takip etmeniz önerilir.

Gelişmiş Filtreleme İçin URL Parametreleri (Deep Linking)

Kullanıcıların yaptıkları filtrelemeleri başkalarıyla paylaşabilmeleri veya sayfayı yenilediklerinde aynı filtre sonuçlarını görebilmeleri için "Deep Linking" (Derin Bağlantı) yöntemini kullanmalısınız. Bu yöntem, seçilen kategoriyi URL'nin sonuna bir sorgu parametresi olarak ekler.

Aşağıdaki JavaScript örneği, bir kategori seçildiğinde URL'yi nasıl güncelleyeceğinizi ve sayfa yüklendiğinde bu parametreyi nasıl okuyacağınızı gösterir:

// URL'yi güncelleme fonksiyonu
function updateURL(category) {
    const url = new URL(window.location);
    url.searchParams.set('filter', category);
    window.history.pushState({}, '', url);
}

// Sayfa yüklendiğinde URL'den filtreyi okuma
window.onload = () => {
    const params = new URLSearchParams(window.location.search);
    const filter = params.get('filter');
    if (filter) {
        applyFilter(filter); // Mevcut filtreleme fonksiyonunuzu çağırın
    }
};

Filtreleme Sistemlerinde Hata Ayıklama ve Performans İzleme

Büyük veri setleri ile çalışırken filtreleme işlemleri tarayıcıyı yavaşlatabilir. Performansı optimize etmek ve olası hataları tespit etmek için şu adımları izleyin:

• DOM Manipülasyonunu Azaltın: Her filtreleme işleminde tüm DOM ağacını yeniden oluşturmak yerine, sadece görünürlük sınıflarını (display: none/block) değiştirin.
• Debounce Kullanımı: Eğer bir arama çubuğu ile filtreleme yapıyorsanız, kullanıcının her tuş vuruşunda değil, yazmayı bıraktığı 300ms sonra filtrelemeyi tetikleyin.
• Konsol Logları: Filtreleme fonksiyonunuzun içine console.time('filter') ve console.timeEnd('filter') ekleyerek işlemin kaç milisaniyede tamamlandığını ölçün.

Hata ayıklama sırasında, filtrelenmiş öğe kalmadığında kullanıcıya boş bir ekran göstermek yerine, "Aradığınız kriterlere uygun sonuç bulunamadı" gibi bir geri bildirim mesajı eklemek kullanıcı deneyimini iyileştirir:

function checkResults() {
    const visibleItems = document.querySelectorAll('.item:not([style*="display: none"])');
    const message = document.getElementById('no-results-message');
    
    if (visibleItems.length === 0) {
        message.style.display = 'block';
    } else {
        message.style.display = 'none';
    }
}

Filtreleme Sistemleri İçin Test Senaryoları

Projenizi canlıya almadan önce aşağıdaki test senaryolarını uyguladığınızdan emin olun:

Sonuç

Html & Css ile özelleştirilebilir bir içerik filtreleme sayfası yapmak, web projelerinizde kullanıcı etkileşimini artırmanın en etkili yoludur. Bu rehberde, temel bir yapıdan başlayarak CSS ve JavaScript ile dinamik bir filtreleme sistemini nasıl kuracağınızı öğrendiniz. Bir sonraki adım olarak, filtreleme sonuçlarını URL parametreleri ile senkronize ederek, kullanıcıların filtreledikleri sayfaları paylaşabilmelerini sağlayan "Deep Linking" yapısını araştırmanızı öneririm.