Javascript İle Dinamik Bir Sayfa İçi Yazı Tipi Özelleştirici Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için modern bir tarayıcı ve temel bir metin editörü yeterlidir. JavaScript'in güncel ES6+ (ECMAScript 2015 ve sonrası) özelliklerini kullanacağımız için tarayıcınızın güncel olduğundan emin olun. Herhangi bir derleyiciye veya paket yöneticisine (NPM/Yarn) ihtiyaç duymadan doğrudan tarayıcı üzerinde çalışacağız.

• Modern bir kod editörü (VS Code vb.)
• Temel HTML5 yapısı
• CSS Değişkenleri (CSS Custom Properties) hakkında temel bilgi
• DOM manipülasyonu için JavaScript bilgisi

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

Özelleştiricinin çalışabilmesi için kullanıcının girdi sağlayacağı kontrollere ve bu girdilerin yansıyacağı bir içerik alanına ihtiyacımız var. Aşağıdaki kod bloğu, yazı tipi ailesini değiştirmek için bir select elemanı ve yazı tipi boyutunu ayarlamak için bir input aralığı (range) içerir.

  Yazı Tipi:
  
    Sans-Serif
    Serif
    Monospace
  

  Boyut:
  



  
Bu metin dinamik olarak özelleştirilecektir.

Burada kullandığımız id değerleri, JavaScript tarafında elemanlara erişmemizi sağlayacak anahtarlardır. input tipi range, kullanıcının görsel bir kaydırma çubuğu ile boyut değiştirmesine olanak tanır.

Adım 2: CSS Değişkenleri ile Dinamik Stiller

JavaScript ile doğrudan stil özelliklerini değiştirmek yerine, CSS değişkenlerini (Custom Properties) manipüle etmek çok daha performanslı ve temiz bir yöntemdir. Bu yaklaşım, stil yönetimini CSS dosyasında tutmamızı sağlar.

:root {
  --main-font: sans-serif;
  --main-size: 16px;
}

#content {
  font-family: var(--main-font);
  font-size: var(--main-size);
  transition: font-size 0.2s ease;
}

:root seçicisi, değişkenlerin tüm sayfa genelinde erişilebilir olmasını sağlar. var() fonksiyonu ise bu değişkenleri tanımladığımız yerlerde kullanmamıza olanak tanır.

Adım 3: JavaScript ile Olay Dinleyicileri (Event Listeners)

Şimdi kullanıcının yaptığı değişiklikleri yakalayıp CSS değişkenlerini güncelleyen JavaScript kodlarını yazalım. addEventListener metodu, kullanıcı etkileşimlerini takip etmek için kullanılır.

const fontSelect = document.getElementById('font-family');
const fontSizeInput = document.getElementById('font-size');
const root = document.documentElement;

fontSelect.addEventListener('change', (e) => {
  root.style.setProperty('--main-font', e.target.value);
});

fontSizeInput.addEventListener('input', (e) => {
  root.style.setProperty('--main-size', e.target.value + 'px');
});

Bu kod bloğunda document.documentElement, :root elementine erişmemizi sağlar. setProperty metodu ise CSS değişkeninin değerini anlık olarak günceller. input olayı, kaydırma çubuğu hareket ettikçe sürekli tetiklenir.

Adım 4: Veri Kalıcılığı (LocalStorage Kullanımı)

Kullanıcı sayfayı yenilediğinde yaptığı değişikliklerin kaybolmaması için localStorage kullanmalıyız. Bu, veriyi tarayıcı hafızasında tutan bir web depolama API'sidir.

// Sayfa yüklendiğinde ayarları uygula
window.addEventListener('DOMContentLoaded', () => {
  const savedFont = localStorage.getItem('fontFamily');
  const savedSize = localStorage.getItem('fontSize');

  if (savedFont) {
    root.style.setProperty('--main-font', savedFont);
    fontSelect.value = savedFont;
  }
  if (savedSize) {
    root.style.setProperty('--main-size', savedSize);
    fontSizeInput.value = parseInt(savedSize);
  }
});

// Değişiklikleri kaydet
fontSelect.addEventListener('change', (e) => {
  localStorage.setItem('fontFamily', e.target.value);
});

fontSizeInput.addEventListener('input', (e) => {
  localStorage.setItem('fontSize', e.target.value + 'px');
});

Bu yapı, kullanıcının tercihlerini tarayıcıda kalıcı kılar. DOMContentLoaded olayı, HTML yapısı tamamen yüklendiğinde çalışarak kullanıcıya kişiselleştirilmiş deneyimini sunar.

Karşılaştırma: Yöntemlerin Avantajları ve Dezavantajları

Kritik Güvenlik ve Performans Uyarıları

Güvenlik Uyarısı: Kullanıcıdan gelen girdileri (örneğin bir input alanından alınan font ismi) doğrudan style.setProperty gibi fonksiyonlara aktarırken dikkatli olun. Eğer bu değerler bir veritabanından veya dış kaynaktan geliyorsa, XSS (Cross-Site Scripting) saldırılarına karşı mutlaka beyaz liste (whitelist) kontrolü yapın. Sadece izin verdiğiniz değerlerin uygulanmasını sağlayın.

Sıkça Sorulan Sorular

CSS değişkenleri yerine doğrudan stil değiştirmek neden önerilmez?

Doğrudan stil değiştirmek (inline styles), CSS'in öncelik kurallarını (specificity) bozar ve kodun bakımını zorlaştırır. CSS değişkenleri ise stil mantığını CSS dosyasında tutarak daha sürdürülebilir bir yapı sunar.

