Belajar HTML - Progressive Enhancement dan Konten Fallback

#Pendahuluan

Tidak semua pengunjung memakai browser terbaru dengan jaringan tercepat. Episode 22 membahas progressive enhancement dan konten fallback: pendekatan membangun dari lapisan paling dasar, strategi saat JavaScript mati atau format gambar tidak didukung, dan deteksi fitur yang jujur.

Prinsipnya sederhana: konten harus tetap sampai. Gaya dan perilaku adalah peningkatan yang boleh gagal sebagian — konten adalah fondasi yang tidak boleh hilang.

#Tiga Lapisan Web

#Konten, Presentasi, dan Perilaku

Sebuah halaman tersusun dari tiga lapisan. Lapisan pertama HTML untuk konten dan struktur, lapisan kedua CSS untuk presentasi, lapisan ketiga JavaScript untuk perilaku:

Halaman dengan tiga lapisan

<article>
  <h2>Berita Pagi</h2>
  <p>Hujan lebat diperkirakan melanda beberapa wilayah hari ini.</p>
</article>
<script src="js/berita.js" defer></script>

Tanpa CSS, halaman tetap terbaca. Tanpa JavaScript, konten tetap tampil. Progressive enhancement memastikan setiap lapisan bisa gagal tanpa menghancurkan lapisan di bawahnya.

#Meningkatkan dari Dasar

Bangun markup lengkap dan fungsional dulu, lalu tambahkan perbaikan. dialog dengan form method="dialog" sudah berfungsi tanpa skrip; showModal hanya peningkatan untuk pengalaman yang lebih baik.

#Strategi Fallback

#noscript untuk Konten Penting

noscript menampilkan konten saat JavaScript tidak berjalan:

Fallback tanpa JavaScript

<noscript>
  <p>JavaScript dinonaktifkan. Gunakan tautan ini untuk versi ringkas:
  <a href="/versi-ringkas">Versi ringkas</a>.</p>
</noscript>

Jangan menduplikasi seluruh halaman di noscript — sediakan jalan alternatif, seperti tautan atau form dasar yang tetap berfungsi tanpa skrip.

#Fallback Gambar dengan picture

Browser yang tidak mengenali format baru melompat ke <source> berikutnya, lalu ke img:

Format dengan fallback

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Dokumentasi acara tahunan">
</picture>

img dengan src dan alt adalah jaring pengaman terakhir. alt memastikan konten tetap sampai bagi pengguna pembaca layar dan saat gambar gagal dimuat.

#Deteksi Fitur di JavaScript

Daripada menebak dukungan browser, periksa langsung apakah fitur ada:

Deteksi dukungan dialog

const elemenDialog = document.createElement("dialog");
const dialogDidukung = typeof elemenDialog.showModal === "function";
 
if (!dialogDidukung) {
  document.body.classList.add("tanpa-dialog");
}

Pola typeof fitur === "function" menilai kemampuan nyata browser. Kelas tanpa-dialog lalu dipakai CSS untuk menyesuaikan tata letak saat dialog tidak tersedia.

#Menerapkan pada Form dan Elemen Modern

#Form tanpa JavaScript

Validasi bawaan browser tetap memblokir kiriman yang tidak valid tanpa skrip. Tambahkan action dan method yang benar agar form bekerja meski fetch gagal:

Form dengan fallback

<form action="/daftar" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Daftar</button>
</form>

Jika JavaScript berjalan, skrip bisa mengintersep submit dan memakai fetch. Jika tidak, browser mengirim form secara tradisional ke action — kedua jalur berfungsi.

#Elemen Interaktif yang Menurun dengan Elegan

details dan summary terbuka lewat atribut open tanpa JavaScript. Elemen yang menuntut skrip, seperti galeri geser, sebaiknya memuat konten statis sebagai dasar dan menyembunyikannya hanya setelah skrip siap.

#Kesalahan Umum dan Solusinya

#Menyembunyikan Konten Sampai Skrip Siap

Konten yang tersembunyi default lalu dimunculkan skrip berisiko hilang permanen jika skrip gagal. Tampilkan konten dulu, lalu sembunyikan lewat skrip setelah siap.

#Mengandalkan Format Baru Tanpa Fallback

Menaruh avif sebagai satu-satunya sumber membuat pengguna browser lama tidak melihat gambar. Selalu sediakan fallback jpeg atau png melalui picture.

#Penutup

Episode 22 menutup pemahaman ketahanan: tiga lapisan web yang bisa gagal tanpa merusak satu sama lain, fallback untuk gambar dan skrip, serta deteksi fitur yang jujur alih-alih menebak browser.

Inti yang harus dibawa pulang:

• HTML untuk konten, CSS untuk presentasi, JavaScript untuk perilaku.
• Setiap lapisan boleh gagal tanpa menghancurkan lapisan di bawahnya.
• noscript menyediakan jalan alternatif saat skrip mati.
• picture menurun ke format yang didukung, lalu ke img.
• Deteksi fitur memeriksa kemampuan nyata, bukan nama browser.
• Form dengan action dan method tetap bekerja tanpa fetch.

Seri belajar HTML kalian hampir selesai. Episode terakhir akan menjadi penutup seri: markup siap produksi untuk desain modern — merangkum seluruh materi dari episode 0 sampai 22, memeriksa checklist akhir, dan memastikan halaman kalian layak tayang.