Html & Css İle Özelleştirilebilir Bir Dinamik Fiyat Karşılaştırma Aracı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Dinamik fiyat karşılaştırma aracımızı oluşturmak için herhangi bir sunucu taraflı dile (PHP, Python vb.) ihtiyaç duymadan, sadece tarayıcı üzerinde çalışan bir yapı kuracağız. İhtiyacınız olan tek şey bir kod editörü (VS Code önerilir) ve güncel bir web tarayıcısıdır.

• Modern bir kod editörü (Visual Studio Code, Sublime Text vb.).
• Temel HTML5 ve CSS3 bilgisi.
• Tarayıcı geliştirici araçlarını (F12) kullanma becerisi.
• Proje klasörü yapısı: index.html ve style.css dosyaları.

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

İlk adımda, karşılaştırma aracımızın iskeletini oluşturacağız. Semantik HTML etiketleri kullanarak arama motorlarının içeriği daha iyi anlamasını sağlayacağız. Aşağıdaki kod, üç farklı ürün planını içeren temel bir tablo yapısıdır.

  

    
Başlangıç
    
₺199
    

      
Temel Özellikler
      
E-posta Desteği
    
    Satın Al
  

Bu kod bloğu, bir fiyat kartının temel bileşenlerini içerir. div yapısı, CSS ile biçimlendirme yaparken bize esneklik sağlar.

Adım 2: CSS ile Görsel Tasarım ve Esneklik

Tasarımlarımızı modern göstermek için CSS kullanacağız. Esnek bir yapı için Flexbox modelini tercih ediyoruz. Bu sayede ekran genişliğine göre kartlar otomatik olarak hizalanacaktır.

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 40px;
}

.pricing-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease;
}

.pricing-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Burada transition ve transform özellikleri kullanarak, kullanıcı mouse ile kartın üzerine geldiğinde hafif bir büyüme efekti ekledik. Bu, kullanıcı etkileşimini artıran küçük ama etkili bir dokunuştur.

Adım 3: Dinamik Özellik Ekleme ve Mantıksal Yapı

Html & Css ile özelleştirilebilir bir dinamik fiyat karşılaştırma aracı yaparken, CSS değişkenlerini (Custom Properties) kullanmak büyük bir avantaj sağlar. Bu sayede renkleri veya fontları tek bir noktadan değiştirebilirsiniz.

:root {
  --primary-color: #2ecc71;
  --card-bg: #ffffff;
  --text-color: #333;
}

.price {
  color: var(--primary-color);
  font-size: 2rem;
  font-weight: bold;
}

:root içerisinde tanımladığımız değişkenler, tüm projede tutarlılığı sağlar. var(--primary-color) kullanımı, gelecekte marka renginizi değiştirmek istediğinizde sadece tek bir satırı güncellemenize olanak tanır.

Adım 4: Mobil Uyumluluk (Responsive Tasarım)

Mobil cihazlar için tasarımın kırılmaması adına @media sorgularını kullanmalıyız. Ekran genişliği 768 pikselin altına düştüğünde kartları alt alta dizeceğiz.

@media (max-width: 768px) {
  .pricing-container {
    flex-direction: column;
  }
}

Bu kod, mobil kullanıcılarda yatay kaydırma çubuğu oluşmasını engeller ve içeriğin okunabilirliğini korur.

Adım 5: Karşılaştırma Tablosu Yöntemleri

Aşağıdaki tablo, farklı yaklaşımların avantaj ve dezavantajlarını özetlemektedir.

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

Web projelerinde güvenlik her zaman ön plandadır. Her ne kadar sadece HTML ve CSS kullansak da, kullanıcıların etkileşime gireceği form alanları ekleyecekseniz XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız.

Kritik Uyarı: Eğer bu araca kullanıcı girişi veya veri tabanı bağlantısı ekleyecekseniz, kullanıcıdan gelen verileri asla doğrudan HTML içine yansıtmayın. Her zaman sunucu tarafında veri temizleme (sanitization) yapın.

Performans için CSS dosyalarınızı minify (sıkıştırma) etmeyi ve gereksiz dış kaynak kullanımından kaçınmayı unutmayın.

Sıkça Sorulan Sorular

CSS değişkenleri tüm tarayıcılarda çalışır mı?

Evet, modern tarayıcıların tamamı CSS değişkenlerini desteklemektedir. 2026 yılı itibarıyla eski tarayıcı desteği aramaya gerek kalmamıştır.

Bu aracı nasıl daha dinamik hale getirebilirim?

JavaScript kullanarak, kullanıcının seçtiği para birimine göre fiyatları anlık olarak hesaplayan bir fonksiyon ekleyebilirsiniz.

