Aşamalı Geliştirme (Progressive Enhancement) Nedir?

Üç katman, tek yön

Yaklaşım, sayfayı üst üste binen üç katman olarak düşünür:

1. İçerik ve temel işlev (HTML): Metinler, bağlantılar, formlar ve görseller anlamsal HTML ile, tek başına anlamlı ve kullanılabilir şekilde yazılır. Bir bağlantı gerçek bir adrese gider, bir form gerçek bir sunucu adresine gönderilir.
2. Sunum (CSS): Yerleşim, renk ve tipografi eklenir. Grid veya container query gibi yeni özellikler, desteklemeyen tarayıcıda daha sade ama okunur bir düzene düşecek şekilde kullanılır.
3. Davranış (JavaScript): Anında doğrulama, sayfa yenilemeden gönderim, filtreleme, animasyon gibi iyileştirmeler en son eklenir.

Önemli olan yön: temel deneyim aşağıdan yukarıya kurulur ve her katman bir öncekini bozmadan zenginleştirir.

Zarif bozulmadan farkı

Zarif bozulma (graceful degradation) ters yönden başlar: önce en yetenekli tarayıcı için tam deneyim tasarlanır, sonra eski ya da kısıtlı ortamlar için yamalar eklenir. Kâğıt üzerinde iki yaklaşım aynı sonuca varabilir; pratikte ise zarif bozulmada yedek senaryolar sonradan düşünüldüğü için çoğu zaman eksik kalır. Aşamalı geliştirmede ise en sade senaryo, baştan tasarlanan ve test edilen asıl senaryodur.

Bir iletişim formu üzerinden örnek

<form action="/iletisim/gonder" method="post">
  <label for="eposta">E-posta</label>
  <input id="eposta" name="eposta" type="email" required>
  <label for="mesaj">Mesaj</label>
  <textarea id="mesaj" name="mesaj" required></textarea>
  <button type="submit">Gönder</button>
</form>

Bu form JavaScript olmadan da çalışır: tarayıcı type="email" ve required ile temel doğrulamayı yapar, gönderim sunucuya gider ve sunucu bir teşekkür sayfası döndürür. JavaScript yüklendiğinde aynı form fetch ile sayfa yenilenmeden gönderilecek ve hata mesajlarını alanların yanında gösterecek şekilde zenginleştirilir. Bazı modern framework'ler bu modeli doğrudan destekler; örneğin Next.js'te Server Action'a bağlanan formlar, JavaScript henüz yüklenmemişken veya devre dışıyken de gönderilebilir.

Özellik algılama: tarayıcıya sormak

Tarayıcı türüne veya sürümüne bakarak karar vermek yerine, kullanılacak özelliğin var olup olmadığı doğrudan sorulur:

• CSS'te @supports (display: grid) { … } bloğu yalnızca destekleyen tarayıcılarda uygulanır.
• JavaScript'te if ("IntersectionObserver" in window) gibi kontrollerle iyileştirme yalnızca uygun ortamda çalıştırılır. Service worker kaydı da tipik olarak bu şekilde yapılır.
• <script type="module"> yalnızca modern tarayıcılarda çalıştığı için, eski ortamlara modern kod gönderilmesini önleyen doğal bir ayrım sağlar.

Neden hâlâ önemli ve nerede sınırına gelir?

“Herkesin JavaScript'i açık” varsayımı, JavaScript'in her zaman çalışacağı anlamına gelmez. Bir CDN hatası, mobil ağda yarıda kesilen bir indirme, bir tarayıcı eklentisinin engellemesi ya da tek bir yakalanmamış hata, tamamen JavaScript'e bağlı bir arayüzü boş bırakır. Hydration tamamlanana kadar geçen sürede de sayfa görünür ama tepkisizdir; HTML'in kendi başına çalışan bağlantı ve formları bu boşluğu kapatır. Aynı temel, yardımcı teknolojilerle gezinen kullanıcılar için web erişilebilirliği açısından da sağlam bir başlangıç sunar. Arama motoru botları JavaScript'i çalıştırabilse de içeriğin ilk HTML'de bulunması JavaScript SEO risklerini azaltır; JavaScript çalıştırmayan botlar ise yalnızca bu katmanı görür.

Yaklaşımın sınırları da vardır. Bir fotoğraf düzenleyici, canlı harita ya da tarayıcı içi tasarım aracı doğası gereği JavaScript'siz çalışamaz. Bu durumda temel katman, uygulamanın ne olduğunu anlatan ve neden çalışmadığını açıklayan anlaşılır bir mesaj olabilir. Amaç her şeyi JavaScript'siz yapmak değil, hangi işlevin neye bağımlı olduğunu bilinçli olarak seçmektir.