Kasus penggunaan Panduan Web Modern

Dipublikasikan: 19 Mei 2026

Berikut adalah daftar semua kasus penggunaan yang kini tersedia di Panduan Web Modern.

accessibility

accessible-error-announcement

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

built-in-ai

language-detection

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

language-model

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

summarizer

Meringkas konten teks menggunakan Summarizer API di perangkat.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

translator

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

css

highlight-text-ranges

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

forms

animated-select-picker

Buat komponen pilihan kustom yang drop-down-nya dianimasikan. Misalnya, menu memudar atau meluncur ke dalam tampilan, atau opsi dianimasikan saat dipilih.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

autofill-address-form

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

autofill-highlight-inputs

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

autofill-payment-form

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

autofill-sign-in-form

Buat formulir login dengan nilai isi otomatis yang benar dan dukungan isi otomatis.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

autofill-sign-up-form

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

brand-consistent-forms

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

branded-select-styling

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

custom-select-picker-layouts

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

form-fields-automatically-fit-contents

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

required-field-feedback

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

rich-media-picker

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

select-menu-interaction

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

validate-input-after-interaction

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

passkeys

passkey-authentication

Mengautentikasi pengguna yang kembali dengan kunci sandi untuk login utama.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

passkey-conditional-create

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

passkey-management

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

passkey-reauthentication

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

passkey-registration

Mendaftarkan kunci sandi untuk akun pengguna yang ada.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

performance

batch-analytics-events

Tunda dan gabungkan beberapa peristiwa analisis dalam satu suar untuk meminimalkan persaingan jaringan dan mengurangi beban server, sekaligus tetap memberikan update real-time.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

break-up-long-tasks

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

calculate-total-foreground-time

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

conditional-async-dependencies

Memuat atau menginisialisasi dependensi asinkron secara kondisional (seperti mengimpor polyfill untuk fitur web yang tidak ada) tanpa memerlukan orkestrasi yang rumit di semua dependensi skrip halaman.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

defer-rendering-heavy-content

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.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

defer-work-until-scroll-ends

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

deprioritize-background-fetches

Kurangi prioritas pengambilan data di latar belakang yang dilakukan dengan Fetch API untuk mencegah persaingan jaringan dengan permintaan yang dimulai pengguna.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

detect-initial-visibility-state

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

efficient-background-processing

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

faster-spa-view-transitions

Aktifkan transisi yang lebih cepat kembali ke tampilan yang sebelumnya dikunjungi di Aplikasi Halaman Tunggal (SPA) dengan mempertahankan status DOM strukturalnya, bukan menghancurkan dan membangunnya kembali pada setiap navigasi.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

full-session-analytics

Melacak data analisis, error, dan telemetri secara andal di seluruh kunjungan halaman pengguna, dan menunda pengiriman data hingga pengguna keluar dari halaman.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

identify-heavy-scripts

Mengidentifikasi skrip yang paling bertanggung jawab atas frame animasi yang panjang

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

identify-inp-causes

Mengidentifikasi JavaScript yang berjalan lambat yang memengaruhi metrik INP

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

improve-next-page-load-performance

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

interactions-in-complex-layouts

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

optimize-image-priority

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

optimize-preload-priority

Mengoptimalkan prioritas relatif konten yang dimuat sebelumnya untuk mengurangi penundaan pemuatan resource penting.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

optimize-script-priority

Optimalkan prioritas pemuatan skrip dengan meningkatkan skrip asinkron penting dan menurunkan prioritas skrip non-esensial atau skrip akhir body untuk meningkatkan pengurutan dan mengurangi penundaan.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

resolution-optimized-pseudo-elements

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

schedule-tasks-by-priority

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

sequence-distributed-events

Mencatat dan mengurutkan operasi di microservice terdistribusi atau lingkungan pelacakan throughput tinggi dengan merekam stempel waktu dengan resolusi nanodetik.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

user-experience

adapt-scrollbar-to-contrast-preferences

Meningkatkan visibilitas scrollbar bagi pengguna yang lebih menyukai antarmuka berkontras tinggi

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

anchor-positioning-tab-underline

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

animate-element-entry-exit

Menyembunyikan/menampilkan elemen dengan lancar saat ditambahkan/dihapus dari DOM atau saat nilai tampilannya diubah.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

