Panduan Modern Web Guidance

Meningkatkan visibilitas scrollbar bagi pengguna yang lebih menyukai antarmuka kontras tinggi

Menerapkan efek visual kustom dengan shader WebGL ke konten HTML.

Panduan warna untuk web, termasuk persyaratan kontras, skema warna terang dan gelap, Mode Warna Paksa, serta pembuatan tint dan shade dari warna dasar.

Pangkas elemen dan kontennya menjadi bentuk bebas apa pun, seperti simbol, goresan kuas, atau tekstur organik untuk desain yang lebih ekspresif.

Tambahkan dekorasi teks seperti garis bawah, garis atas, coretan, atau bentuk kustom sepenuhnya, dengan animasi pengungkapan, offset kustom dan inset akhir, serta ink skipping yang fleksibel.

Menyesuaikan warna atau ketebalan scrollbar

Menerapkan dukungan mode gelap dengan cara yang menghormati preferensi tema terang/gelap pengguna dan menyesuaikan UI browser (misalnya, scrollbar, kontrol formulir, dll.)

Mengintegrasikan elemen HTML interaktif ke dalam tampilan 3D.

Pilih warna teks yang mudah dibaca dengan kontras yang memadai pada warna latar belakang dinamis.

Buat setiap baris judul atau lockup multi-baris memiliki lebar yang sama, seperti dalam tipografi gaya poster atau judul bertumpuk. Tidak seperti teks rata kanan kiri, teks itu sendiri diukur sesuai lebar, bukan diregangkan spasinya

Mengambil dan mengekspor konten HTML dinamis sebagai gambar atau frame video dari dalam canvas.

Mengekspos konten yang dirender di kanvas ke fitur browser seperti teknologi pendukung, terjemahan, atau mode baca.

Tingkatkan tata letak dan keterbacaan konten teks mandiri yang singkat, seperti judul yang tidak lebih dari beberapa baris, dengan memungkinkan browser menerapkan pemisah baris yang seimbang saat menggabungkan teks.

Mencapai perataan vertikal yang presisi dengan teks font apa pun. Misalnya, padding visual yang sama persis di atas dan di bawah teks, atau meratakan teks agar sejajar sempurna dengan ikon atau gambar di dekatnya.

Gabungkan beberapa bentuk untuk membuat potongan yang kompleks atau efek 'knockout' pada elemen, seperti menambahkan notch ke elemen.

Terapkan gradien transparansi ke tepi konten untuk menunjukkan area yang dapat di-scroll lebih lanjut atau untuk mengaburkan teks yang dilindungi penghalang pembayaran.

Terapkan tema pada UI yang dihasilkan browser seperti pemilihan teks, scrollbar, kontrol formulir, dan pemilih dengan CSS, bukan membuatnya ulang dengan elemen kustom.

Praktik terbaik tipografi untuk web, termasuk unit ukuran font, tinggi baris, pengemasan dan penyeimbangan teks, serta jenis fluid yang diskalakan dengan area pandang.

Efek visual dengan CSS seperti bayangan berlapis, mode campuran, gradien dengan interpolasi warna yang dapat diprediksi, dan pola seperti garis, papan catur, titik, dan diagram lingkaran yang dibuat dari gradien saja.

Tentukan gaya font agar teks tetap dapat dibaca dan konsisten secara visual jika terjadi pertukaran antara font yang diinginkan dan salah satu font pengganti (atau sebaliknya).

Tentukan gaya font agar teks tetap dapat dibaca dan konsisten secara visual dalam situasi saat beberapa font digunakan untuk merender satu blok teks.

Terapkan pola tekstur dan pelapukan yang realistis pada elemen untuk memberikan tampilan material fisik, organik, atau tua.

Buat status progres scroll, pelacak progres bertahap, atau affordance visual apa pun yang mengomunikasikan seberapa jauh pengguna telah men-scroll halaman atau bagian.

Buat carousel slide dengan gambar atau elemen visual lainnya, dengan setiap slide dianimasikan saat masuk/tengah/keluar dari scroller. Misalnya, slide dapat muncul/menghilang, berputar, menjadi lebih besar atau lebih kecil, dll.

Memaksa elemen tertentu berada dalam mode terang atau mode gelap (misalnya, blok kode, pemutar media, dll.) secara independen dari skema warna halaman.

Buat tooltip dan popover dengan panah arah (atau gaya visual lainnya) yang otomatis mengarah ke arah yang benar saat elemen beralih ke posisi pengganti.

Buat fitur tarik untuk menampilkan yang memungkinkan pengguna menarik layar ke bawah untuk menampilkan lebih banyak konten, seperti kotak penelusuran.

