Pertanyaan dan konteks
Sebuah kartu pemasaran membutuhkan tepi melengkung yang responsif terhadap lebar wadahnya. Desain menyediakan sebuah path, tetapi dekorasi tersebut tidak boleh merusak konten, fokus keyboard, atau tata letak pada browser lama. Jelaskan cara menggunakan shape() dengan clip-path, bandingkan dengan path() dan polygon(), serta berikan rencana progressive enhancement.
Hal yang diuji oleh pewawancara
- Mengetahui bahwa
shape()adalah fungsi basic-shape CSS, bukan string SVG path. - Menangani unit, kalkulasi CSS, ukuran wadah, dan perbedaan dukungan browser.
- Memperlakukan clipping sebagai dekorasi sambil mempertahankan konten semantik, fokus, dan fallback yang dapat dibaca.
Pertanyaan untuk diklarifikasi terlebih dahulu
- Apakah bentuk tersebut murni dekorasi, atau memuat informasi, area klik/interaksi (hit area), atau urutan pembacaan?
- Apakah matriks browser target mengizinkan kapabilitas CSS Shapes Level 2 yang belum tersedia secara luas?
- Saat tidak didukung, apakah bentuk persegi panjang, aproksimasi
polygon(), atau aset gambar dapat diterima?
Jawaban 30 detik
Saya akan menata konten dengan box model normal dan menambahkan clip-path: shape(...) sebagai peningkatan visual. shape() menerima unit dan kalkulasi matematika CSS, yang membantu geometri responsif; path() menggunakan string path SVG, sedangkan polygon() lebih mudah untuk dijadikan fallback tetapi hanya mengaproksimasi lengkungan. Saya akan membatasi peningkatan tersebut dengan @supports atau deteksi fitur, mempertahankan persegi panjang yang mudah dibaca, dan menguji bahwa clipping tidak menyembunyikan fokus, target interaksi, atau konten semantik.
Pembahasan mendalam langkah demi langkah
1. Pisahkan konten dari clipping
Pertahankan heading, teks isi, dan tombol dalam urutan DOM yang normal. clip-path mengubah area yang dirender; ini tidak boleh menyembunyikan konten atau mengubah urutan pembacaan. Tempatkan latar belakang, tepi, dan ilustrasi dalam lapisan dekoratif sementara lapisan konten tetap dapat digulir dan menerima fokus.
2. Mengapa memilih shape()
shape() menggunakan perintah bergaya CSS dan dapat menggabungkan persentase, panjang, dan matematika CSS. Dibandingkan dengan string path() SVG, ini lebih mudah disesuaikan dengan dimensi wadah dan design token. Dibandingkan dengan polygon(), ini dapat mengekspresikan lengkungan dan perintah path yang lebih kaya.
3. Tulis peningkatan yang terisolasi
.card {
background: var(--surface);
overflow: clip;
}
@supports (clip-path: shape(from 0 0, line to 100% 0, close)) {
.card {
clip-path: shape(
from 0 0,
line to 100% 0,
line to 100% 82%,
curve to 0 100% with 52% 88%,
close
);
}
}Perintah dalam blok kode bersifat ilustratif; sintaks produksi harus diperiksa terhadap browser target dan spesifikasi. Aturan dasar menyediakan warna, spasi, dan teks yang dapat digunakan, sehingga peningkatan yang gagal tidak meninggalkan kartu yang kosong.
4. Rancang lapisan fallback
Fallback yang paling aman adalah persegi panjang. Jika polygon() didukung, ia dapat mengaproksimasi tepian tersebut. Jika lengkungan sangat penting, gunakan aset latar belakang yang dikompresi sambil tetap mempertahankan warna CSS dan kontras teks. Jangan jadikan path kompleks yang belum teruji sebagai satu-satunya tata letak.
5. Tangani ukuran responsif dan overflow
Ekspresikan titik-titik penting dengan persentase dan dimensi wadah, lalu uji wadah yang sangat sempit dan lebar, orientasi lanskap, serta zoom tinggi. clip-path dapat membuat area yang dirender lebih kecil tetapi tidak memesan ruang tata letak tambahan; konten tetap memerlukan padding, tinggi minimum, dan strategi pengguliran.
6. Verifikasi batasan aksesibilitas
Clipping tidak mengubah semantik DOM, urutan pembaca layar, atau urutan keyboard, tetapi dapat menutupi ring fokus, pesan kesalahan, atau target penunjuk secara visual. Uji navigasi keyboard, zoom, pembaca layar, dan kontras tinggi; tempatkan gaya fokus pada pembungkus (wrapper) yang tidak terpotong bila diperlukan.
7. Kelola animasi dan performa
Jika bentuk dianimasikan, pastikan bentuk tersebut tidak menimbulkan ketidaknyamanan atau mengaburkan konten dan patuhi prefers-reduced-motion. Perhatikan biaya render pada perangkat spesifikasi rendah dan daftar yang panjang; dekorasi statis lebih disukai daripada proses redraw kompleks yang terus-menerus.
Contoh jawaban model
Saya akan membiarkan kartu menyelesaikan tata letak box-model normal terlebih dahulu, menjaga heading, teks isi, dan tombol tetap semantik, lalu menggunakan clip-path hanya sebagai dekorasi. shape() cocok untuk geometri responsif karena menerima unit dan matematika CSS; path() lebih dekat ke string SVG, sedangkan polygon() adalah aproksimasi yang konservatif. Saya akan mengontrol peningkatan tersebut dengan @supports, mempertahankan persegi panjang atau aproksimasi yang telah diuji saat gagal, dan menguji lebar ekstrem, zoom, fokus keyboard, pembaca layar, kontras tinggi, dan reduced motion. Tepi yang terpotong tidak boleh menutupi ring fokus atau target klik.
Kesalahan umum
- Memperlakukan
shape()sebagai sintaks yang menerima stringpath()SVG secara mentah-mentah. - Hanya menulis gaya peningkatan tanpa menyediakan gaya dasar persegi panjang yang mudah dibaca.
- Membiarkan tepi potongan menutupi tombol, pesan kesalahan, atau indikator fokus.
- Menggunakan geometri piksel tetap untuk setiap lebar wadah dan panjang teks.
- Mengklaim dukungan universal tanpa menentukan matriks target dan deteksi fitur.
Pertanyaan lanjutan dan respons
Mengapa tidak menggunakan satu gambar SVG saja?
Untuk aset merek yang statis, SVG mungkin lebih stabil. Pilih shape() ketika unit CSS, responsivitas wadah, dan token tema diprioritaskan, lalu pertimbangkan faktor dukungan, pemeliharaan, dan performa.
Bagaimana jika @supports lolos tetapi bentuknya salah?
Perlakukan deteksi fitur sebagai validasi sintaks, bukan bukti bahwa setiap perintah path berjalan identik. Gunakan tangkapan layar browser asli dan uji interaksi untuk perintah-perintah penting, dengan menyediakan path fallback yang lebih sederhana.
Bisakah clipping memengaruhi area klik?
Clipping visual dapat memengaruhi perilaku area interaksi yang dirasakan, jadi verifikasilah di browser target. Jaga agar kontrol tetap besar dan terfokus secara terlihat, dan pindahkan lapisan interaksi ke wrapper yang tidak terpotong jika diperlukan.
Bagaimana jika teks harus mengikuti lengkungan?
clip-path hanya memotong suatu area; ini tidak menata teks di sepanjang path. Gunakan teknik tata letak teks terpisah atau ubah struktur konten alih-alih memperlakukan clipping sebagai API tipografi.
Bagaimana cara menguji konten yang dilokalkan?
Uji terjemahan terpanjang, berbagai ketebalan font, campuran bahasa Arab atau CJK, dan zoom pengguna. Bentuk tersebut hanyalah dekorasi, jadi teks bahasa Inggris pendek yang pas secara kebetulan bukanlah bukti yang cukup.
Kapan sebaiknya Anda meninggalkan shape()?
Gunakan polygon(), gradien, SVG, atau persegi panjang ketika dukungan, biaya animasi, atau konsistensi visual tidak dapat memenuhi standar yang ditentukan. Nyatakan batasan/kondisi henti daripada mempertahankan fitur baru dengan segala cara.