animate-to-from-top-layer

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

animate-to-intrinsic-sizes

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

apply-webgl-shaders

Terapkan efek visual kustom dengan shader WebGL ke konten HTML.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

calculate-event-differentials

Menghitung durasi dan waktu yang tersisa antara tanggal dan waktu.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

calculate-with-intrinsic-sizes

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

capture-location-agnostic-data

Mencatat data kronologis yang tidak boleh berubah berdasarkan lokasi pengguna, seperti tanggal lahir, alarm berulang, atau hari libur nasional.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

Buat carousel slide dengan gambar atau elemen visual lainnya, dengan setiap slide dianimasikan saat memasuki/memusat/keluar dari penggesernya. Misalnya, slide dapat memudar/memudar, berputar, menjadi lebih besar atau lebih kecil, dll.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

Menyoroti secara visual item non-interaktif yang saat ini di-snap dalam carousel, galeri, atau pengalaman geser layar penuh yang menyentuh scroll. Misalnya, meluaskan kartu saat disematkan, atau menampilkan konten tersembunyi.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

child-state-based-styling

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

complex-shapes

Klip elemen dan kontennya ke bentuk bebas, seperti simbol, goresan kuas, atau tekstur organik untuk desain yang lebih ekspresif.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

component-specific-light-dark-theme

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

consistent-cross-document-transitions

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, serta HTML yang terlihat untuk tampilan awal halaman pengguna telah diuraikan sebelum transisi berjalan.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

content-based-styling

Buat 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.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

coordinate-global-events

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

cross-document-transitions

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

customize-scrollbar-color-and-thickness

Menyesuaikan warna atau ketebalan scrollbar

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

dark-mode

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

declarative-button-actions

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

declarative-dialog-popover-control

Alihkan visibilitas dialog atau popover dari tombol tanpa menulis JavaScript.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

deliver-optimized-decorative-images

Tampilkan 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.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

design-token-reactivity

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 untuk komponen.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

directional-navigation-transitions

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

dynamic-sibling-animations

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

dynamic-sibling-styling

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

export-html-media-from-canvas

Ambil dan ekspor konten HTML dinamis sebagai gambar atau frame video dari dalam kanvas.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

expose-canvas-content-to-browser-features

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

flicker-free-client-side-ab-testing

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

fluid-scaling

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

format-human-readable-durations

Menampilkan waktu yang telah berlalu atau durasi kepada pengguna dalam format yang mudah dibaca dan dilokalkan, dengan fleksibilitas untuk menampilkan perincian unit yang mendetail (misalnya, "1 jam 30 menit") atau jumlah total unit (misalnya, "90 menit") bergantung pada konteksnya.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

group-element-transitions

Transisikan 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.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

improve-text-layout-and-legibility

Tingkatkan tata letak dan keterbacaan konten teks mandiri pendek, seperti judul yang tidak lebih dari beberapa baris, dengan mengizinkan browser menerapkan jeda baris yang seimbang saat memindahkan teks.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

individual-transform-properties

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

interactive-content-in-3d-scenes

Mengintegrasikan elemen HTML interaktif ke dalam adegan 3D.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

interactive-content-reveal

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

interest-triggered-action-previews

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

interest-triggered-tooltips

Tampilkan tooltip atau informasi tambahan saat pengguna mengarahkan kursor, memfokuskan, atau menekan lama elemen interaktif, tanpa memerlukan klik.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

light-dismiss-a-dialog

Buat dialog modal yang dapat ditutup menggunakan penutupan ringan (yaitu mengklik atau mengetuk di luar dialog)

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

manage-recurring-intervals

Menghitung interval berulang untuk penagihan langganan atau siklus penggajian, menyesuaikan secara otomatis untuk kasus ekstrem seperti transisi akhir bulan (misalnya, menambahkan satu bulan ke 31 Januari) untuk memastikan penghitungan periode yang akurat.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

model-partial-time-concepts

Model konsep tanggal dan waktu yang secara inheren tidak memiliki komponen standar (seperti tahun, hari, atau tanggal tertentu) tanpa menggunakan nilai placeholder arbitrer yang menyebabkan kesalahan perhitungan.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