Buat tabel data yang menyajikan data tabulasi dengan semantik header yang tepat, dan tetap dapat dibaca serta dijelajahi di layar kecil dan dengan teknologi pendukung.

Buat tombol atau widget mengambang (kembali ke atas, scroll ke bawah, peluncur chat, dll.) yang muncul dan menghilang berdasarkan apakah pengguna telah men-scroll atau tidak.

Buat overlay bayangan scroll, gradien pudar, atau indikator panah arah yang hanya muncul saat ada lebih banyak konten untuk di-scroll ke arah tersebut.

Animasikan header tetap atau sampul halaman penuh dengan lancar saat di-scroll untuk menyusut secara dinamis, mendapatkan bayangan, dan mengubah tata letaknya dalam jarak scroll yang telah ditentukan.

Buat header bagian atau navbar melekat yang berubah secara visual saat benar-benar "melekat" di bagian atas, mengubah skema warnanya, atau mendapatkan bayangan.

Menampilkan dan mengelola ikon yang dapat ditetapkan dan diparameterisasi dari CSS, cepat dimuat, tajam pada resolusi apa pun, dan ditampilkan dengan benar ke (atau disembunyikan dari) teknologi pendukung.

Posisikan dropdown, flyout, atau panel tindakan kontekstual yang ditambatkan ke tombol pemicu sehingga otomatis membalik sumbu di tepi area pandang, bukan terpotong.

Membangun komponen kartu yang menyesuaikan presentasinya dengan ruang dan konten yang tersedia.

Bangun komponen menu yang menampilkan daftar opsi atau tindakan, dengan dukungan untuk submenu bertingkat.

Menandai bagian halaman yang saat ini terlihat di menu navigasi

Buat status progres bergaya yang mengomunikasikan penyelesaian tugas atau proses, baik dalam status pasti maupun tidak pasti.

Buat komponen kartu informasi yang menampilkan pratinjau terstruktur interaktif dari halaman yang akan dibuka oleh jenis link tertentu (misalnya, profil pengguna) saat diarahkan.

Buat panduan orientasi persisten menggunakan overlay native tertaut yang tetap terbuka selama interaksi pengguna.

Buat notifikasi toast dan overlay yang tidak mengganggu untuk pesan persisten yang dapat ditumpuk dan komunikasi status.

Buat komponen tombol mode gelap yang memungkinkan pengguna mengganti preferensi skema warna sistem mereka untuk situs saat ini.

Buat komponen dialog modal atau non-modal yang dapat diakses, mengelola fokus dengan tepat, dan dapat ditutup sesuai harapan pengguna di setiap platform.

Buat indikator lingkaran berputar pemuatan yang mengomunikasikan status sibuk kepada semua pengguna, mengikuti preferensi gerakan yang dikurangi, dan menganimasikan secara efisien.

Buat komponen panel navigasi yang, saat dipicu dari tombol menu, akan meluncur masuk dari samping dan menutupi konten halaman yang ada, dan meluncur keluar saat ditutup (dengan menggeser, mengetuk di luar, atau menekan tombol escape).

Buat komponen diagram progres yang secara visual merepresentasikan status penyelesaian tugas atau proses, dengan dukungan untuk konten di tengah dan gaya visual yang konsisten dengan merek.

Bangun navigasi hierarkis layar penuh yang memungkinkan pengguna melihat perincian tampilan bertingkat dan menggeser atau menavigasi kembali untuk kembali, dengan histori penjelajahan tetap disinkronkan.

Menata gaya kotak centang, termasuk ikon kustom, tata letak, warna, animasi centang/hapus centang, sekaligus mempertahankan fungsi dan aksesibilitas native.

Buat efek fade-in, scale-up, atau efek pengungkapan kompleks lainnya pada elemen saat elemen tersebut masuk dan keluar dari scrollport (atau area pandang) saat pengguna men-scroll.

Mentransisikan elemen dengan lancar di antara dua posisi elemen target. Misalnya, memindahkan garis bawah tab yang dipilih antara tab yang dipilih sebelumnya dan tab yang dipilih saat ini.

Sembunyikan/tampilkan elemen dengan lancar saat ditambahkan/dihapus dari DOM atau saat nilai tampilannya diubah.

Animasikan elemen seperti dialog, popover, dan tooltip saat elemen tersebut masuk/keluar dari lapisan atas.

Mendukung penyeretan untuk memindahkan elemen mengambang di halaman.

Buat efek berbasis scroll (seperti paralaks) yang memungkinkan lapisan latar depan dan latar belakang bergerak dengan kecepatan berbeda, sehingga menciptakan kesan kedalaman saat pengguna men-scroll.