Mobil cihazlarda kartlar çok büyük görünüyor, ne yapmalıyım?

CSS içerisinde font-size değerlerini rem birimiyle tanımlayarak tarayıcı ayarlarına göre ölçeklenmesini sağlayabilirsiniz.

SEO için nelere dikkat etmeliyim?

Tablonuzdaki başlık etiketlerini (h3, h4) doğru hiyerarşide kullanmak, arama motorlarının içeriğinizi daha iyi indekslemesine yardımcı olur.

Özelleştirilebilirliği nasıl artırırım?

CSS değişkenlerini (Custom Properties) kullanarak renk, kenarlık ve gölge gibi değerleri tek bir yapılandırma dosyasında toplayabilirsiniz.

İleri Seviye İpuçları: CSS Grid ile Karmaşık Düzenler

Daha önce Flexbox kullanarak oluşturduğumuz yapı, tek boyutlu dizilimler için mükemmeldir. Ancak, fiyat karşılaştırma aracınızda 4 veya daha fazla sütunlu, hücreleri birbirine tam hizalanmış karmaşık tablolar oluşturmak isterseniz CSS Grid yapısına geçiş yapmanız önerilir. Grid, satır ve sütunları aynı anda kontrol etmenize olanak tanır.

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  align-items: start;
}

.price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Bu yapı sayesinde, kart içerisindeki içerik miktarı farklı olsa bile, tüm kartların alt kısımlarındaki "Satın Al" butonları her zaman aynı hizada kalacaktır. Bu, görsel hiyerarşiyi korumak için kritik bir detaydır.

Hata Ayıklama ve Tarayıcı Test Süreçleri

Geliştirdiğiniz aracın farklı tarayıcılarda tutarlı görünmesi için "Cross-Browser" testleri yapmanız şarttır. Özellikle eski tarayıcı sürümlerinde CSS değişkenlerinin (Custom Properties) desteklenmediği durumlar için bir yedekleme (fallback) mekanizması kurmalısınız.

CSS Fallback Kullanımı

CSS değişkenlerini tanımlarken, tarayıcının değişkeni okuyamaması durumunda devreye girecek varsayılan değerleri mutlaka belirtin.

.price-card {
  /* Değişken desteklenmiyorsa 1px solid #ccc kullanılır */
  border: 1px solid var(--border-color, #ccc);
  background-color: var(--card-bg, #ffffff);
}

Test Edilmesi Gereken Temel Senaryolar

• Taşma Kontrolü: Fiyat başlıkları veya özellik listeleri çok uzun olduğunda kartın yapısı bozuluyor mu? word-wrap: break-word; özelliğini kullanarak metinlerin taşmasını engelleyin.
• Klavye Erişilebilirliği: Kullanıcılar "Tab" tuşunu kullanarak tüm butonlar arasında gezinebiliyor mu? :focus durumlarını belirgin hale getirin.
• Yükleme Hızı: Eğer tablo içerisinde ikonlar veya özel fontlar kullanıyorsanız, bunların font-display: swap; ile yüklendiğinden emin olun.

Deployment Öncesi Optimizasyon

Aracınızı canlıya almadan önce CSS dosyanızı küçültmek (minification) ve gereksiz boşlukları temizlemek, sayfa yüklenme süresini milisaniyeler düzeyinde iyileştirecektir. Ayrıca, kritik CSS (Critical CSS) yöntemini kullanarak, sayfanın ilk açılışında görünen fiyat kartlarının stillerini HTML dosyasının içinde etiketiyle sunmak, kullanıcı deneyimini (LCP - Largest Contentful Paint) doğrudan artıracaktır.

İpucu: Eğer aracınızda çok fazla stil tanımlaması varsa, CSS dosyanızı modüler parçalara ayırın ve sadece gerekli olanları ana dosyada birleştirin.

Sonuç

Html & Css ile özelleştirilebilir bir dinamik fiyat karşılaştırma aracı yapmak, hem teknik becerilerinizi geliştirir hem de kullanıcılarınıza değer katar. Bu rehberde öğrendiğiniz Flexbox, CSS değişkenleri ve responsive tasarım teknikleri, modern web geliştirmenin temel taşlarıdır. Bir sonraki adımda, bu yapıyı bir JavaScript fonksiyonu ile birleştirerek kullanıcıların "yıllık" veya "aylık" fiyatlandırma arasında geçiş yapmasını sağlayan bir buton eklemeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu rehber eğitim amaçlıdır. Üretim ortamında kullanılacak uygulamalarda veri güvenliği ve erişilebilirlik standartlarına (WCAG) tam uyum sağlamanız önerilir.