Petunjuk dan konteks
Sebuah alat desain harus memperbesar kanvasnya sembari mempertahankan bilah alat tetap pada tata letak. Bandingkan CSS zoom dan transform: scale() untuk tata letak, luapan, koordinat peristiwa (event), dan aksesibilitas, lalu jelaskan bagaimana Anda mendebug zoom bertingkat.
Apa yang diuji oleh pewawancara
- Membedakan zoom yang memengaruhi tata letak dari transformasi yang hanya memengaruhi paint.
- Menangani kontainer scroll, koordinat penunjuk (pointer), fokus, zoom peramban, dan zoom bertingkat.
- Memvalidasi pilihan dalam skenario nyata alih-alih memilih hanya berdasarkan tangkapan layar.
Pertanyaan untuk diklarifikasi terlebih dahulu
- Apakah targetnya adalah konten halaman biasa, kanvas yang dapat diedit, atau pratinjau hanya-baca (read-only)?
- Apakah zoom harus mengubah ruang tata letak, rentang scroll, dan area target klik (hit regions)?
- Apakah ini harus mendukung navigasi keyboard, pembaca layar (screen reader), zoom peramban, dan kontras tinggi?
Jawaban 30 detik
Jika zoom harus mengubah ruang tata letak dan scroll, saya akan mengevaluasi CSS zoom. Jika itu hanya perubahan visual dan elemen saudara (sibling) harus tetap di tempatnya, saya akan mempertimbangkan transform: scale() dan menangani transform origin, hit testing, serta scrolling secara eksplisit. zoom memengaruhi tata letak; scale() tidak memicu perhitungan ulang tata letak. currentCSSZoom dapat menampilkan hasil kali efektif dari nilai CSS zoom yang bertingkat, sementara zoom peramban dan transformasi tetap menjadi pengukuran yang terpisah.
Pembahasan mendalam langkah demi langkah
1. Tentukan semantik zoom
Zoom untuk keterbacaan halaman harus menggunakan kontrol peramban dan sistem alih-alih mengganti pengaturan pengguna dengan CSS. Editor kanvas memerlukan skala aplikasi dan konversi eksplisit antara koordinat kanvas dan viewport; jangan menggabungkan kedua status tersebut.
2. Pahami efek tata letak dari zoom
CSS zoom memperbesar target dan memengaruhi tata letak halaman, sehingga posisi sibling, perhitungan ukuran, dan rentang luapan dapat berubah. Ini cocok untuk konten yang seharusnya menempati ruang tata letak yang sesuai, tetapi lebar minimum dan perilaku bilah gulir (scrollbar) perlu diuji.
3. Pahami efek paint dari transform: scale
transform: scale() mengubah paint dan batas visual yang ditransformasikan tanpa me-reflow sibling. Ini cocok untuk pratinjau atau tata letak luar yang stabil, tetapi transform-origin serta konversi antara koordinat visual dan koordinat event harus dibuat eksplisit.
4. Jaga batasan kode tetap jelas
.preview-zoom {
zoom: var(--preview-zoom, 1);
}
.canvas-visual {
transform: scale(var(--canvas-scale, 1));
transform-origin: top left;
}Jangan menumpuk kedua rasio secara tidak sengaja pada satu komponen. Pertahankan status skala di dekat pengontrol kanvas dan putuskan secara terpisah apakah bilah alat atau konten kanvas mewarisinya; zoom pada root tidak boleh mengubah ukuran navigasi dan dialog secara tidak terduga.
5. Tangani koordinat, fokus, dan scroll
Gunakan getBoundingClientRect(), koordinat penunjuk, dan offset scroll untuk mendapatkan transformasi, lalu verifikasi di peramban target. Cincin fokus, handle penyeretan (drag handles), dan navigasi keyboard harus tetap terlihat; penskalaan transformasi visual tidak secara otomatis memperbesar area scroll kontainer.
6. Debug zoom bertingkat
Element.currentCSSZoom melaporkan hasil kali efektif dari CSS zoom pada elemen dan leluhurnya. Ini membantu log dan alat debugging menjelaskan mengapa konten tampak diperbesar beberapa kali. Ini bukan pembacaan gabungan dari zoom halaman peramban atau skala transformasi; catat hal-hal tersebut secara terpisah.
7. Jalankan pemeriksaan aksesibilitas dan performa
Uji zoom peramban, preferensi font sistem, pengoperasian keyboard, urutan pembaca layar, kontras tinggi, dan reduced motion. Perubahan zoom yang besar atau sering dapat meningkatkan biaya tata letak dan paint; lakukan throttle pada pratinjau slider dan simpan nilai presisi saat dilepas.
Contoh jawaban model
Pertama, saya akan memutuskan apakah zoom harus mengubah ruang tata letak. Jika harus mengubah scrolling dan posisi sibling, saya akan mengevaluasi zoom; jika kanvas harus membesar secara visual sementara bilah alat tetap di tempatnya, saya akan menggunakan transform: scale() dan menangani titik asal (origin), scrolling, dan koordinat penunjuk. Status kanvas tidak boleh mengubah zoom halaman peramban atau membuat dialog mewarisi rasio yang tidak disengaja. Saya akan menggunakan currentCSSZoom untuk mendebug CSS zoom bertingkat tetapi mencatat transformasi dan zoom halaman secara terpisah, lalu menguji fokus keyboard, pembaca layar, scrolling, DPI, performa, dan perangkat seluler.
Kesalahan umum
- Menganggap
zoomdanscale()hanya mengubah ukuran visual. - Berharap penskalaan transformasi memperluas tata letak dan rentang scroll secara otomatis.
- Menempatkan rasio kanvas pada root dan menskalakan bilah alat, dialog, serta navigasi.
- Mengabaikan konversi koordinat penunjuk dan visibilitas fokus setelah penskalaan.
- Memperlakukan currentCSSZoom sebagai total yang mencakup transformasi atau zoom halaman peramban.
Pertanyaan lanjutan dan tanggapan
Kapan Anda harus menghindari CSS zoom?
Gunakan kontrol peramban dan sistem untuk keterbacaan pengguna. Ketika matriks peramban atau efek samping tata letak tidak dapat diterima, gunakan tata letak normal, container queries, atau transformasi koordinat aplikasi.
Bagaimana jika batas visual yang ditransformasikan melebihi kontainer?
Tentukan pemotongan (clipping) dan scrolling secara sengaja, ukur batas yang ditransformasikan, dan jaga agar fokus serta handle penyeretan tetap terlihat. Jangan menyembunyikan masalah hanya dengan overflow: hidden.
Mengapa koordinat penunjuk mengalami pergeseran (offset)?
Koordinat event biasanya relatif terhadap viewport, sedangkan koordinat kanvas harus mengurangkan scroll dan translasi lalu membaginya dengan skala aplikasi. Tempatkan konversi dalam satu fungsi yang teruji dan tangani berbagai variasi transform origin.
Bagaimana cara mengontrol zoom bertingkat?
Batasi cakupan, sentralisasi status skala, catat setiap layer dan currentCSSZoom, dan cegah komponen mengalikan rasio tanpa mengetahui status leluhurnya.
Bagaimana cara menguji zoom halaman peramban?
Pada 100%, 125%, dan 200%, periksa reflow, urutan keyboard, teks yang terpotong, dan scrolling horizontal. Pertahankan zoom halaman dan zoom kanvas aplikasi sebagai dimensi penerimaan yang terpisah.
Bagaimana Anda mengukur pilihan tersebut dalam wawancara?
Bandingkan pergerakan tata letak, rentang scroll, kesalahan hit-test, visibilitas fokus, waktu frame (frame time), dan latensi input pada perangkat target, lalu pilih properti yang sesuai dengan semantik produk.