Tandai secara visual item non-interaktif yang saat ini dipaskan posisinya dalam carousel, galeri, atau pengalaman geser halaman penuh dengan pengepasan posisi scroll. Misalnya, meluaskan kartu saat diposisikan, atau menampilkan konten tersembunyi.

Pastikan status halaman penting dimuat dan stabil sebelum memulai transisi tampilan lintas dokumen. Artinya, gaya CSS penting dimuat dan diterapkan, JavaScript penting dimuat dan dijalankan, dan HTML yang terlihat untuk tampilan awal halaman oleh pengguna telah diuraikan sebelum transisi berjalan.

Atur waktu animasi atau transisi di seluruh elemen seinduk sehingga setiap elemen dimulai setelah penundaan yang dihitung berdasarkan posisinya dalam daftar elemen seinduk.

Buat transisi yang lancar dan mulus antara navigasi halaman penuh, seperti cross-fade, efek pengungkapan kustom, atau perubahan konten dari satu halaman ke halaman berikutnya.

Hubungkan tombol secara deklaratif ke elemen apa pun untuk memicu tindakan kustom khusus aplikasi menggunakan perintah tombol deklaratif, perintah invoker, perintah tombol, perintah kustom, atau tindakan tombol deklaratif.

Mengubah visibilitas dialog atau popover dari tombol tanpa menulis JavaScript.

Animasikan perubahan status visual untuk mencerminkan arah alur navigasi pengguna, seperti menggeser konten baru dari kanan saat maju atau dari kiri saat kembali ke layar sebelumnya.

Mentransisikan sekelompok elemen serupa secara bersamaan menggunakan logika transisi yang sama, seperti menghapus produk dari keranjang belanja dan membuat semua produk lainnya beranimasi ke posisi barunya.

Menandai rentang teks arbitrer di halaman seperti hasil penelusuran, kesalahan ejaan, atau kursor pengeditan kolaboratif.

Buat efek pengungkapan interaktif, seperti sorotan yang mengikuti kursor pengguna untuk menampilkan detail dalam gambar atau bagian UI.

Tampilkan pratinjau langsung efek tombol saat pengguna menunjukkan minat (misalnya, mengarahkan kursor, memfokuskan, atau menekan lama), tetapi sebelum mereka mengklik.

Membuat dialog modal yang dapat ditutup melalui penutupan ringan (yaitu mengklik atau mengetuk di luar dialog)

Menganimasikan UI dengan transisi CSS, animasi, animasi berbasis scroll, dan transisi tampilan sambil mempertahankan gerakan pada kompositor dan mematuhi preferensi gerakan yang dikurangi.

Memindahkan atau mengubah induk elemen DOM tanpa kehilangan status elemen penting, seperti status interaktivitas (:focus/:active), status pemuatan <iframe>, status animasi/transisi, dll.

Membuat dialog modal, elemen layar penuh, atau popover native tetap terbuka secara visual dan aktif secara fungsional saat node DOM yang mendasarinya dipindahkan atau diubah induknya di DOM.

Buat efek transisi dan animasi kustom berbasis fisika, seperti pantulan dan pegas, yang terasa lebih alami dan menarik daripada kurva easing tradisional.

Buat dialog modal yang dapat ditutup melalui tindakan pengguna standar khusus platform, seperti menekan tombol Esc di platform desktop, atau gestur "kembali" atau "tutup" di platform seluler

Mencegah halaman yang mendasarinya di-scroll saat dialog modal terbuka.

Hubungkan elemen persisten secara visual di berbagai status halaman atau navigasi dalam Aplikasi Web Satu Halaman (SPA) (misalnya, memperluas thumbnail produk menjadi banner besar penuh) dengan mengubah ukuran, posisi, atau properti gaya lainnya secara lancar.

Menganimasikan perubahan status di dalam satu komponen (kartu, daftar, panel, atau subhierarki lainnya) sementara bagian halaman lainnya tetap interaktif, dan transisi lainnya berjalan secara bersamaan.

Berikan masukan visual real-time dalam elemen UI tertaut saat pengguna men-scroll konten yang sejajar dengan snap, sebelum gestur scroll selesai.

Menyinkronkan indikator navigasi, panel konten tertaut, dan pelacakan analisis dengan item yang dipaskan secara aktif dalam container yang dapat di-scroll.

Menganimasikan properti visual pada elemen target — seperti memudarkan latar belakang, mengubah warna latar belakang, atau membuat pengalaman scrollytelling — yang sepenuhnya didorong oleh posisi scrollport elemen yang sama sekali berbeda.

