Html & Css İle Özelleştirilebilir Bir Dinamik Adım Sayacı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir gelişmiş framework kullanmanıza gerek yoktur. Modern tarayıcıların desteklediği standart Html5 ve Css3 sözdizimini kullanacağız. İhtiyacınız olan tek şey bir kod editörü (VS Code önerilir) ve bir web tarayıcısıdır.

• HTML5: Yapısal iskeleti oluşturmak için.
• CSS3: Görselleştirme ve animasyonlar için.
• JavaScript: Adımları dinamik olarak yönetmek (ilerleme/gerileme) için.

Çalışma ortamınızı hazırlarken, projenizi index.html, style.css ve script.js şeklinde üç ayrı dosyaya bölmeniz, kodun okunabilirliğini ve yönetilebilirliğini artıracaktır.

Adım 1: Adım Sayacı İçin HTML İskeletini Kurma

Adım sayacının temelini oluştururken anlamsal (semantic) HTML etiketleri kullanmak, SEO ve erişilebilirlik açısından kritiktir. Bir kapsayıcı (container) içerisine adımları temsil eden div veya span öğelerini yerleştireceğiz.

  
1
  
2
  
3
  
4

Burada step sınıfına sahip öğeler her bir adımı temsil eder. active sınıfı ise o an bulunulan adımı belirlemek için kullanılacaktır.

Adım 2: CSS ile Görsel Tasarımı Şekillendirme

Görsel tasarımda Flexbox kullanarak öğelerin hizalanmasını kolaylaştıracağız. CSS ile adımların arasındaki bağlantı çizgilerini ve geçiş efektlerini tanımlayarak profesyonel bir görünüm elde edeceğiz.

.step-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  position: relative;
}

.step {
  width: 40px;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}

.step.active {
  background-color: #3498db;
  color: white;
}

Bu CSS kodları, adımların daire şeklinde görünmesini sağlar ve active sınıfı eklendiğinde arka plan rengini değiştirerek kullanıcıya görsel geri bildirim verir.

Adım 3: JavaScript ile Dinamik İlerleme Mantığı

Adım sayacını dinamik hale getirmek için JavaScript kullanarak active sınıfını tetiklememiz gerekir. Aşağıdaki örnek, "İleri" ve "Geri" butonları ile adımlar arasında geçiş yapmanızı sağlar.

let currentStep = 1;
const steps = document.querySelectorAll('.step');

function updateSteps() {
  steps.forEach((step, index) => {
    if (index < currentStep) {
      step.classList.add('active');
    } else {
      step.classList.remove('active');
    }
  });
}

Bu fonksiyon, currentStep değişkenini kontrol eder ve dizideki indeksi bu değişkenden küçük olan tüm adımlara active sınıfını ekler.

Adım 4: Özelleştirilebilir Yapı ve Değişken Kullanımı

Kodunuzu daha esnek hale getirmek için CSS değişkenleri (Custom Properties) kullanmak en iyi pratiktir. Bu sayede renkleri veya boyutları tek bir noktadan değiştirebilirsiniz.

:root {
  --primary-color: #27ae60;
  --step-size: 50px;
}

.step {
  width: var(--step-size);
  height: var(--step-size);
}

.step.active {
  background-color: var(--primary-color);
}

Bu yöntem, markanızın renkleri değiştiğinde tüm CSS dosyasını taramak yerine sadece :root bloğundaki değişkeni güncellemenize olanak tanır.

Adım 5: Karşılaştırmalı Yöntemler ve Seçim

Adım sayacı oluştururken farklı yaklaşımlar mevcuttur. İhtiyacınıza en uygun olanı seçmek için aşağıdaki tabloyu inceleyebilirsiniz.

Adım 6: Hata Ayıklama ve Optimizasyon

Adım sayacınızın düzgün çalışması için tarayıcı konsolunu (F12) düzenli kontrol etmelisiniz. Yaygın hatalar arasında undefined değişkenler veya yanlış indeks numaraları yer alır. Kodunuzu test ederken console.log(currentStep) kullanarak değişkenin değerini izlemek en iyi debug yöntemidir.

Güvenlik Uyarısı: Kullanıcı girişlerini veya adım verilerini sunucuya gönderirken her zaman XSS (Cross-Site Scripting) saldırılarına karşı verileri sanitize edin. İstemci taraflı doğrulama kullanıcı deneyimi içindir; güvenlik için her zaman sunucu taraflı doğrulama şarttır.

