Progressive Enhancement: Temel İçerik ve Gelişmiş Özellikler

Progressive Enhancement Nedir?

Progressive enhancement, web geliştirmede 'en kötü durum' (en düşük yetenekli tarayıcı) ile başlayıp, desteklenen özelliklerle deneyimi iyileştirme yaklaşımıdır.

Temel prensip: İçerik ve temel işlevsellik her zaman çalışmalı. JavaScript, CSS ve gelişmiş HTML özellikleri, deneyimi iyileştirir ama gerekli değildir.

Graceful degradation'ın tersi: Graceful degradation, en iyi deneyimle başlar ve düşük yetenekli ortamlarda bozulur. Progressive enhancement, temel deneyimle başlar ve iyileştirir.

Avantajlar: Daha geniş kullanıcı erişimi, daha iyi performans, daha iyi SEO, daha iyi erişilebilirlik.

Temel Katmanlar

HTML (içerik): Anlamsal (semantic) HTML ile temel içerik ve yapı. JavaScript olmadan da okunabilir ve kullanılabilir.

CSS (sunum): Temel stiller tüm tarayıcılarda çalışır. @supports ile gelişmiş CSS özellikleri koşullu olarak uygulanır.

JavaScript (davranış): Temel işlevsellik HTML form'ları ile sağlanır. JavaScript, enhanced UX (AJAX, animasyon) ekler.

Her katman bir öncekinin üzerine inşa edilir. Alt katman bozulursa üst katmanlar da bozulur ama temel işlevsellik korunur.

HTML First Yaklaşımı

Semantic HTML: Doğru HTML elementlerini kullanın. <button>, <a>, <form>, <input>, <nav>, <main>, <article>.

Form'lar: JavaScript olmadan da çalışan form'lar oluşturun. action ve method attribute'ları ile server-side processing.

Link'ler: Gerçek <a href="..."> link'leri kullanın. JavaScript ile client-side routing yapın ama fallback olarak server-side routing sağlayın.

NoScript: <noscript> tag'ı ile JavaScript devre dışıyken alternatif içerik gösterin.

Progressive Web App: Service Worker ve manifest, temel site çalıştığında eklenir. Temel site JavaScript olmadan da çalışır.

CSS Progressive Enhancement

@supports: CSS feature query ile koşullu stil. @supports (display: grid) { .container { display: grid; } }.

Fallback: Temel stil tüm tarayıcılarda çalışır. Gelişmiş özellikler desteklenen tarayıcılarda uygulanır.

Örnek: .button { background: blue; } @supports (backdrop-filter: blur(10px)) { .button { backdrop-filter: blur(10px); background: rgba(0,0,255,0.5); } }.

CSS custom properties: Değişkenler desteklenmiyorsa fallback değerler kullanın. color: blue; color: var(--primary, blue);.

JavaScript Progressive Enhancement

Feature detection: Modernizr veya native feature detection ile tarayıcı yeteneklerini kontrol edin.

Polyfill: Eksik özellikleri (fetch, Promise, IntersectionObserver) polyfill ile ekleyin. core-js veya polyfill.io kullanın.

Graceful degradation: JavaScript hata verirse temel işlevsellik korunmalı. try/catch ile hataları yakalayın.

Module/nomodule: Modern tarayıcılar için ES modules, eski tarayıcılar için transpiled bundle. <script type="module" src="app.mjs"> ve <script nomodule src="app.js">.

Lazy loading: Gelişmiş özellikleri (animasyon, interaktif widget) lazy load edin. Temel içerik hemen yüklenir.

Test ve Değerlendirme

JavaScript devre dışı test: Tarayıcıda JavaScript'i devre dışı bırakın. Temel işlevsellik çalışıyor mu?

Yavaş bağlantı test: 3G veya yavaş WiFi ile test edin. İçerik zamanında yükleniyor mu?

Eski tarayıcı test: IE11, eski Safari/Chrome ile test edin. Temel işlevsellik çalışıyor mu?

Lighthouse: Accessibility ve Best Practices skorlarını kontrol edin. Progressive enhancement, bu skorları iyileştirir.