Sembunyikan konten dari tampilan menggunakan pola seperti akordeon, tab, dan bagian "Baca selengkapnya", sekaligus memastikan teks tersembunyi muncul selama penelusuran "Temukan di halaman" native, memungkinkan pengindeksan mesin telusur, mendukung deep link fragmen URL, dan mempertahankan aksesibilitas ARIA.

Buat daftar elemen yang dapat di-scroll (misalnya, carousel gambar atau rangkaian percakapan chat) yang dapat ditampilkan dengan elemen tertentu yang di-scroll ke tampilan pada render awal.

Menampilkan tooltip atau informasi tambahan saat pengguna mengarahkan kursor, memfokuskan, atau menekan lama elemen interaktif, tanpa perlu mengklik.

Menerapkan navigasi spasial yang mudah diakses menggunakan tombol panah yang berfungsi dengan benar dalam berbagai mode tata letak (petak, dll.)

Izinkan pengguna menindaklanjuti item dalam daftar (menghapus, mengarsipkan, menandai sebagai telah dibaca, dll.) dengan gestur geser horizontal, sehingga mereka dapat memproses entri dengan cepat tanpa mengetuk kontrol terpisah.

Izinkan pengguna menggeser secara horizontal pada item daftar atau panel konten untuk menampilkan tombol tindakan kontekstual atau menu samping tanpa memicu tindakan secara otomatis.

Memicu efek visual, animasi, atau perubahan fokus pada elemen target hanya setelah scroll terprogram yang lancar ke elemen tersebut selesai.

Izinkan pengguna menggeser atau men-scroll permukaan dua dimensi dengan bebas—seperti peta, gambar yang diperbesar, kanvas tanpa batas, atau petak data besar—di kedua arah (baik secara diagonal maupun mengubah arah di tengah gestur) tanpa mengunci gestur ke satu sumbu horizontal atau vertikal.

Buat komponen pilihan kustom yang dropdown-nya dianimasikan. Misalnya, menu memudar atau bergeser ke tampilan, atau opsi dianimasikan saat dipilih.

Sesuaikan kotak centang, tombol pilihan, penggeser rentang, dan status progres dengan palet warna situs Anda tanpa menggantinya dengan komponen kustom.

Menata gaya penggeser rentang native dengan status trek, thumb, pengisian, dan fokus kustom sekaligus mempertahankan fungsi dan aksesibilitas native.

Buat elemen pilihan kustom yang tombol, pemilih, ikon panah, dan tanda centangnya cocok dengan tipografi, warna, spasi, dan perlakuan batas merek atau sistem desain Anda.

Buat formulir pembayaran yang mengumpulkan detail kartu dengan nilai pelengkapan otomatis yang benar dan dukungan isi otomatis.

Membuat formulir login dengan nilai pelengkapan otomatis yang benar dan dukungan isi otomatis.

Buat formulir pendaftaran dengan nilai pelengkapan otomatis yang benar dan dukungan isi otomatis.

Buat tombol yang mudah diakses dengan atribut tombol HTML native, dan gunakan kotak centang bergaya jika tidak didukung.

Buat formulir alamat dengan atribut pelengkapan otomatis yang benar dan dukungan isi otomatis.

Buat pemilih kustom yang opsinya diposisikan dengan cara yang unik atau menarik, bukan daftar opsi bertumpuk tradisional.

Izinkan kolom formulir bertambah dan berkurang agar sesuai dengan input pengguna, misalnya saat pengguna mengetik atau memilih opsi lain. Terapkan batas ukuran maksimum dan minimum untuk membuat kolom formulir yang dinamis dan responsif yang sesuai dengan desain halaman.

Praktik terbaik untuk membuat formulir web yang mudah diakses, aman, dan mudah digunakan. Gunakan panduan ini saat membuat atau mengubah formulir, input, dan alur pengiriman.

Gunakan CSS untuk menandai kolom formulir yang telah diisi otomatis oleh browser dan tidak diedit oleh pengguna.

Terapkan Enter untuk mengirim di textarea dan input satu baris (chat, penelusuran, penggantian nama inline) dengan aman bagi pengguna IME (Input Method Editor) untuk mencegah pengiriman teks yang tidak lengkap.

Berikan pesan error untuk kolom formulir wajib diisi yang dilewati atau dibiarkan kosong hanya setelah interaksi pengguna, untuk menghindari error preemptive dan memastikan masukan diberikan tepat waktu dan relevan secara kontekstual dengan alur pengguna.

Buat komponen pilihan kustom yang opsinya dapat berisi format HTML yang kompleks (misalnya, gambar, ikon, dan format kaya lainnya), bukan hanya teks biasa.