Sıkça Sorulan Sorular

Adım sayacına nasıl animasyon ekleyebilirim?

CSS transition özelliğini kullanarak background-color veya transform değerlerinde yumuşak geçişler sağlayabilirsiniz.

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

Media query kullanarak ekran genişliği azaldığında adım sayacının genişliğini flex-wrap: wrap ile alt satıra geçecek şekilde ayarlayabilirsiniz.

Adım sayısı dinamik olarak artabilir mi?

Evet, JavaScript ile document.createElement kullanarak dinamik olarak yeni div öğeleri oluşturup DOM'a ekleyebilirsiniz.

Neden CSS değişkenlerini tercih etmeliyim?

Bakım kolaylığı sağlar ve tema değişikliği gibi işlemlerde kodun tekrar yazılmasını engeller.

Adımları nasıl devre dışı bırakabilirim?

CSS'de pointer-events: none özelliğini kullanarak belirli adımların tıklanmasını engelleyebilirsiniz.

İleri Seviye Özelleştirme: Durum Yönetimi ve Veri Kalıcılığı

Adım sayacınızın kullanıcı deneyimini bir üst seviyeye taşımak istiyorsanız, sayfa yenilendiğinde kullanıcının kaldığı adımı hatırlamasını sağlamalısınız. Bunun için tarayıcının localStorage API'sini kullanmak en verimli yöntemdir. Aşağıdaki kod bloğu, aktif adımın indeksini tarayıcı belleğine nasıl kaydedeceğinizi ve sayfa yüklendiğinde nasıl geri çağıracağınızı göstermektedir.

// Adım değişiminde veriyi kaydet
function updateStep(stepIndex) {
    localStorage.setItem('currentStep', stepIndex);
    // İlerleme mantığınızı buraya ekleyin
}

// Sayfa yüklendiğinde kaldığı yerden devam et
window.onload = () => {
    const savedStep = localStorage.getItem('currentStep');
    if (savedStep) {
        goToStep(parseInt(savedStep));
    }
};

Bu yaklaşım, özellikle çok adımlı formlarda (multi-step forms) kullanıcının yanlışlıkla sayfayı yenilemesi durumunda veri kaybını önler. Ayrıca, kullanıcıya "Kaldığınız yerden devam etmek ister misiniz?" şeklinde bir bildirim sunarak profesyonel bir arayüz deneyimi oluşturabilirsiniz.

Performans ve Erişilebilirlik Optimizasyonu

Dinamik bir adım sayacı oluştururken sadece görsel estetiğe odaklanmak yeterli değildir. Web standartlarına uygun, erişilebilir ve performanslı bir yapı için aşağıdaki kriterlere dikkat etmelisiniz:

• ARIA Etiketleri: Ekran okuyucular için aria-current="step" özniteliğini kullanarak aktif adımı belirtin.
• CSS Animasyonları: transition özelliğini transform ile birlikte kullanarak GPU hızlandırmasından faydalanın. Bu, düşük donanımlı cihazlarda takılmaları önler.
• DOM Manipülasyonu: Çok sayıda adım içeren yapılarda, her adım için ayrı bir DOM öğesi oluşturmak yerine, şablon (template) etiketlerini kullanarak bellek kullanımını minimize edin.

Aşağıdaki CSS örneği, geçişlerin daha akıcı olması için donanım hızlandırmalı bir animasyon yapısını göstermektedir:

.step-indicator {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.step-active {
    transform: scale(1.1);
    background-color: var(--primary-color);
}

Bu optimizasyonlar, sayacınızın sadece modern tarayıcılarda değil, aynı zamanda kısıtlı kaynaklara sahip mobil cihazlarda da kusursuz çalışmasını sağlar. Kodunuzu modüler tutarak, ileride farklı projelerde de bu bileşeni bir kütüphane gibi kolayca içe aktarabilir ve kullanabilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir dinamik adım sayacı yapmak, hem teknik becerilerinizi geliştirir hem de kullanıcılarınıza profesyonel bir deneyim sunar. Bu rehberde öğrendiğiniz modüler yapı ve CSS değişkenleri kullanımı, gelecekteki projelerinizde de size hız kazandıracaktır. Bir sonraki adım olarak, bu sayacı bir "Form Sihirbazı" (Form Wizard) haline getirmek için form verilerini yerel depolamada (localStorage) tutmayı deneyebilirsiniz.