LocalStorage verileri ne kadar süre saklanır?

localStorage verileri, kullanıcı tarayıcı önbelleğini temizleyene veya siz kod ile silene kadar süresiz olarak saklanır.

Mobil cihazlarda range input kullanımı zor mudur?

Hayır, input type="range" dokunmatik ekranlar için oldukça uygundur. Sadece CSS ile dokunma alanını (touch target) biraz genişleterek kullanıcı deneyimini artırabilirsiniz.

Birden fazla elemente aynı anda nasıl uygulanır?

CSS değişkenlerini :root üzerinde tanımladığınız için, bu değişkeni kullanan tüm sınıflar veya elementler otomatik olarak güncellenecektir.

Bu yöntemi Google Fonts ile kullanabilir miyim?

Evet, Google Fonts üzerinden yüklediğiniz yazı tiplerini CSS değişkenine atayarak dinamik bir şekilde değiştirebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, tüm tarayıcı uyumluluklarını ve güvenlik kontrollerini (özellikle kullanıcı girdisi temizleme) projenizin ihtiyaçlarına göre yeniden yapılandırınız.

İleri Seviye İpuçları: Animasyonlu Geçişler ve Yumuşak Değişimler

Kullanıcı yazı tipi boyutunu veya stilini değiştirdiğinde, ani bir sıçrama yerine yumuşak bir geçiş (transition) deneyimi sunmak, arayüzün profesyonellik algısını artırır. CSS transition özelliğini kök elemente veya ilgili kapsayıcılara ekleyerek, değişken değerlerindeki değişimi bir animasyona dönüştürebilirsiniz.

/* CSS içerisine eklenmelidir */
:root {
  --main-font-size: 16px;
  transition: --main-font-size 0.3s ease-in-out;
}

body {
  font-size: var(--main-font-size);
  transition: font-size 0.3s ease;
}

JavaScript tarafında ise bu değişimi tetiklediğinizde, tarayıcı otomatik olarak değerler arasındaki farkı hesaplayarak yumuşak bir geçiş sağlar. Ancak, transition özelliğinin CSS değişkenleri üzerinde doğrudan animasyon oluşturması için tarayıcı desteğini (özellikle @property kuralı ile) kontrol etmeniz gerekebilir.

Hata Ayıklama ve Performans Optimizasyonu

Dinamik stil uygulamalarında en sık karşılaşılan sorun, localStorage verisi ile DOM üzerindeki varsayılan değerlerin çakışmasıdır. Uygulamanızın "Flash of Unstyled Content" (FOUC) sorununa yol açmaması için JavaScript kodunuzu etiketi içerisinde, mümkünse DOMContentLoaded olayını beklemeden çalıştırmanız önerilir.

Hata Ayıklama Stratejileri

• Konsol Kontrolleri: localStorage.getItem('font-size') değerinin null dönüp dönmediğini kontrol edin.
• CSS Değişkeni İzleme: Tarayıcı geliştirici araçlarında (F12) "Elements" sekmesinden :root seçiliyken değişkenlerin değerlerinin anlık değişip değişmediğini gözlemleyin.
• Geri Dönüş (Fallback) Değerleri: CSS değişkenleriniz tanımlanamazsa diye her zaman bir varsayılan değer belirleyin: font-size: var(--main-font-size, 16px);.

Performans İçin İpuçları

Her bir input değişikliğinde DOM'u yeniden boyamak (repaint) tarayıcıyı yorabilir. Özellikle range tipi inputlarda, kullanıcının kaydırma işlemi bitene kadar (onchange) güncelleme yapmak, her milisaniyede (oninput) güncelleme yapmaktan daha performanslıdır.

// Performans için 'change' olayını tercih edin
fontSizeInput.addEventListener('change', (e) => {
  const newSize = e.target.value + 'px';
  document.documentElement.style.setProperty('--main-font-size', newSize);
  localStorage.setItem('font-size', newSize);
});

Deployment Sürecinde Dikkat Edilmesi Gerekenler

Projenizi canlıya alırken, yazı tipi özelleştirme özelliklerinin farklı tarayıcılarda (Cross-Browser) nasıl davrandığını test etmek kritiktir. Özellikle eski tarayıcılar CSS değişkenlerini desteklemeyebilir. Bu durumda, PostCSS veya Autoprefixer gibi araçlar kullanarak CSS değişkenlerinizi statik değerlere dönüştüren bir yedekleme (fallback) mekanizması kurmanız gerekebilir.

Önemli Not: Eğer projenizde bir içerik güvenlik politikası (CSP - Content Security Policy) kullanıyorsanız, JavaScript ile dinamik stil atamaları (inline styles) bazen engellenebilir. Bu durumda style-src 'unsafe-inline' yönergesini gözden geçirmeniz gerekebilir.

Sonuç

Javascript ile dinamik bir sayfa içi yazı tipi özelleştirici oluşturmak, hem kullanıcı etkileşimini artırır hem de erişilebilirlik standartlarına uyum sağlamanıza yardımcı olur. CSS değişkenleri ve localStorage kullanımı, modern web geliştirme süreçlerinin temel taşlarındandır. Bu yapıyı kurduktan sonra bir sonraki adım olarak, "Koyu Mod" (Dark Mode) geçişleri için benzer bir yapı kurarak kullanıcı deneyimini daha da zenginleştirebilirsiniz.