Cross-browser by default: How Baseline fallbacks work in Modern Web Guidance

Tara Agyemang

Dipublikasikan: 12 November 2026

Minta agen coding AI untuk membuat tooltip atau dialog modal, dan perhatikan baik-baik kode yang ditulisnya. Sering kali, agen menarik JavaScript untuk membuat ulang fitur yang ada di browser. Jika Anda meminta agen untuk menggunakan fitur CSS atau HTML yang lebih baru, agen tersebut sering kali akan melewati deteksi fitur dan penggantian. Kelalaian ini membuat pengguna di browser yang tidak didukung melihat halaman yang rusak.

Modern Web Guidance menyertakan kompatibilitas browser ke dalam setiap rekomendasi. Setiap panduan menggabungkan fitur web modern dengan data dukungan Baseline dan pola penggantian yang terverifikasi. Postingan ini membahas cara agen Anda menggunakan data tersebut untuk menulis kode lintas browser yang modern.

Alasan agen coding salah memahami dukungan browser tanpa panduan

Tanpa panduan, agen coding jarang memeriksa browser mana yang perlu didukung project Anda sebelum menulis kode. Sebaliknya, mereka cenderung jatuh ke dalam salah satu dari dua ekstrem:

  • Default ke kode lama: Data pelatihan model penuh dengan pola lama, dan evaluasi Modern Web Guidance menunjukkan bahwa model masih merekomendasikan banyak pola ini. Agen sering kali menulis JavaScript yang kompleks atau menambahkan library eksternal, padahal fitur HTML atau CSS bawaan dapat melakukan tugas tersebut.
  • Menggunakan fitur baru tanpa jaring pengaman: Saat Anda meminta agen untuk menggunakan fitur web yang lebih baru, agen biasanya menulis kode untuk browser pendukung dan berhenti di situ. Kode ini melewati deteksi fitur dan mengabaikan penggantian, sehingga merusak halaman di browser yang tidak mendukung fitur tersebut.

Data dari suite evaluasi Modern Web Guidance menunjukkan seberapa umum kesenjangan ini. Untuk fitur yang belum berfungsi di semua browser utama, suite evaluasi menguji deteksi fitur, aturan @supports, penggantian, atau polyfill bersyarat. Model tanpa panduan hanya lulus pemeriksaan ini sebanyak 43%. Dengan mengaktifkan Modern Web Guidance, tingkat kelulusan melonjak menjadi 87%.

Cara data Dasar Pengukuran memandu setiap rekomendasi

Untuk memutuskan kapan fitur web memerlukan penggantian, Modern Web Guidance mengandalkan Baseline. Baseline melacak dukungan di seluruh kumpulan browser inti (Chrome, Edge, Firefox, dan Safari di desktop dan seluler) dengan tiga status:

  • Baseline Tersedia secara luas: Fitur ini telah berfungsi di semua browser inti selama minimal 30 bulan.
  • Baseline Baru tersedia: Fitur ini berfungsi di semua browser inti, mulai dari tanggal browser terakhir menambahkan dukungan.
  • Ketersediaan terbatas: Fitur ini belum didukung di semua browser inti.

Setiap panduan Modern Web Guidance menyertakan status Dasar Pengukuran bawaan dan data versi browser dari paket web-features. Saat agen coding Anda memuat panduan, agen tersebut akan mendapatkan status dukungan, tanggal rilis, dan versi browser yang tepat untuk fitur tersebut, beserta petunjuk penerapannya. Contoh:

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

Secara default, Modern Web Guidance mengikuti dua aturan berdasarkan data tersebut:

  • Fitur Baseline yang tersedia secara luas: Agen Anda menggunakan fitur ini secara langsung tanpa deteksi fitur tambahan atau kode penggantian. Aturan ini menjaga codebase Anda tetap ramping dan menghindari solusi yang tidak perlu.
  • Fitur Baseline Baru tersedia dan Ketersediaan terbatas: Panduan untuk fitur ini mencakup strategi penggantian yang terverifikasi. Agen Anda menggunakan fitur modern jika didukung dan menyediakan penggantian yang bersih untuk browser lain.

Empat pola penggantian yang digunakan Modern Web Guidance dalam praktiknya

Tidak semua fitur web memerlukan jenis penggantian yang sama. Modern Web Guidance mencocokkan setiap fitur dengan salah satu dari empat pendekatan penggantian berdasarkan perilaku fitur di browser yang tidak didukung:

Pola penggantian Kapan Modern Web Guidance menggunakannya
Progressive enhancement tanpa kode penggantian Fitur dekoratif atau tambahan yang diabaikan dengan aman oleh browser yang tidak didukung tanpa merusak tata letak atau perilaku.
Deteksi fitur CSS dengan aturan @supports Gaya visual atau tata letak yang bergantung pada fitur CSS yang lebih baru dan dapat terlihat rusak jika diterapkan sebagian.
JavaScript kustom yang ringan Atribut HTML atau API interaktif yang memerlukan skrip kecil tanpa dependensi untuk mereplikasi perilaku di browser lama.
Polyfill yang dimuat secara bersyarat Fitur CSS atau JavaScript yang lebih besar yang memerlukan polyfill yang telah diperiksa dan dimuat secara dinamis hanya jika dukungan native tidak ada.

Progressive enhancement tanpa kode penggantian

Beberapa fitur modern meningkatkan tipografi, animasi, atau kecepatan pemuatan halaman tanpa mengubah cara kerja halaman. Jika browser tidak mengenali fitur ini, browser akan mengabaikannya dan merender bagian halaman lainnya seperti biasa.