Memvalidasi bahwa opsi non-default telah dipilih di menu pilihan hanya setelah pengguna berinteraksi dengan kontrol.

Verifikasi nomor telepon pengguna dan kode sandi sekali pakai yang dikirim melalui SMS dengan ekstraksi kode otomatis dan input formulir yang mudah diakses.

Tampilkan masukan validasi kolom formulir (misalnya, persyaratan kompleksitas sandi atau format email) hanya setelah pengguna menyelesaikan interaksi awal, sehingga menghindari error prematur saat pemuatan halaman atau saat pengguna mengetik.

Buat elemen kustom dapat diakses secara default, tetapkan peran dan status ARIA melalui mixin ARIA ElementInternals, kelola fokus dengan delegatesFocus, dan pertahankan hubungan ARIA dalam satu shadow root.

Menentukan, mendaftarkan, dan mengelola siklus proses elemen kustom otonom, yang mencakup aturan konstruktor, callback siklus proses, waktu upgrade, refleksi atribut/properti, dan konvensi penamaan.

Buat kontrol kustom berpartisipasi secara native dalam formulir dengan formAssociated dan ElementInternals, mengirimkan nilainya sendiri, berintegrasi dengan validasi batasan, dan bereaksi terhadap reset, penonaktifan, dan pemulihan status.

Panduan berorientasi tindakan untuk arsitektur HTML modern, semantik, API interaktif native (Dialog, Popover, Detail), pengelolaan fokus, dan prioritas resource. Gunakan panduan ini saat menyusun dokumen web, menerapkan overlay native, atau mengoptimalkan urutan pemuatan resource.

Merender elemen kustom di sisi server, lalu menghidrasinya di tempat tanpa merender ulang atau menampilkan konten tanpa gaya.

Enkapsulasi DOM dan gaya komponen dengan Shadow DOM, buat hierarki secara efisien dengan template HTML, dan proyeksikan konten konsumen dengan slot.

Gaya di seluruh batas bayangan dengan pemilih :host, properti yang diwarisi dan kustom untuk tema, ::slotted dan ::part, serta lapisan bertingkat dan kueri penampung di dalam komponen.

Orientasi dan prinsip lintas sektoral untuk penulisan dan penggunaan Komponen Web, yang mencakup Elemen Kustom, Shadow DOM, template dan slot, Shadow DOM Deklaratif, penataan gaya di seluruh batas shadow, Elemen Kustom Terkait Formulir, dan persyaratan aksesibilitas. Gunakan panduan ini saat membuat komponen UI yang dapat digunakan kembali, sistem desain, atau elemen kustom yang dirender server.

Menganimasikan komponen interaktif (seperti akordeon, menu, dan kartu yang diperluas) dengan lancar ke dan dari dimensi alaminya.

Menghitung ukuran elemen berdasarkan ukuran intrinsiknya, sekaligus memastikan elemen tersebut sesuai dengan batasan desain yang diberikan.

Membuat komponen yang mengubah gayanya berdasarkan status salah satu elemen turunannya. Misalnya, komponen yang dirender dalam mode terang atau gelap berdasarkan apakah tombol tema dicentang (atau tidak).

Menerapkan aturan atau deklarasi CSS tertentu secara bersyarat hanya jika aturan-at tertentu didukung oleh browser.

Membuat komponen yang mengubah tata letaknya berdasarkan apakah komponen tersebut berisi elemen turunan tertentu (atau tidak). Misalnya, jika komponen berisi gambar, gunakan tata letak multi-kolom, jika tidak, gunakan tata letak satu kolom secara default.

Tata letak CSS modern seperti flexbox, petak, subpetak, kueri penampung, pemosisian anchor, dan ukuran intrinsik. Gunakan keterampilan ini saat merancang komponen UI atau tata letak halaman yang responsif.

Panduan berorientasi tindakan untuk arsitektur CSS modern, termasuk cascade, pemilih, cakupan, bertingkat, dan token desain. Gunakan panduan ini saat membuat gaya atau mengelola sistem desain.

Tentukan token desain tingkat tinggi, seperti mode kepadatan (rapat, longgar, luas) atau tema, dan buat komponen turunan bereaksi terhadap perubahan secara langsung dan dengan cara yang sesuai dengan komponen.

Menskalakan item seperti ukuran font, spasi, dan ukuran media dengan lancar berdasarkan ukuran penampung induk, bukan menggunakan titik henti sementara tetap

Menganimasikan atau mengganti properti transformasi CSS individual (misalnya, translate, rotate, scale) secara independen dari properti transformasi lainnya pada satu elemen.

