Gesaan dan konteks
Sebuah alat reka bentuk mesti mengezum kanvasnya sambil mengekalkan bar alat dalam reka letak. Bandingkan CSS zoom dan transform: scale() untuk reka letak, limpahan, koordinat peristiwa (event) dan kebolehcapaian, kemudian jelaskan cara anda menyahpepijat zoom bersarang.
Perkara yang diuji oleh penemu duga
- Membezakan zoom yang mempengaruhi reka letak daripada transformasi yang hanya mempengaruhi pengecatan (paint).
- Mengendalikan bekas tatalan (scroll container), koordinat penunjuk, fokus, zoom pelayar dan zoom bersarang.
- Mengesahkan pilihan dalam senario sebenar dan bukannya memilih daripada tangkapan skrin semata-mata.
Soalan untuk dijelaskan terlebih dahulu
- Adakah sasarannya merupakan kandungan halaman biasa, kanvas boleh diedit, atau pratonton baca sahaja?
- Adakah zoom mesti mengubah ruang reka letak, julat tatalan dan kawasan sasaran sentuhan (hit regions)?
- Adakah ia mesti menyokong navigasi papan kekunci, pembaca skrin, zoom pelayar dan kontras tinggi?
Jawapan 30 saat
Jika zoom mesti mengubah ruang reka letak dan tatalan, saya akan menilai CSS zoom. Jika ia hanyalah perubahan visual dan elemen bersebelahan (siblings) mesti kekal di tempatnya, saya akan mempertimbangkan transform: scale() dan mengendalikan transform origin, ujian capaian (hit testing) serta tatalan secara eksplisit. zoom mempengaruhi reka letak; scale() tidak mencetuskan pengiraan semula reka letak. currentCSSZoom boleh mendedahkan hasil darab efektif bagi nilai CSS zoom yang bersarang, manakala zoom pelayar dan transformasi kekal sebagai ukuran yang berasingan.
Analisis mendalam langkah demi langkah
1. Tentukan semantik zoom
Zoom untuk kebolehbacaan halaman harus menggunakan kawalan pelayar dan sistem dan bukannya menggantikan tetapan pengguna dengan CSS. Editor kanvas memerlukan skala aplikasi dan penukaran eksplisit antara koordinat kanvas dan viewport; jangan gabungkan kedua-dua keadaan tersebut.
2. Fahami kesan reka letak zoom
CSS zoom membesarkan sasaran dan mempengaruhi reka letak halaman, jadi kedudukan elemen bersebelahan, pengiraan saiz dan julat limpahan boleh berubah. Ia sesuai untuk kandungan yang sepatutnya menduduki ruang reka letak yang sepadan, tetapi lebar minimum dan tingkah laku bar tatal perlu diuji.
3. Fahami kesan cat (paint) transform: scale
transform: scale() mengubah pengecatan dan sempadan visual yang diubah suai tanpa melakukan aliran semula (reflow) pada elemen bersebelahan. Ia sesuai untuk pratonton atau reka letak luar yang stabil, tetapi transform-origin dan penukaran antara koordinat visual dan koordinat peristiwa mesti dilakukan secara eksplisit.
4. Pastikan sempadan kod sentiasa jelas
.preview-zoom {
zoom: var(--preview-zoom, 1);
}
.canvas-visual {
transform: scale(var(--canvas-scale, 1));
transform-origin: top left;
}Jangan bertindih kedua-dua nisbah secara tidak sengaja pada satu komponen. Simpan keadaan skala berhampiran pengawal kanvas dan tentukan secara berasingan sama ada bar alat atau kandungan kanvas mewarisinya; zoom pada punca (root) tidak seharusnya mengubah saiz navigasi dan dialog secara tidak dijangka.
5. Kendalikan koordinat, fokus dan tatalan
Gunakan getBoundingClientRect(), koordinat penunjuk dan ofset tatalan untuk menerbitkan transformasi, kemudian sahkan dalam pelayar sasaran. Gelang fokus, pemegang seret (drag handles) dan navigasi papan kekunci mesti kekal kelihatan; penskalaan transformasi visual tidak membesarkan kawasan tatalan bekas secara automatik.
6. Nyahpepijat zoom bersarang
Element.currentCSSZoom melaporkan hasil darab efektif bagi CSS zoom pada elemen dan leluhurnya. Ia membantu log dan alat penyahpepijatan menjelaskan sebab kandungan kelihatan dibesarkan beberapa kali ganda. Ia bukan bacaan gabungan zoom halaman pelayar atau skala transformasi; rekodkan nilai-nilai tersebut secara berasingan.
7. Jalankan pemeriksaan kebolehcapaian dan prestasi
Uji zoom pelayar, keutamaan fon sistem, operasi papan kekunci, susunan pembaca skrin, kontras tinggi dan pergerakan dikurangkan (reduced motion). Perubahan zoom yang besar atau kerap boleh meningkatkan kos reka letak dan pengecatan; kurangkan kadar (throttle) pratonton peluncur dan simpan nilai tepat apabila dilepaskan.
Contoh jawapan
Saya akan menentukan terlebih dahulu sama ada zoom mesti mengubah ruang reka letak. Jika ia mesti mengubah tatalan dan kedudukan elemen bersebelahan, saya akan menilai zoom; jika kanvas sepatutnya membesar secara visual sementara bar alat kekal di tempatnya, saya akan menggunakan transform: scale() dan mengendalikan asalan (origin), tatalan dan koordinat penunjuk. Keadaan kanvas tidak seharusnya mengubah zoom halaman pelayar atau menyebabkan dialog mewarisi nisbah yang tidak disengajakan. Saya akan menggunakan currentCSSZoom untuk menyahpepijat CSS zoom bersarang tetapi merekodkan transformasi dan zoom halaman secara berasingan, kemudian menguji fokus papan kekunci, pembaca skrin, tatalan, DPI, prestasi dan peranti mudah alih.
Kesilapan lazim
- Menganggap
zoomdanscale()hanya mengubah saiz visual. - Mengharapkan penskalaan transformasi memperluaskan reka letak dan julat tatalan secara automatik.
- Meletakkan nisbah kanvas pada punca (root) dan menskalakan bar alat, dialog serta navigasi.
- Mengabaikan penukaran koordinat penunjuk dan keterlihatan fokus selepas penskalaan.
- Menganggap currentCSSZoom sebagai jumlah keseluruhan yang merangkumi transformasi atau zoom halaman pelayar.
Soalan susulan dan jawapan
Bilakah anda harus mengelakkan CSS zoom?
Gunakan kawalan pelayar dan sistem untuk kebolehbacaan pengguna. Apabila matriks pelayar atau kesan sampingan reka letak tidak boleh diterima, gunakan reka letak biasa, container queries atau transformasi koordinat aplikasi.
Bagaimana jika sempadan visual yang ditransformasikan melebihi bekas?
Tentukan pemotongan (clipping) dan tatalan dengan sengaja, ukur sempadan yang diubah suai dan pastikan fokus serta pemegang seret kekal kelihatan. Jangan sembunyikan masalah dengan overflow: hidden semata-mata.
Mengapakah koordinat penunjuk teranjak (offset)?
Koordinat peristiwa biasanya relatif kepada viewport, manakala koordinat kanvas mesti menolak tatalan dan translasi serta membahagi dengan skala aplikasi. Letakkan penukaran dalam satu fungsi yang telah diuji dan tampung pelbagai transform origin yang berbeza.
Bagaimanakah anda mengawal zoom bersarang?
Hadkan skop, pusatkan keadaan skala, log setiap lapisan dan currentCSSZoom, serta halang komponen daripada mendarabkan nisbah tanpa mengetahui keadaan leluhurnya.
Bagaimanakah anda menguji zoom halaman pelayar?
Pada tahap 100%, 125% dan 200%, periksa pengaliran semula (reflow), susunan papan kekunci, pemotongan teks dan tatalan mendatar. Kekalkan zoom halaman dan zoom kanvas aplikasi sebagai dimensi penerimaan yang berasingan.
Bagaimanakah anda mengukur pilihan tersebut dalam temu duga?
Bandingkan pergerakan reka letak, julat tatalan, ralat ujian capaian (hit-test error), keterlihatan fokus, masa bingkai (frame time) dan kependaman input pada peranti sasaran, kemudian pilih sifat yang sepadan dengan semantik produk.