Misalnya, deklarasi CSS text-wrap: balance (Baseline Baru tersedia) meratakan panjang baris di judul.

.balanced {
  text-wrap: balance;
}

Speculation Rules API (Ketersediaan terbatas) mengambil data di awal atau melakukan pra-rendering halaman berikutnya. Browser yang tidak didukung akan mengabaikan blok <script type="speculationrules"> dan deklarasi CSS yang tidak dikenali dengan aman.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Karena perilaku ini, agen Anda dapat menambahkan fitur ini secara langsung tanpa kode penggantian tambahan.

Deteksi fitur CSS dengan aturan @supports

Fitur CSS lainnya mengubah cara elemen diposisikan atau diberi gaya di layar. Jika Anda menerapkan bagian gaya tanpa syarat, browser yang tidak didukung mungkin merender elemen di tempat yang salah.

Misalnya, kueri penampung yang ditambatkan (container-type: anchored, Ketersediaan terbatas) pada tooltip yang diposisikan memungkinkan Anda membalik panah tooltip saat dibalik di dekat tepi area pandang. Di browser yang tidak mendukung kueri penampung yang ditambatkan, panah tidak dapat mendeteksi pembalikan dan mungkin mengarah ke arah yang salah. Modern Web Guidance menginstruksikan agen Anda untuk menggabungkan gaya panah dalam aturan @supports (container-type: anchored) sehingga panah default hanya muncul di browser yang juga mendukung aturan balik @container anchored().

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

JavaScript kustom yang ringan

Jika fitur HTML interaktif tidak didukung di semua browser inti, Anda tidak perlu menggunakan library pihak ketiga. Untuk interaksi mandiri, Modern Web Guidance menyediakan penggantian JavaScript singkat tanpa dependensi di balik pemeriksaan fitur.

Misalnya, atribut closedby="any" pada elemen <dialog> (Ketersediaan terbatas) memungkinkan pengguna menutup dialog modal dengan mengklik latar belakang. Untuk browser yang tidak mendukung atribut closedby, panduan ini menyertakan pemroses klik kecil yang memeriksa objek HTMLDialogElement.prototype terlebih dahulu:

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

Polyfill yang dimuat secara bersyarat

Untuk fitur platform yang lebih besar, seperti pemosisian anchor CSS (Ketersediaan terbatas) atau Temporal API (Ketersediaan terbatas), menulis penggantian kustom secara manual tidaklah praktis. Pada saat yang sama, menggabungkan polyfill untuk setiap pengguna akan menambah biaya download tambahan untuk browser yang sudah mendukung fitur tersebut.

Dalam kasus ini, Modern Web Guidance mengarahkan agen Anda untuk memeriksa dukungan terlebih dahulu dan memuat polyfill yang telah diperiksa secara dinamis dengan ekspresi import() dari pemaket Anda atau CDN. Browser yang mendukung akan mendownload kode tambahan nol, sedangkan browser lama akan mengambil polyfill sesuai permintaan.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

Menyesuaikan target dukungan browser project Anda

Secara default, Modern Web Guidance menganggap fitur Baseline yang Tersedia secara luas aman digunakan tanpa penggantian. Fitur ini memerlukan penggantian untuk fitur Baseline Baru tersedia dan Ketersediaan terbatas.

Project Anda mungkin memiliki persyaratan browser yang berbeda. Misalnya, Anda mungkin menargetkan tahun Baseline tertentu, mem-build untuk aplikasi Electron, atau mengecualikan polyfill agar paket tetap kecil.

Anda dapat menentukan kebijakan dukungan browser kustom di file AGENTS.md atau CLAUDE.md project:

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

Setiap panduan menyertakan status Dasar Pengukuran, tanggal rilis, dan versi browser minimum untuk setiap fitur. Agen Anda akan membandingkan kebijakan Anda dengan data kompatibilitas ini sebelum menulis kode. Jika fitur sudah memenuhi target Anda, agen akan menulis kode modern dan melewati kode penggantian.

Menguji jalur modern dan jalur penggantian

Menulis kode lintas browser hanyalah setengah dari pekerjaan. Anda juga perlu menguji alur kode modern dan jalur penggantian di browser sungguhan.

Saat menguji di satu browser, Anda hanya memverifikasi satu cabang kode. Misalnya, Chrome dan Firefox menjalankan atribut closedby="any" native pada elemen <dialog>, sedangkan Safari menjalankan penggantian klik di luar JavaScript. Jika Anda memeriksa dialog di Chrome saja, pemroses penggantian tersebut tidak akan pernah berjalan selama pengujian.

Untuk memverifikasi kedua alur kode, hubungkan agen coding Anda ke beberapa mesin browser secara bersamaan:

Dengan ketiga alat tersebut terhubung, agen Anda dapat membuka halaman Anda di Chrome, Firefox, dan Safari dalam satu alur kerja. Kemudian, pengujian dapat mengonfirmasi bahwa fitur native dan pengalaman penggantian berfungsi seperti yang diharapkan.

Mulai menggunakan Modern Web Guidance

Untuk menambahkan Modern Web Guidance ke project Anda, jalankan penginstal interaktif dari direktori project Anda:

npx modern-web-guidance@latest install

Jika Anda telah menginstal versi sebelumnya, jalankan perintah update untuk mengupgrade ke versi 1.0:

npx modern-web-guidance@latest update

Anda juga dapat menginstal Modern Web Guidance melalui marketplace plugin untuk Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code, dan Grok.

Untuk mempelajari lebih lanjut, pelajari referensi berikut: