Standar Web & Browser

Kenapa ini penting

Bayangkan kalau setiap merek colokan listrik punya bentuk sendiri: charger HP kamu hanya cocok di rumah sendiri. Web pernah mengalami masa seperti itu di akhir 1990-an, ketika browser berlomba membuat fitur sendiri dan developer harus menulis kode berbeda untuk tiap browser. Sekarang ada standar web: aturan bersama yang diikuti semua pembuat browser, sehingga kode yang kamu tulis sekali bisa jalan di Chrome, Firefox, Safari, dan Edge. Sebagai developer, kamu perlu tahu siapa pembuat aturannya, di mana membaca rujukan yang benar, cara mengecek apakah sebuah fitur sudah aman dipakai, dan cara memakai DevTools untuk memeriksa halaman.

Konsep inti

Siapa yang membuat standar

Prinsip dasar standar web: terbuka untuk dipakai dan dikontribusi siapa saja, tidak dikunci paten atau satu perusahaan, mudah diakses dan bisa dipakai lintas browser (interoperable), serta tidak merusak web (don't break the web). Prinsip terakhir menjelaskan kenapa fitur lama jarang benar-benar dihapus: jutaan situs lama masih memakainya.

Siklus hidup fitur

1. Experimental: masih dicoba, mungkin hanya ada di satu browser atau di balik pengaturan khusus. Jangan dipakai di produksi.
2. Stable (stabil): sudah didukung dan spesifikasinya mapan.
3. Deprecated (usang): masih jalan, tetapi tidak disarankan dan bisa dihapus suatu saat. Contoh: elemen <marquee> dan <center>.

Di halaman MDN kamu akan melihat label kecil seperti "Experimental" atau "Deprecated" di dekat judul atau di daftar properti.

MDN, Can I use, dan Baseline

• MDN Web Docs (developer.mozilla.org) adalah rujukan utama untuk HTML, CSS, JavaScript, dan Web API. Isinya ditulis komunitas bersama pembuat browser, disertai contoh dan tabel kompatibilitas. Jadikan MDN tempat pertama kamu mencari, bukan blog acak.
• Can I use (caniuse.com) menampilkan tabel dukungan fitur per browser dan versi, lengkap dengan persentase pengguna global.
• Baseline adalah label ringkas yang muncul di MDN dan Can I use. Browser inti Baseline adalah Chrome, Edge, Firefox, dan Safari (desktop dan mobile):
• Baseline Newly available: fitur sudah jalan di versi stabil terbaru semua browser inti, tetapi mungkin belum di perangkat lama.
• Baseline Widely available: fitur sudah didukung konsisten di semua browser inti selama minimal 2,5 tahun. Ini yang paling aman.
• Limited availability: belum didukung di semua browser inti.

Aturan praktis untuk pemula: kalau label MDN menunjukkan "Widely available", pakai saja. Kalau "Newly available", pertimbangkan siapa pengunjungmu. Kalau "Limited", siapkan cadangan (fallback) atau tunda dulu.

Tur singkat DevTools

Semua browser modern punya DevTools (alat developer). Buka dengan F12, atau Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (macOS), atau klik kanan elemen lalu pilih Inspect. Tab-tab penting:

Ada juga Device Toolbar (ikon HP/tablet, Ctrl+Shift+M / Cmd+Shift+M) untuk melihat tampilan seukuran layar HP. Perubahan di DevTools hanya sementara; kalau halaman di-refresh, kembali ke kode aslinya.

Contoh kode

Buka halaman apa saja, tekan F12, pilih tab Console, lalu ketik baris di bawah satu per satu. Ini cara cepat bereksperimen tanpa membuat file.

// Ambil judul tab halaman yang sedang dibuka
document.title
// → "MDN Web Docs" (tergantung halaman yang kamu buka)

// Cek apakah browser mendukung fitur tertentu (feature detection)
"fetch" in window
// → true

CSS.supports("display", "grid")
// → true  (CSS Grid sudah Baseline Widely available)

CSS.supports("display", "kotak-ajaib")
// → false (properti/nilai ngasal tidak didukung)

// Ubah warna latar halaman sementara (hilang saat refresh)
document.body.style.background = "lightyellow";
// → "lightyellow"

Contoh feature detection di file HTML, supaya halaman tetap aman di browser yang belum mendukung sebuah fitur:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Feature detection</title>
  <style>
    /* Default untuk semua browser: kotak ditumpuk */
    .galeri div { margin: 8px; padding: 16px; background: #dbeafe; }
    /* Hanya dipakai kalau browser mendukung grid */
    @supports (display: grid) {
      .galeri { display: grid; grid-template-columns: repeat(3, 1fr); }
    }
  </style>
</head>
<body>
  <div class="galeri"><div>1</div><div>2</div><div>3</div></div>
  <p id="info"></p>
  <script>
    // Tampilkan info dukungan ke halaman
    const ok = CSS.supports("display", "grid");
    document.getElementById("info").textContent =
      ok ? "Browser ini mendukung CSS Grid" : "Grid tidak didukung, memakai tampilan cadangan";
    // → "Browser ini mendukung CSS Grid"
  </script>
</body>
</html>

Kesalahan umum

• Belajar dari tutorial lama tanpa cek tanggal. Tutorial tahun 2012 mungkin memakai float untuk layout atau <center>. Cek MDN untuk cara modern.
• Memakai fitur "Experimental" di proyek klien. Fitur itu bisa berubah atau hilang. Lihat label Baseline dulu.
• Hanya menguji di satu browser. Minimal uji di Chrome dan satu browser lain (Firefox atau Safari), plus mode HP di DevTools.
• Mengedit CSS di DevTools lalu lupa menyalin ke file. Perubahan di DevTools hilang saat refresh. Salin nilai yang berhasil ke file CSS-mu.
• Mengabaikan merah-merah di Console. Error di Console adalah petunjuk gratis. Baca pesannya dulu sebelum menebak-nebak.

Latihan

1. Mudah, Buka MDN, cari halaman elemen <dialog> dan properti CSS gap. Catat status Baseline masing-masing.
2. Sedang, Buka sebuah situs berita, buka tab Network, refresh halaman. Berapa jumlah request yang terjadi? Cari satu file gambar dan catat ukuran serta status code-nya.
3. Menantang, Buat file HTML berisi tiga kotak yang memakai display: flex sebagai default, lalu @supports (display: grid) untuk mengubahnya menjadi grid 3 kolom. Tambahkan script yang menulis ke halaman apakah grid didukung.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Latihan supports</title>
  <style>
    .wadah { display: flex; gap: 8px; }
    .wadah div { padding: 20px; background: #fde68a; }
    @supports (display: grid) {
      .wadah { display: grid; grid-template-columns: repeat(3, 1fr); }
    }
  </style>
</head>
<body>
  <div class="wadah"><div>A</div><div>B</div><div>C</div></div>
  <p id="status"></p>
  <script>
    document.getElementById("status").textContent =
      CSS.supports("display", "grid") ? "Grid didukung" : "Grid tidak didukung";
    // → "Grid didukung"
  </script>
</body>
</html>

Ringkasan

• Standar web dibuat bersama: WHATWG (HTML, DOM), W3C (CSS, WCAG), TC39 (JavaScript).
• Prinsip utamanya terbuka, interoperable, dan tidak merusak situs lama.
• Fitur punya siklus experimental, stable, deprecated.
• MDN adalah rujukan utama; Can I use dan label Baseline untuk cek dukungan browser.
• Baseline Widely available berarti sudah didukung semua browser inti minimal 2,5 tahun.
• DevTools (F12) untuk inspeksi elemen, baca error di Console, dan pantau request di Network.