Perintah dan konteks
Anda memerlukan carousel kartu produk horizontal dan ingin browser menghasilkan tombol gulir sebelumnya/berikutnya serta penanda posisi. Jelaskan CSS Overflow Module Level 5, fallback untuk browser yang tidak didukung, aksesibilitas, dan kriteria rilis.
CSS Overflow 5 mendefinisikan kontrol ::scroll-button() dan ::scroll-marker yang dihasilkan oleh wadah gulir (scroll container), ditambah scroll-marker-group untuk mengelompokkannya. Dukungan browser masih berkembang, sehingga wawancara ini menguji batasan kemampuan dan peningkatan progresif (progressive enhancement) daripada memperlakukan fitur tersebut sebagai dasar universal.
Apa yang dievaluasi oleh pewawancara
Pewawancara ingin Anda membedakan scroll container, tombol gulir, dan grup penanda; menjelaskan pemilihan sumbu (axis), status nonaktif (disabled), dan perilaku pengguliran; mempertahankan tautan native dan jalur keyboard; menyediakan fallback yang dapat digunakan; serta memvalidasi dengan perangkat nyata dan teknologi asistif alih-alih hanya memeriksa piksel.
Pertanyaan klarifikasi
Konten dan tata letak
Tanyakan apakah ini adalah carousel kartu berhalaman (paged), galeri berkelanjutan, atau daftar tab; berapa banyak item yang muncul per halaman; apakah lebar item tetap; dan apakah pengguliran bebas diizinkan.
Cakupan browser
Konfirmasikan browser target, rentang versi yang didukung, kebijakan JavaScript, dan apakah produk dapat menyembunyikan peningkatan eksperimental pada browser tanpa dukungan.
Interaksi dan aksesibilitas
Konfirmasikan urutan fokus keyboard, pengumuman screen-reader untuk item saat ini, perilaku sentuhan dan roda mouse, preferensi reduced-motion, serta umpan balik saat tombol tidak tersedia.
Jawaban 30 detik
“Saya akan membangun scroll container horizontal normal dengan kartu yang dapat difokuskan sebagai dasar, kemudian mengaktifkan scroll-marker-group dan ::scroll-button() jika CSS Overflow 5 didukung. Tombol memicu pengguliran, tetapi kartu tetap mempertahankan semantik dan jalur keyboardnya sendiri. Saya akan membatasi peningkatan dengan @supports selector(::scroll-button(*)). Browser yang tidak didukung mempertahankan pengguliran native atau kontrol JavaScript kecil, dan pengujian keyboard, screen-reader, sentuhan, serta reduced-motion menjadi gerbang rilis (release gates).”
Solusi langkah demi langkah
Langkah 1: Tetapkan dasar yang dapat digunakan
Mulailah dengan tata letak biasa, overflow-x: auto, kebijakan scroll-snap yang eksplisit, dan gaya fokus yang terlihat. Setiap kartu memiliki judul, tautan, atau tombol, sehingga konten tetap dapat dijangkau tanpa penanda yang dihasilkan.
Langkah 2: Aktifkan kontrol native
Pada browser yang mendukung, tetapkan grup penanda dan gunakan ::scroll-button(left) serta ::scroll-button(right) untuk kontrol sebelumnya dan berikutnya. Spesifikasi mengaitkan tombol-tombol ini dengan scroll container asalnya; ketersediaan mengikuti sisa konten yang dapat digulirkan, sehingga ini bukan elemen semu dekoratif biasa.
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-marker-group: after;
}
.carousel::scroll-button(left),
.carousel::scroll-button(right) {
inline-size: 2.5rem;
block-size: 2.5rem;
}Langkah 3: Deteksi kemampuan
Batasi gaya peningkatan dengan @supports atau deteksi kemampuan selektor. Ketika deteksi gagal, jangan sembunyikan scrollbar, kartu, atau fallback manual. Jika berhasil, pertahankan dimensi yang stabil agar kontrol yang dihasilkan tidak mengubah rentang konten yang terlihat secara tak terduga.
Langkah 4: Pertahankan semantik dan jalur keyboard
Tombol elemen semu yang dihasilkan tidak boleh menjadi satu-satunya jalur operasi. Tentukan pergerakan fokus yang konsisten, tombol Home/End, tombol panah, dan perilaku sentuhan; gulir kartu ke tampilan saat fokus mencapainya. Screen reader harus mengumumkan nama carousel, kartu saat ini, dan tindakannya, bukan hanya “berikutnya”.
Langkah 5: Tangani sumbu dan RTL
Argumen tombol berkaitan dengan sumbu gulir, sehingga left dan right fisik tidak otomatis menjadi awal dan akhir logis. Uji RTL, mode penulisan vertikal, dan mode penulisan lainnya secara terpisah. Utamakan dimensi dan spasi logis, lalu verifikasi arah visual dan keyboard.
Langkah 6: Rancang fallback
Tanpa dukungan, pertahankan pengguliran horizontal native. Jika tombol eksplisit diperlukan, lapisan JavaScript kecil dapat mengamati posisi gulir dan memperbarui disabled, item saat ini, dan status aria. Kedua jalur harus berbagi data dan semantik kartu daripada mempertahankan dua pohon konten.
Langkah 7: Tetapkan kriteria rilis
Uji browser yang mendukung dan tidak mendukung, keyboard, sentuhan, roda mouse, zoom 200%, kontras tinggi, screen reader, dan prefers-reduced-motion. Lacak kartu yang terlihat pada first paint, aktivasi yang tidak disengaja, fokus yang hilang, latensi pengguliran, dan cakupan fallback; tangkapan layar tidak dapat membuktikan bahwa kontrol dapat digunakan.
Jawaban model
Saya akan memperlakukan pengguliran horizontal biasa dan semantik kartu sebagai dasar, lalu melapisi kontrol CSS Overflow 5 di atasnya. Deteksi kemampuan mengaktifkan scroll-marker-group dan ::scroll-button() jika tersedia; di tempat lain pengguliran tetap berfungsi, dengan fallback JavaScript kecil hanya jika kontrol eksplisit merupakan persyaratan. Tombol yang dihasilkan tidak pernah menggantikan tautan, fokus, atau semantik screen-reader. Saya akan menguji RTL, penulisan vertikal, status tidak tersedia, fokus yang terlihat, sentuhan, dan reduced motion, kemudian menggunakan matriks browser dan teknologi asistif nyata untuk memastikan setiap kartu tetap dapat dijangkau.
Kesalahan umum
- Kesalahan: Memperlakukan
::scroll-button()sebagai tombol normal yang tersedia di mana saja. → Mengapa gagal: Dukungan CSS Overflow 5 masih berkembang. → Perbaikan: Deteksi kemampuan dan pertahankan pengguliran native. - Kesalahan: Menyembunyikan scrollbar dan tautan kartu, hanya menyisakan titik-titik penanda. → Mengapa gagal: Pengguna keyboard dan teknologi asistif dapat kehilangan jalur konten. → Perbaikan: Buat semantik kartu berfungsi secara independen; penanda hanyalah navigasi tambahan.
- Kesalahan: Memetakan kiri/kanan fisik secara langsung ke logika RTL. → Mengapa gagal: Arah visual, mode penulisan, dan arah logis dapat berbeda. → Perbaikan: Uji tombol, fokus, dan hasil pengguliran secara terpisah dalam RTL dan penulisan vertikal.
- Kesalahan: Hanya menguji klik. → Mengapa gagal: Kehilangan fokus, overflow saat zoom, dan masalah reduced-motion tetap tidak terlihat. → Perbaikan: Jadikan pemeriksaan keyboard, sentuhan, screen-reader, dan zoom 200% sebagai kriteria rilis.
Pertanyaan lanjutan dan tanggapan
Apa batas antara ::scroll-button() dan tombol biasa?
Tombol ini dihasilkan oleh scroll container dan terikat pada konteks pengguliran, yang menentukan gaya dan ketersediaannya. Tindakan khusus produk, analitik, atau alur konfirmasi mungkin masih memerlukan tombol nyata atau JavaScript.
Mengapa mempertahankan pengguliran native?
Ini adalah jalur yang dapat digunakan saat peningkatan tidak tersedia dan mencakup sentuhan, roda mouse, serta preferensi pengguna. Jika peningkatan gagal, pengguna masih dapat mencapai konten.
Bagaimana Anda menghindari pergeseran tata letak (layout shift) dari kontrol yang dihasilkan?
Sediakan ruang untuk kontrol, gunakan dimensi wadah yang stabil dan spasi logis, serta bandingkan jumlah kartu pada first-paint dan posisi snap di seluruh cabang kemampuan.
Kapan Anda harus menghindari fitur ini?
Gunakan pengguliran biasa dengan kontrol yang matang jika browser target tidak memiliki dukungan, status carousel rumit, atau tim tidak dapat mempertahankan fallback yang andal. Mengurangi JavaScript tidak sebanding dengan mengurangi aksesibilitas.