Wawancara CSS corner-shape: Bagaimana cara meningkatkan sudut geometris secara bertahap (progressive enhancement)?

Prompt dan cakupan

Anda bertanggung jawab atas komponen kartu lintas browser. Browser modern dapat merender bevel, scoop, dan squircle, sedangkan browser lama hanya memahami border-radius. Jelaskan prasyarat untuk corner-shape, fallback-nya, serta rencana penerimaan visual dan interaksinya.

Ini menguji geometri CSS, peningkatan bertahap (progressive enhancement), dan rekayasa komponen. corner-shape memodifikasi sudut yang dihasilkan oleh border-radius yang sudah ada; properti ini tidak berpengaruh ketika radius bernilai nol. Pisahkan antara render (painting), tata letak konten, dan area interaksi penunjuk (pointer hit areas) dalam jawaban Anda.

Apa yang sedang diuji oleh pewawancara

Jawaban yang kuat mempertahankan baseline border-radius yang dapat digunakan dan melapisi peningkatannya di balik kueri fitur (feature query). Jawaban tersebut menjelaskan urutan sudut satu hingga empat nilai, kelengkungan superellipse() positif dan negatif, batasan radius ketika sudut yang berlawanan tumpang tindih, dan efek visual mana saja yang mengikuti bentuk tersebut.

Pewawancara juga ingin Anda menghindari anggapan bahwa bentuk tersebut memotong konten (content clip). MDN mencatat bahwa tata letak konten disusun berdasarkan kotak aslinya dan efek hover tetap dapat berlaku di luar sudut yang terlihat, sehingga visibilitas fokus dan pengujian hit area memerlukan pemeriksaan tersendiri.

Pertanyaan klarifikasi

Tampilan visual apa yang harus dipertahankan oleh browser lama

Jika kartu dengan sudut melengkung sudah cukup, pertahankan border-radius. Jika geometri merek harus cocok secara persis, fallback menggunakan SVG atau pseudo-element akan menambah biaya pemeliharaan dan rendering.

Apakah bentuk tersebut menentukan batas interaksi

Konfirmasikan apakah tautan, tombol, atau target seret harus sesuai dengan garis batas yang terlihat. Bentuk sudut CSS tidak selalu mengubah pengujian hit area konten atau peristiwa (event), sehingga tangkapan layar saja tidak cukup.

Apakah animasi dan RTL diperlukan

Periksa apakah browser target menginterpolasi superellipse() dan menghormati reduced-motion. Utamakan penulisan longhand sudut logis untuk tata letak multibahasa daripada berasumsi bahwa sudut kiri atas fisik adalah awal baris (inline start).

Jawaban 30 detik

“Saya memulai dengan border-radius sebagai baseline dan melapisi corner-shape di dalam @supports. Properti ini mengubah render dari radius yang sudah ada, bukan tata letak konten; browser membatasi radius saat sudut yang berlawanan tumpang tindih, jadi saya menguji ukuran ekstrem. Saya memverifikasi cincin fokus, area interaksi, dan overflow secara terpisah, serta menyediakan fallback fitur dan reduced-motion untuk animasi.”

Solusi langkah demi langkah

Langkah 1: Buat baseline yang dapat terdegradasi dengan baik

Tulis gaya dasar terlebih dahulu agar kartu tetap mempertahankan batas (border), latar belakang, bayangan, dan sudut melengkung tanpa properti baru tersebut. Tambahkan peningkatan di balik kueri fitur:

