Progressive Enhancement

Aşamalı Geliştirme

Okunuşu: prıgresiv inhensmınt

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Progressive enhancement, herkes için çalışan temel bir sayfayla başlayıp tarayıcı desteklediğinde daha zengin özellikler ekleyen web tasarım stratejisidir.

Progressive enhancement nedir?

Progressive enhancement, bir web sitesini katman katman inşa eder. Temel, anlamlı HTML içeriğidir; CSS veya JavaScript olmasa bile her tarayıcıda çalışan standart bağlantılar ve formlarla. Bunun üzerine CSS yerleşimi ve görsel tasarımı, JavaScript de etkileşimi ekler; her katman, desteklendiği yerde deneyimi iyileştirir ama temel görev için gerekli değildir.

Örneğin bir arama formu önce sunucuya gönderilen ve sonuç sayfası döndüren normal bir HTML <form> olarak kurulur. Ardından JavaScript, sonuçları yenilemeden anında göstermek için gönderimi yakalar; ancak betik yüklenemezse, yavaş bir ağda zaman aşımına uğrarsa ya da engellenirse form yine çalışır. CSS'te @supports kuralı, daha yeni stilleri yalnızca onları anlayan tarayıcılarda uygular. Modern framework'ler aynı kalıbı sunucuda render edilmiş HTML ve hydration bitmeden çalışan formlarla destekler.

Progressive enhancement, sağlam bir merdiveni olan ve sonra asansör eklenen bir ev yapmak gibidir: herkes üst kata çıkabilir, asansörü kullanabilenler oraya daha rahat ulaşır. Bu yaklaşım, temel içerik en baştan HTML'de olduğu için erişilebilirliği, kötü bağlantılardaki dayanıklılığı ve SEO'yu iyileştirir.

Progressive enhancement çoğunlukla graceful degradation ile karıştırılır. Graceful degradation modern tarayıcılar için tam deneyimle başlar ve eski tarayıcılarda tamamen bozulmaması için yedekler ekler; progressive enhancement ise temel çalışan bir sürümden başlayıp üzerine inşa eder. Sonuçlar benzer görünebilir ama progressive enhancement önce çekirdeğin çalışmasını garanti eder. Ayrıca, çevrimdışı desteği olan kurulabilir bir web uygulaması olan aşamalı web uygulamasıyla (PWA) da aynı şey değildir; iyi PWA'lar çoğu zaman progressive enhancement ilkelerini izlese de.

Önemli noktalar

Düz HTML'de çalışan içerik ve işlevsellikle başlayın.
Sunum için CSS'i, daha zengin etkileşim için JavaScript'i isteğe bağlı katmanlar olarak ekleyin.
Betikler başarısız olduğunda, yavaş yüklendiğinde veya engellendiğinde temel görevler çalışmaya devam eder.
@supports ve özellik algılama, geliştirmeleri yalnızca desteklendikleri yerde uygular.
Graceful degradation tersi yönde çalışır: tam özelliklerden yedeklere doğru.

Örnek

JavaScript ile de onsuz da çalışan bir arama formuhtml

<!-- Works everywhere: a plain form that the server handles -->
<form action="/search" method="get" id="search">
  <input type="search" name="q" aria-label="Search terms">
  <button type="submit">Search</button>
</form>
<div id="results"></div>
<script type="module">
  // Enhancement: if this script runs, show results without a page reload
  document.querySelector("#search").addEventListener("submit", async (event) => {
    event.preventDefault();
    const q = new FormData(event.target).get("q");
    const res = await fetch("/search?q=" + encodeURIComponent(q));
    document.querySelector("#results").innerHTML = await res.text();
  });
</script>

Sık sorulan sorular

Progressive enhancement ile graceful degradation arasındaki fark nedir?

Progressive enhancement, her yerde çalışan temel bir sürümle başlar ve üzerine özellikler ekler. Graceful degradation ise tam özellikli sürümle başlar ve daha az yetenekli tarayıcılarda da, kısıtlı biçimde de olsa çalışması için yedekler ekler.

Progressive enhancement, JavaScript'siz site yapmak demek midir?

Hayır. Temel içeriğin ve görevlerin JavaScript'e bağlı olmadığı anlamına gelir. Aşamalı geliştirilmiş bir site, deneyimi daha hızlı ve zengin kılmak için yine de bolca JavaScript kullanabilir.

Progressive enhancement bugün hâlâ geçerli mi?

Evet. Sorunlu mobil ağlar, tarayıcı eklentileri ve hatalar yüzünden betikler birçok geliştiricinin beklediğinden daha sık başarısız olur; modern framework'lerdeki sunucu tarafı render da bu yaklaşımı izlemeyi kolaylaştırmıştır.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin