Temu duga frontend: menggunakan interpolate-size secara selamat untuk animasi intrinsic-size

Gesaan dan skop

Panel bantuan atau kad akordion memaparkan tajuk sahaja secara lalai, kemudian mengembang kepada ketinggian yang ditentukan oleh kandungan. Produk mahukan peralihan yang lancar kepada auto, max-content, atau fit-content sambil mengekalkan tingkah laku papan kekunci, pembaca skrin dan penyemak imbas lama. Terangkan cara anda menggunakan interpolate-size atau calc-size() dan cara anda mengesahkan hasilnya.

Ini sesuai untuk temu duga frontend, sistem reka bentuk (design system) dan prestasi. MDN menandakan interpolate-size sebagai ketersediaan terhad dan bukan Baseline; ia memerlukan pilihan masuk (opt-in) yang jelas untuk interpolasi saiz intrinsik dan bukanlah pintasan animasi yang selamat secara universal.

Perkara yang dinilai oleh penemu duga

Sama ada anda memahami sempadan antara nilai panjang (length) dan kata kunci saiz intrinsik.
Sama ada anda tahu bahawa interpolate-size diwarisi dan pilihan masuk secara global mempengaruhi elemen keturunan (descendants).
Sama ada anda membezakan interpolate-size daripada calc-size().
Sama ada penyemak imbas yang tidak disokong mengekalkan keadaan statik yang boleh digunakan dan tingkah laku pergerakan dikurangkan (reduced-motion).
Sama ada anda menguji perubahan kandungan, anjakan susun atur (layout shift), susunan fokus dan prestasi dan bukannya kelancaran visual semata-mata.

Penjelasan untuk ditanya terlebih dahulu

Sahkan:

Penyemak imbas sasaran dan versi minimum yang penting, dan adakah peningkatan progresif (progressive enhancement) boleh diterima?
Adakah ini kawalan pendedahan semantik (semantic disclosure control), dan adakah kandungan mesti kekal ada dalam dokumen dan pepohon kebolehcapaian?
Adakah anda menganimasikan ketinggian, lebar, atau kedua-duanya, dan bolehkah kandungan berubah secara tak segerak (asynchronous) semasa peralihan?
Adakah komponen mesti menyokong pergerakan dikurangkan, interaksi papan kekunci, pemulangan fokus dan pembalikan di pertengahan animasi?

Jika tidak dinyatakan, anggap Chromium, Firefox dan Safari moden dengan tahap sokongan yang berbeza; penyemak imbas lama mesti kekal boleh digunakan tanpa animasi saiz intrinsik yang lancar.

Kerangka jawapan tiga puluh saat

Saya akan membina butang semantik dan kawasan kandungan terlebih dahulu, kemudian menganggap animasi sebagai peningkatan progresif. Dalam penyemak imbas yang disokong, dayakan interpolate-size: allow-keywords pada bekas tempatan dan buat peralihan daripada panjang runtuh (collapsed length) yang eksplisit kepada max-content atau auto; nilaikan calc-size() hanya apabila saiz intrinsik memerlukan pengiraan lanjut. Penyemak imbas yang tidak disokong menggunakan pengembangan statik, ketinggian maksimum terhad, atau togol serta-merta. Keadaan perniagaan tidak boleh bergantung pada penyiapan animasi. Akhir sekali, uji papan kekunci, pembaca skrin, pergerakan dikurangkan, kandungan panjang, pembalikan dan prestasi sebenar.

Perincian langkah demi langkah

1. Menetapkan keadaan semantik

Gunakan butang dengan aria-expanded yang menunjuk ke kawasan kandungan, dan pilih strategi menyembunyikan yang sepadan dengan semantik produk. Animasi hanya mengubah peralihan visual dan susun atur; ia tidak menentukan sama ada kandungan boleh dikendalikan. Jangan sekali-kali membiarkan fokus terperangkap dalam kawasan yang diruntuhkan. Jika fokus kekal di dalam kandungan tersembunyi, kembalikan fokus kepada pencetus atau kawalan yang kelihatan jelas.

2. Memilih mekanisme interpolasi

interpolate-size: allow-keywords mendayakan interpolasi antara panjang atau peratusan dan nilai saiz intrinsik, tetapi ia tidak menganimasikan antara dua kata kunci intrinsik secara langsung. Gunakan calc-size() apabila saiz intrinsik mesti mengambil bahagian dalam pengiraan; calc() biasa tidak boleh mengira auto atau max-content. Mulakan dengan skop tempatan dan bukannya mendayakannya pada punca (root) yang boleh menjejaskan komponen lain yang tidak berkaitan secara tidak dijangka.

3. Menentukan sempadan kandungan dan susun atur

Berikan bekas yang dianimasikan sempadan limpahan (overflow), saiz maksimum dan kedudukan yang eksplisit. Perubahan kandungan tak segerak mengubah saiz sasaran, jadi pilih sama ada untuk menunggu kandungan stabil, mengira semula, atau melompat ke keadaan akhir. Grid bersarang, peletakan mutlak dan bekas tatal boleh menjadikan saiz intrinsik berbeza daripada intuisi; ukur komposisi komponen sebenar.

4. Keserasian dan sandaran (fallback)

Kawal peningkatan di sebalik pengesanan sokongan. Penyemak imbas lama harus menggunakan ketinggian statik, anggaran max-height terhad, atau togol serta-merta. Sandaran mesti mengekalkan kandungan yang boleh dibaca, kawalan yang boleh digunakan, pautan yang boleh difokuskan dan keadaan tertutup yang boleh difahami. Jangan ukur susun atur pada setiap bingkai animasi dalam JavaScript semata-mata untuk menyembunyikan ketiadaan sokongan CSS; ini memperkenalkan susun atur paksa (forced layout) dan lebih banyak laluan keadaan.