.card {
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

@supports (corner-shape: scoop) {
  .card {
    corner-shape: scoop notch;
  }
}

Browser yang tidak mendukung akan mengabaikan deklarasi yang tidak dikenal dan mempertahankan baseline. Jangan menempatkan kontras, teks yang dapat dibaca, atau instruksi penting hanya pada lapisan peningkatan.

Langkah 2: Jelaskan pemetaan nilai dan prasyarat

Satu nilai berlaku untuk keempat sudut; dua nilai membentuk pasangan diagonal; tiga nilai menetapkan nilai ketiga ke kanan-bawah; empat nilai memetakan kiri-atas, kanan-atas, kanan-bawah, dan kiri-bawah searah jarum jam. corner-shape bergantung pada border-radius, sehingga radius nol tidak menghasilkan bentuk apa pun.

Nilai angka superellipse() mengontrol kelengkungan, dengan arah positif dan negatif menghasilkan bentuk cembung (convex) dan cekung (concave). Dalam wawancara, sampaikan bahwa nama sintaksis harus diperiksa terhadap output yang dirender di browser target daripada disimpulkan dari label alat desain.

Langkah 3: Tangani tumpang tindih dan batas render

Ketika radius dan bentuk sudut yang berlawanan saling tumpang tindih, browser membatasi radius untuk menghindari tabrakan geometris. Uji kartu sempit, radius persentase ekstrem, dan konten padat agar teks, latar belakang, border, dan bayangan tetap koheren.

Latar belakang, border, outline, box shadow, overflow, dan backdrop filter umumnya mengikuti bentuk sudut. Konten tetap mengikuti model kotak. Jika gambar atau area interaksi benar-benar memerlukan pemotongan, gunakan clip-path terpisah, mask, atau lapisan hit semantik.

Langkah 4: Uji interaksi dan aksesibilitas

Cincin fokus harus tetap terlihat, dan urutan keyboard, status fokus, serta area penunjuk harus cocok di seluruh browser yang didukung maupun yang menggunakan fallback. Untuk kartu yang berfungsi sebagai tautan, area klik berbentuk persegi penuh sering kali lebih mudah digunakan daripada batas yang presisi piksel; dokumentasikan kompromi tersebut dalam pengujian visual.

Langkah 5: Animasikan dan hormati arah logis

Kata kunci dapat diinterpolasi melalui nilai superellipse yang setara, tetapi konfirmasikan dukungan implementasinya. Berikan durasi eksplisit pada hover, fokus, dan perubahan status, serta nonaktifkan atau persingkat di bawah prefers-reduced-motion: reduce. Gunakan penulisan sudut logis pada komponen multibahasa agar mode RTL tidak membalikkan geometri yang diinginkan.

Langkah 6: Bangun matriks kompatibilitas

Cakup Chromium dengan dukungan penuh, browser dengan dukungan parsial atau tanpa dukungan, lebar sempit, teks panjang, gambar, bayangan, fokus keyboard, pengujian sentuh, dan reduced motion. Catat kondisi yang ditingkatkan maupun kondisi fallback, dengan mendokumentasikan apakah deklarasi diterapkan, tata letak berubah, dan target peristiwa tetap konsisten.

Contoh jawaban berkualitas tinggi

Saya akan menjadikan border-radius sebagai baseline produk dan melapisi corner-shape melalui @supports. Browser lama tetap mendapatkan kartu yang dapat digunakan, sedangkan bentuk baru meningkatkan tampilan visual pada browser yang didukung. Saya akan memverifikasi radius bukan nol, menjelaskan pemetaan satu hingga empat nilai, dan menguji kartu sempit serta radius ekstrem untuk batasan tumpang tindih.

Saya tidak akan memperlakukan bentuk sudut sebagai pemotongan konten. Latar belakang, border, dan bayangan biasanya mengikutinya, tetapi tata letak konten dan pengujian area interaksi memerlukan pemeriksaan terpisah; cincin fokus harus tetap terlihat. Animasi diberi percabangan reduced-motion, RTL menggunakan longhand logis, dan matriks kompatibilitas membandingkan perilaku visual, tata letak, keyboard, dan sentuhan daripada hanya mengandalkan satu tangkapan layar browser modern.

Kesalahan umum

• Gejala → Mendeklarasikan corner-shape tanpa border-radius → Penyebab kegagalan → Tidak ada radius efektif berarti tidak ada bentuk → Solusi → Sediakan baseline melengkung terlebih dahulu.
• Gejala → Menggunakan corner-shape sebagai pemotong gambar → Penyebab kegagalan → Konten tetap mengikuti kotak aslinya → Solusi → Gunakan overflow, clip-path, atau mask ketika pemotongan diperlukan.
• Gejala → Mengasumsikan bahwa sudut yang terlihat mengecilkan area klik → Penyebab kegagalan → Peristiwa mungkin masih menargetkan kotak aslinya → Solusi → Uji keyboard, sentuhan, dan target peristiwa secara terpisah.
• Gejala → Hanya menguji satu ukuran lebar → Penyebab kegagalan → Radius yang berlawanan dapat dibatasi dalam wadah yang sempit → Solusi → Sertakan ukuran ekstrem dan teks panjang.
• Gejala → Menampilkan kartu kosong di browser yang tidak didukung → Penyebab kegagalan → Peningkatan dianggap sebagai gaya utama yang esensial → Solusi → Gunakan kueri fitur di atas baseline yang stabil.

Pertanyaan lanjutan dan jawabannya

Pertanyaan lanjutan 1: Apa yang terjadi jika border-radius menggunakan persentase?

Verifikasi hasil komputasi browser target daripada langsung mengubah persentase ke piksel tetap berdasarkan asumsi. Ambil beberapa rasio aspek untuk memeriksa tumpang tindih dan kontinuitas bayangan. Jika bentuk merek harus stabil, gunakan radius yang terkontrol pada lapisan peningkatan sambil mempertahankan fallback dasar.

Pertanyaan lanjutan 2: Bagaimana cara agar cincin fokus mengikuti bentuk sudut?

Pertama-tama pertahankan visibilitas dan kontras, lalu pertimbangkan untuk menyesuaikannya dengan outline atau pseudo-element. Jika suatu teknik memotong cincin fokus, pertahankan cincin persegi daripada mengorbankan umpan balik visual keyboard.

Pertanyaan lanjutan 3: Bagaimana jika corner-shape dan border-shape dideklarasikan bersamaan?

W3C dan MDN menentukan bahwa border-shape membuat border-radius tidak efektif, sedangkan corner-shape bergantung pada border-radius. Perlakukan keduanya sebagai jalur geometri alternatif dan berikan fallback yang jelas untuk jalur yang tidak digunakan daripada berasumsi keduanya akan bertumpuk.

Pertanyaan lanjutan 4: Kapan Anda sebaiknya menghindari properti ini?

Hindari properti ini jika cakupan browser belum mencukupi, bentuk tersebut memengaruhi pemotongan yang diperlukan, atau tim tidak dapat mempertahankan fallback visual. Penggunaan border-radius yang stabil, SVG, atau pseudo-element dapat menjadi pilihan yang lebih baik jika tujuan aksesibilitas dan performa sudah terpenuhi.