move-dom-element-without-losing-state

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

overflow-clipping-control

Menyesuaikan batas kliping 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 terperinci atas cara konten dipangkas.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

parallax-scroll-effects

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.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

persistent-app-tours

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

persistent-toast-notifications

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

persistent-top-layer-ui

Memastikan dialog modal, elemen layar penuh, atau popover native tetap terbuka dan aktif secara fungsional saat node DOM dasarnya dipindahkan atau diubah induknya di DOM.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

physics-based-easing

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

platform-controls-dismiss-dialog

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

position-aware-tooltips

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

precise-text-alignment

Dapatkan perataan vertikal yang presisi dengan teks dari font apa pun. Misalnya, padding visual yang sama persis di atas dan di bawah teks, atau menyelaraskan teks dengan sempurna dengan ikon atau gambar yang berdekatan.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

prevent-text-wrapping

Pastikan browser tidak menyisipkan jeda baris ke dalam teks dan akan memungkinkan teks meluap dari penampungnya.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

pull-to-reveal

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

reduce-style-repetition

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 serangkaian parameter input).

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

resilient-context-menus-and-nested-dropdowns

Buat menu, tooltip, dropdown, atau overlay kontekstual yang dapat diakses dan responsif yang harus diikat ke elemen UI tertentu, sehingga menjamin bahwa overlay akan otomatis memosisikan ulang dirinya sendiri (misalnya, membalikkan sumbu) saat bertemu dengan tepi area tampilan, sehingga memastikan overlay tidak pernah terpotong.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

same-document-transitions

Hubungkan elemen yang tetap ada secara visual di berbagai status halaman atau navigasi dalam Aplikasi Halaman Tunggal (SPA) (misalnya, memperluas thumbnail produk menjadi gambar banner besar yang ditampilkan di seluruh layar) dengan mengubah ukuran, posisi, atau properti gaya lainnya secara lancar.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scroll-entry-exit-effects

Buat efek muncul, naik skala, atau efek kompleks lainnya pada elemen saat elemen masuk dan keluar dari scrollport (atau viewport) saat pengguna men-scroll.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scroll-position-aware-elements

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.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scroll-progress-indicator

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scroll-snap-realtime-feedback

Memberikan masukan visual real-time pada elemen UI yang ditautkan saat pengguna men-scroll konten yang disejajarkan dengan fitur paskan, sebelum gestur scroll selesai.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scroll-snap-state-sync

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scroll-target-on-load

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scrollability-affordance-hints

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

scrollytelling

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

search-hidden-content

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

shaped-cutouts

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

shrinking-header-on-scroll

Animasi header tetap atau sampul halaman penuh saat men-scroll dengan lancar untuk mengecil secara dinamis, mendapatkan bayangan, dan mengubah tata letaknya pada jarak scroll yang telah ditentukan sebelumnya.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

size-aware-styling

Buat 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 tindakan yang dapat menampilkan teks bantuan secara bersyarat berdasarkan lebarnya.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

soft-edge-content-fade

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

stabilize-reactive-state

Mengelola batas waktu atau jadwal tugas dalam tampilan berbasis data tanpa efek samping yang tidak terduga dari status yang dapat diubah bersama.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

stack-drill-down

Buat navigasi hierarkis layar penuh yang memungkinkan pengguna melihat detail tampilan bertingkat dan menggeser atau kembali untuk kembali, dengan histori browser tetap disinkronkan.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

style-parent-with-has

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

support-global-calendar-systems

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

swipe-to-remove

Izinkan pengguna melakukan tindakan pada item dalam daftar (hapus, arsipkan, tandai sebagai sudah dibaca, dll.) dengan gestur geser horizontal, sehingga mereka dapat memproses entri dengan cepat tanpa mengetuk kontrol terpisah.

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

visually-stable-font-fallbacks

Tentukan gaya font sehingga teks tetap dapat dibaca dan konsisten secara visual jika ada pertukaran antara font pilihan dan salah satu font pengganti (atau sebaliknya).

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

visually-stable-mixed-fonts

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

visually-texture-content

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

webmcp

agentic-forms

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub

agentic-javascript-tools

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

Fitur yang digunakan:

Lihat kasus penggunaan di GitHub