5. Keutamaan pergerakan dan interaksi

Di bawah prefers-reduced-motion: reduce, pendekkan atau alih keluar peralihan sambil mengekalkan logik keadaan dan fokus. Tingkah laku Enter, Space, Tab dan Escape harus mengikut kontrak komponen. Jika pengguna mengklik sekali lagi di pertengahan peralihan, balikkan secara semula jadi atau lompat ke sasaran baharu; jangan biarkan animasi serentak bersaing merebut susun atur dan aria-expanded.

6. Metrik pengesahan

Gunakan teks pendek dan panjang, ralat tak segerak dan pembalutan teks setempat. Ukur anjakan susun atur (layout shift), bingkai tercicir, masa gaya dan susun atur, kependaman interaksi, keterlihatan fokus dan output teknologi bantuan. Bandingkan laluan yang disokong dan tidak disokong, termasuk keadaan di mana sifat tersebut diabaikan. Jadual keserasian penyemak imbas bukan jaminan prestasi produk; manfaat mesti diperoleh daripada pengukuran.

Contoh jawapan berkualiti tinggi

Saya akan melaksanakan butang semantik dan kawasan kandungan dengan aria-expanded sebagai sumber keadaan; animasi CSS hanyalah satu peningkatan. Pada penyemak imbas yang disokong, tetapkan interpolate-size: allow-keywords pada bekas panel dan buat peralihan daripada panjang runtuh yang eksplisit kepada max-content atau auto. Jika pengiraan ke atas saiz intrinsik diperlukan, gunakan calc-size(). Saya akan mengelakkan pilihan masuk membuta tuli pada peringkat punca kerana sifat ini diwarisi.

Apabila tidak disokong, panel masih dibuka serta-merta atau menggunakan max-height terhad; kandungan dan fokus tidak bergantung pada animasi selesai. Pergerakan dikurangkan mengalih keluar peralihan tetapi bukan perubahan keadaan. Jika kandungan tak segerak berubah semasa peralihan, saya akan menunggu kestabilan, mengira semula, atau melompat ke keadaan akhir mengikut dasar yang didokumenkan, sambil mengemas kini aria-expanded sekali sahaja.

Pengesahan meliputi kandungan pendek dan panjang, penyetempatan, papan kekunci, pembaca skrin, pemulangan fokus, pembalikan, penyemak imbas lama dan pergerakan dikurangkan. Untuk prestasi, bandingkan gaya, susun atur, kadar bingkai, anjakan susun atur dan kependaman interaksi. Jika laluan yang ditingkatkan menyebabkan kegelisahan (jitter) atau kegagalan keserasian, sempitkan pemilihnya atau lumpuhkannya; percubaan CSS tidak boleh mengurangkan kebolehgunaan asas (baseline usability).

Kesilapan biasa

Menganggap kata kunci saiz intrinsik sebagai titik akhir numerik biasa yang semuanya boleh saling berinterpolasi antara satu sama lain.
Menetapkan interpolate-size pada punca dan mengubah keturunan yang tidak berkaitan secara tidak sengaja.
Menganggap calc-size() sebagai pengganti terus untuk calc() tanpa menerangkan sempadannya.
Menguji penyemak imbas yang disokong sahaja dan mengabaikan kandungan atau fokus apabila sifat tersebut digugurkan.
Menyembunyikan ketinggian sebenar di sebalik max-height yang sangat besar, yang memesongkan kelajuan animasi dan susun atur.
Membaca susun atur dan menulis gaya pada setiap bingkai JavaScript, yang memaksa susun atur segerak (synchronous layout).
Mengabaikan pergerakan dikurangkan, pembalikan papan kekunci dan perubahan kandungan tak segerak.
Menunjukkan demo yang lancar tanpa mengukur CLS, kependaman interaksi, atau keadaan pembaca skrin.

Soalan susulan dan respons

Mengapa anda tidak boleh beralih terus dari sifar ke auto?

Interpolasi tradisional memerlukan titik akhir numerik; auto dan max-content ialah saiz intrinsik. interpolate-size membenarkan interpolasi panjang-ke-intrinsik yang terpilih, tertakluk kepada sokongan penyemak imbas.

Bilakah anda akan menggunakan calc-size?

Gunakan apabila sasaran memerlukan pengiraan berdasarkan saiz intrinsik, seperti menambah jarak atau mengenakan had. Jika anda hanya memerlukan interpolasi panjang-ke-intrinsik, interpolate-size tempatan adalah lebih jelas.

Bagaimana jika kandungan bertambah semasa animasi?

Tentukan dasar: tunggu data yang stabil, kira semula sasaran, atau lompat ke keadaan akhir. Pastikan penatalan, fokus dan aria-expanded kekal konsisten, dan uji interaksi berulang yang pantas.

Apakah yang dilakukan oleh penyemak imbas yang tidak disokong?

Kekalkan pengembangan statik serta-merta atau terhad supaya kandungan, pautan dan laluan papan kekunci kekal lengkap. Kegagalan peningkatan progresif sepatutnya mengurangkan kekemasan visual sahaja, bukan kebolehgunaan perniagaan.

Bagaimanakah anda mengesahkan kebolehcapaian?

Gunakan papan kekunci untuk membuka, menutup, membuka semula dan memindahkan fokus, kemudian semak sama ada teknologi bantuan melaporkan keadaan dan kandungan yang sama. Ulangi dengan pergerakan dikurangkan dan pastikan kandungan tersembunyi tidak mengekalkan fokus yang tidak boleh dicapai.