Sesuaikan batas pemangkasan yang terlihat dari elemen agar sejajar dengan tepi konten, tepi padding, atau tepi batas—atau offset yang ditentukan dari salah satu tepi ini—sehingga menawarkan kontrol yang lebih mendetail atas cara konten dipangkas.

Kurangi pengulangan gaya yang berlebihan dengan mengenkapsulasi logika gaya yang kompleks atau dinamis ke dalam fungsi yang dapat digunakan kembali (seperti fungsi yang menghitung gradien berdasarkan kumpulan parameter input).

Membangun UI yang beradaptasi dengan ukuran penampung dan area pandang, termasuk kueri penampung, unit area pandang dinamis, rasio aspek, dan tipografi responsif.

Menargetkan elemen berdasarkan persimpangan atau gabungan pemilih dan @-rule bersyarat sekaligus meminimalkan pengulangan.

Bangun komponen yang menyesuaikan logika visual berdasarkan konteks semantik menggunakan kueri gaya penampung CSS.

Bangun komponen yang gayanya dapat bergantung secara kondisional pada lebar atau tingginya sendiri, bukan lebar atau tinggi area pandang. Misalnya, komponen kartu yang dapat mengubah tata letaknya bergantung pada ukurannya, atau tombol pesan ajakan (CTA) yang dapat menampilkan teks bantuan secara bersyarat berdasarkan lebarnya.

Menata gaya elemen induk kolom formulir (misalnya, label atau fieldset) saat kolom tidak valid.

Buat spektrum visual atau pengaturan tata letak dinamis yang otomatis beradaptasi dengan jumlah elemen dalam grup.

Menghitung waktu yang berlalu atau tersisa antara tanggal dan waktu, menyeimbangkan unit durasi, dan memformat durasi yang dilokalkan dan dapat dibaca manusia menggunakan Temporal.Duration dan Intl.DurationFormat.

Buat model tanggal kalender, waktu jam dinding, tanggal parsial (ulang tahun berulang, masa berlaku kartu kredit), dan interval bulanan berulang yang tidak bergantung pada lokasi tanpa pergeseran zona waktu menggunakan jenis Temporal Plain.

Jadwalkan rapat atau acara mendatang dengan mengaitkannya secara eksplisit ke zona waktu IANA geografis sehingga waktu acara tetap akurat, terlepas dari transisi Waktu Musim Panas (DST), jam yang "dilewati" atau "diulang" selama perubahan waktu.

Mengurai, mengurutkan, dan mengukur interval antara stempel waktu ISO 8601 sub-milidetik atau nanodetik tanpa tabrakan pemotongan Tanggal menggunakan Temporal.Instant.

Menampilkan dan menghitung tanggal dalam sistem kalender non-Gregorian (misalnya, Islam, Ibrani, atau China) secara akurat untuk pengguna internasional.

Mengompilasi C/C++ ke WebAssembly menggunakan Emscripten

Pisahkan pemrosesan sinkron yang berat (komputasi kompleks dan/atau loop panjang) atau update DOM, agar browser dapat menangani input pengguna dan menggambar ulang layar.

Menghitung total waktu yang dihabiskan pengguna untuk melihat halaman, tidak termasuk periode saat tab berada di latar belakang.

Memuat atau melakukan inisialisasi dependensi asinkron secara bersyarat (seperti mengimpor polyfill untuk fitur web yang tidak ada) tanpa memerlukan orkestrasi yang kompleks di semua dependensi skrip halaman.

Lakukan debounce dan pengelompokan beberapa peristiwa analisis, telemetri, dan Core Web Vitals bersama-sama dalam satu beacon untuk meminimalkan pertentangan jaringan dan mengurangi beban server, sekaligus tetap memberikan update real-time.

Kurangi waktu rendering di halaman web yang berisi banyak konten (misalnya, halaman dengan feed panjang, banyak artikel, atau dasbor yang kompleks), dengan menunda rendering untuk konten apa pun yang tidak langsung terlihat oleh pengguna.

Tunda operasi yang berat seperti update DOM, pengambilan data, pelacakan analisis, atau penghitungan ulang tata letak hingga setelah scroll selesai untuk mempertahankan performa scroll yang lancar.

Menayangkan gambar dekoratif yang dioptimalkan (seperti latar belakang, ikon UI, atau mask kompleks) dengan secara bersamaan menyediakan format gambar generasi berikutnya (seperti AVIF atau WebP) bersama beberapa kepadatan piksel (seperti 1x dan 2x) sehingga browser dapat secara dinamis menegosiasikan kombinasi terbaik antara ukuran file dan kualitas visual untuk kemampuan perangkat pengguna.

Membatalkan prioritas pengambilan data latar belakang yang dilakukan dengan Fetch API untuk mencegah pertentangan jaringan dengan permintaan yang dimulai pengguna.

Menentukan dengan andal apakah halaman awalnya dimuat di latar belakang, bahkan dalam kasus saat skrip dimuat secara asinkron setelah pengguna menampilkan halaman di latar depan.

Hemat resource sistem dan masa pakai baterai dengan menjeda eksekusi JavaScript latar belakang (seperti animasi <canvas>, rendering WebGL, atau polling data WebSocket frekuensi tinggi) saat komponen berada di luar layar, lalu lanjutkan tepat waktu saat komponen di-scroll kembali ke tampilan.

Memungkinkan transisi yang lebih cepat kembali ke tampilan yang dikunjungi sebelumnya di Aplikasi Web Satu Halaman (SPA) dengan mempertahankan status DOM strukturalnya, bukan menghancurkan dan mem-build ulang pada setiap navigasi.

Menayangkan dan merender pengujian A/B, pengujian multivariat, atau eksperimen lainnya menggunakan JavaScript sisi klien untuk mengubah atau memasukkan HTML, CSS, dan JavaScript tanpa menampilkan konten asli terlebih dahulu sebelum berkedip atau berkedip untuk menampilkan konten eksperimen.

Mengidentifikasi JavaScript yang berjalan lambat dan penyebab lain dari responsivitas Interaction to Next Paint (INP) yang buruk.

Mengidentifikasi skrip yang paling bertanggung jawab atas frame animasi panjang

Tingkatkan performa pemuatan halaman dengan mengambil data atau melakukan pra-rendering halaman yang kemungkinan akan dikunjungi pengguna berikutnya.

Tunda download aset video dan audio di luar layar, termasuk gambar poster video dan data media yang dipramuat, hingga pemutar media mendekati area pandang untuk menghemat bandwidth dan mengurangi pertentangan jaringan selama pemuatan halaman awal.

Mengukur waktu yang diperlukan untuk interaksi pengguna dan navigasi sisi klien guna merender update baru yang berisi konten di layar.

Optimalkan prioritas pemuatan gambar kandidat Largest Contentful Paint (LCP) dan batalkan prioritas gambar yang tidak penting untuk mengurangi penundaan pemuatan resource penting.

Optimalkan prioritas relatif konten yang dipramuat untuk mengurangi penundaan pemuatan resource penting.

Optimalkan prioritas pemuatan skrip dengan meningkatkan skrip asinkron penting dan menurunkan prioritas skrip yang tidak penting atau skrip di akhir isi halaman untuk meningkatkan pengurutan dan mengurangi penundaan.

Buat interaksi lebih cepat dan lebih responsif (mengurangi skor Interaction to Next Paint (INP)) dengan menghindari penghitungan ulang tata letak dalam tata letak yang kompleks, seperti dasbor yang berisi banyak data atau petak bergaya spreadsheet.

Memperbarui halaman secara deklaratif dengan konten yang di-streaming nanti ke dalam dokumen HTML yang sama atau melalui JavaScript API imperatif.

Panduan yang dapat ditindaklanjuti untuk mengoptimalkan aplikasi web modern. Gunakan panduan ini saat mengaudit performa, mengoptimalkan metrik pemuatan, memperbaiki interaksi yang lambat, dan mengoptimalkan Core Web Vitals (LCP, INP, CLS)

Lacak analisis, Core Web Vitals, error, dan data telemetri dengan andal di seluruh kunjungan halaman pengguna, dan tunda pengiriman data hingga pengguna keluar dari halaman.

Gunakan gambar yang dioptimalkan resolusinya dalam elemen pseudo CSS (seperti ::before dan ::after) untuk mengurangi jumlah node DOM.

Jadwalkan tugas dengan prioritas berbeda untuk memastikan pekerjaan penting dijalankan terlebih dahulu, sementara pekerjaan latar belakang ditunda.

Panduan coding yang dapat ditindaklanjuti untuk membangun aplikasi web yang mudah diakses, yang mencakup HTML semantik, pengelolaan fokus, formulir, media, dan pengujian. Gunakan keterampilan ini saat mengaudit atau menerapkan fitur aksesibilitas, navigasi keyboard, atau ARIA.

Sinkronkan status aksesibilitas terprogram (seperti aria-invalid) dengan status visual :user-invalid untuk memastikan pengguna pembaca layar menerima masukan error hanya setelah interaksi, yang mencerminkan pengalaman visual.

Gunakan konten yang dihasilkan CSS (::before/::after) dengan cara yang tetap dapat diakses, termasuk teks alternatif untuk konten dekoratif.

Patuhi preferensi skala teks sistem operasi untuk halaman agar ukuran font, tata letak, dan pengukuran berbasis rem mengikuti setelan aksesibilitas pengguna.

Bandingkan dan validasi origin web dan situs dengan aman di seluruh pesan dan URL lintas dokumen tanpa penguraian string yang rentan error.

Buat rahasia bersama menggunakan enkapsulasi kunci publik atau perjanjian kunci—termasuk perlindungan hybrid dan pasca-kuantum—dan enkripsi data sensitif di browser dengan enkripsi yang diautentikasi.

Mengakses resource di jaringan lokal atau antarmuka loopback pengguna dari aplikasi web publik.

Mengautentikasi pengguna yang kembali dengan kunci sandi untuk login utama.

Mendaftarkan kunci sandi secara otomatis untuk pengguna yang sudah ada setelah login dengan sandi berhasil.

Izinkan pengguna melihat dan mengelola kunci sandi yang terdaftar di akun mereka.

Memverifikasi identitas pengguna yang login menggunakan kunci sandi yang ada sebelum melakukan tindakan sensitif.

Mendaftarkan kunci sandi untuk akun pengguna yang ada.

Orientasi komprehensif dan prinsip lintas sektoral untuk menerapkan WebAuthn dan Kunci Sandi di aplikasi web. Gunakan panduan ini saat menangani pendaftaran, autentikasi, pengelolaan, atau autentikasi ulang kunci sandi.

Cegah serangan XSS berbasis DOM dengan menentukan kebijakan Trusted Types untuk membersihkan HTML yang tidak tepercaya, menggunakan kebijakan tersebut saat menulis ke sink DOM seperti innerHTML, dan menerapkan Trusted Types melalui Kebijakan Keamanan Konten.

Autentikasi pengguna yang kembali di tempat dengan kunci sandi atau sandi tersimpan mereka sebelum membuka halaman login atau mengganggu alur kerja mereka.

Batasi halaman atau worker agar hanya berkomunikasi dengan daftar endpoint jaringan yang diizinkan secara eksplisit untuk mencegah permintaan pihak ketiga yang tidak sah dan pemindahan data sisi klien.

Mengurai dan menampilkan konten HTML yang tidak tepercaya dari input pengguna dengan aman dengan menghapus elemen dan atribut yang tidak aman.

Verifikasi integritas kriptografis skrip, stylesheet, font, dan gambar eksternal yang dimuat dari origin pihak ketiga, serta kontrol apakah permintaan tersebut mengirim kredensial atau URL perujuk.

Tanda tangani dan verifikasi pesan, token, atau artefak di browser menggunakan kunci asimetris klasik atau tahan kuantum (pasca-kuantum) untuk memastikan integritas dan keaslian data.

Verifikasi bahwa pengguna memiliki alamat email selama pembuatan, login, atau pemulihan akun tanpa mengirimkan kode sandi sekali pakai atau email magic link.

Panduan keamanan preventif untuk developer web (XSS, CSP, Cookie, Isolasi Lintas Origin). Gunakan keterampilan ini untuk memandu proses audit, pengujian, dan deployment kebijakan keamanan dengan aman.

Panduan berorientasi tindakan bagi developer web untuk menerapkan privasi dari desain, minimalisasi data, audit pihak ketiga, dan penanganan data yang aman. Gunakan keterampilan ini saat mendesain aplikasi, mengintegrasikan layanan pihak ketiga, menangani data pengguna, atau mengonfigurasi header keamanan.

Mentransfer aplikasi web yang diinstal ke origin baru sekaligus mempertahankan konfigurasi pengguna dan pintasan tingkat OS.

Mendeteksi bahasa konten buatan pengguna atau konten situs yang sudah ada.

Jalankan inferensi bahasa alami di perangkat di browser menggunakan Prompt API, dengan output streaming, respons JSON terstruktur, dan pengelolaan sesi multi-turn.

Meringkas konten teks menggunakan Summarizer API di perangkat.

Menerjemahkan teks antarbahasa menggunakan Translator API di perangkat.

Mengekspos fungsi sisi klien sebagai alat ke agen AI dengan menganotasi formulir HTML standar dengan atribut WebMCP.

Daftarkan fungsi JavaScript sisi klien secara terprogram sebagai alat untuk agen AI menggunakan WebMCP Imperative API.

Gunakan panduan ini untuk mengimplementasikan WebMCP (Web Model Context Protocol) di aplikasi browser, yang mengekspos fungsionalitas sisi klien sebagai alat ke agen AI melalui API deklaratif atau imperatif.