Ditulis oleh Rob O'Leary✏️
Apabila pengguna mengklik pada widget atau memfokus padanya dan menekan bar ruang, ia membuka dan mendedahkan maklumat tambahan. Penanda segi tiga menunjuk ke bawah untuk menunjukkan bahawa ia berada dalam keadaan terbuka:
Widget pendedahan mempunyai label yang sentiasa ditunjukkan dan disediakan oleh
Anda juga boleh menyediakan berbilang elemen selepas
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Terdapat beberapa isu kesalingoperasian yang harus dipertimbangkan semasa menggayakan
Widget pendedahan mempunyai dua unsur pseudo untuk menggayakan bahagian konstituennya:
Dalam bahagian berikut, saya akan menunjukkan beberapa cara yang lebih baharu dan kurang dikenali untuk menyesuaikan widget pendedahan.
Apabila anda membuka widget pendedahan, widget itu akan terbuka serta-merta. Kejap, dan anda akan merinduinya!
Adalah lebih baik untuk beralih dari satu keadaan ke keadaan lain dengan cara yang lebih beransur-ansur untuk menunjukkan kepada pengguna kesan tindakan mereka. Bolehkah kita menambah animasi peralihan pada tindakan pembukaan dan penutupan widget pendedahan? Pendek kata, ya!
Untuk menganimasikan ini, kami mahu ketinggian kandungan tersembunyi beralih daripada sifar kepada ketinggian terakhirnya. Nilai lalai bagi sifat ketinggian ialah auto, yang menyerahkannya kepada penyemak imbas untuk mengira ketinggian berdasarkan kandungan. Menganimasikan kepada nilai auto tidak boleh dilakukan dalam CSS sehingga penambahan sifat [interpolate-size](https://nerdy.dev/interpolate-size). Walaupun sokongan penyemak imbas agak terhad untuk ciri CSS yang lebih baharu yang perlu kami gunakan — terutamanya interpolate-size dan ::details-content — ini adalah contoh hebat peningkatan progresif. Pada masa ini ia akan berfungsi dalam Chrome!
Berikut ialah contoh CodePen bagi animasi.
Pertama, kami menambah saiz interpolate supaya kami boleh beralih kepada ketinggian auto:
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Seterusnya, kami ingin menerangkan gaya tertutup. Kami mahu kandungan "maklumat tambahan" mempunyai ketinggian sifar dan memastikan tiada kandungan kelihatan, iaitu, kami mahu mengelakkan limpahan.
Kami menggunakan ::details-content pseudo-element untuk menyasarkan kandungan tersembunyi. Saya menggunakan sifat saiz blok dan bukannya ketinggian kerana ia adalah tabiat yang baik untuk menggunakan sifat logik. Kami perlu memasukkan keterlihatan kandungan dalam peralihan kerana penyemak imbas menetapkan keterlihatan kandungan: tersembunyi pada kandungan apabila ia berada dalam keadaan tertutup — animasi penutup tidak akan berfungsi tanpa memasukkannya:
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Animasi masih tidak akan berfungsi seperti yang diharapkan kerana sifat keterlihatan kandungan ialah sifat animasi diskret. Ini bermakna tiada interpolasi; penyemak imbas akan menyelak antara dua nilai supaya kandungan yang dialihkan ditunjukkan untuk keseluruhan tempoh animasi. Kami tidak mahu ini.
Jika kami memasukkan gelagat peralihan: benarkan diskret;, nilai bertukar pada penghujung animasi, jadi kami mendapat peralihan beransur-ansur kami.
Selain itu, kami mendapat limpahan kandungan dengan menetapkan saiz blok kepada 0 apabila widget pendedahan berada dalam keadaan pertengahan. Kami menunjukkan kebanyakan kandungan semasa ia dibuka. Untuk mengelakkan perkara ini berlaku, kami menambah limpahan: tersembunyi.
Akhir sekali, kami menambah gaya untuk keadaan terbuka. Kami mahu keadaan akhir mempunyai saiz auto:
details {
interpolate-size: allow-keywords;
}
Itulah sebatan yang luas. Jika anda lebih suka penjelasan video yang lebih terperinci, lihat panduan Kevin Powell untuk cara menghidupkan
Widget pendedahan mungkin berkembang secara mendatar jika kandungan "maklumat tambahan" lebih luas daripada
Seperti mana-mana animasi, anda harus mempertimbangkan pengguna yang sensitif terhadap gerakan. Anda boleh menggunakan pertanyaan media pilihan-dikurangkan-gerakan untuk memenuhi senario itu:
/* closed state */
details::details-content {
block-size: 0;
transition: content-visibility, block-size;
transition-duration: 750ms;
transition-behavior: allow-discrete;
overflow: hidden;
}
Corak UI biasa ialah komponen akordion. Ia terdiri daripada timbunan widget pendedahan yang boleh dikembangkan untuk mendedahkan kandungannya. Untuk melaksanakan corak ini, anda hanya memerlukan berbilang
/* open state */
details[open]::details-content {
block-size: auto;
}
Gaya lalai agak mudah:
Setiap
Variasi corak ini adalah untuk menjadikan akordion eksklusif supaya hanya satu daripada widget pendedahan boleh dibuka pada satu-satu masa. Sebaik sahaja satu dibuka, penyemak imbas akan menutup yang lain. Anda boleh membuat kumpulan eksklusif melalui atribut nama
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Sebelum menggunakan akordion eksklusif, pertimbangkan sama ada ia membantu pengguna. Jika pengguna berkemungkinan mahu menggunakan lebih banyak maklumat, ini memerlukan mereka untuk membuka item dengan kerap, yang boleh mengecewakan.
Ciri ini kini disokong dalam semua penyemak imbas moden supaya anda boleh menggunakannya dengan segera.
Widget pendedahan biasanya dibentangkan dengan penanda segi tiga kecil di sebelahnya. Dalam bahagian ini, kami akan membincangkan proses menggayakan penanda ini.
Penanda dikaitkan dengan
Seperti yang dinyatakan sebelum ini,
Sebelum beralih ke contoh, kata ringkas tentang sokongan penyemak imbas. Pada masa penulisan, Safari ialah satu-satunya penyemak imbas utama yang tidak menyokong sepenuhnya penggayaan penanda:
Katakan kami mahu menukar warna penanda segi tiga kepada merah dan menjadikannya 50% lebih besar. Kita boleh melakukan perkara berikut:
details {
interpolate-size: allow-keywords;
}
Ini sepatutnya berfungsi merentas semua penyemak imbas. Berikut ialah contoh CodePen.
Secara lalai, penanda berada di sisi kandungan teks
Jika kita menetapkan kedudukan gaya senarai ke luar, penanda terletak di luar
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Anda boleh melihat ini dalam contoh kedua dalam tangkapan skrin di atas.
Berikut ialah CodePen bagi contoh ini:
Jika anda ingin menukar kandungan penanda, anda boleh menggunakan sifat kandungan unsur pseudo penanda ::. Berdasarkan pilihan anda, anda boleh menetapkannya kepada teks. Untuk contoh saya, saya menggunakan emoji mulut zip untuk keadaan tertutup dan emoji mulut terbuka untuk keadaan terbuka:
details {
interpolate-size: allow-keywords;
}
Untuk menggunakan imej bagi penanda, anda boleh menggunakan sifat kandungan unsur pseudo-penanda :: atau sifat imej gaya senarai bagi
/* closed state */
details::details-content {
block-size: 0;
transition: content-visibility, block-size;
transition-duration: 750ms;
transition-behavior: allow-discrete;
overflow: hidden;
}
Dalam contoh berikut, kami menggunakan dua ikon anak panah daripada Simbol Bahan untuk penanda. Anak panah yang menghadap ke kanan adalah untuk keadaan tertutup dan anak panah yang menghadap ke bawah adalah untuk keadaan terbuka:
Contoh ini akan berfungsi seperti yang diharapkan dalam Chrome dan Firefox, tetapi Safari akan mengabaikan gaya tersebut. Anda boleh mendekati ini sebagai peningkatan progresif dan memanggilnya sehari. Tetapi jika anda mahukan penampilan yang sama pada semua penyemak imbas, anda boleh menyembunyikan penanda dan kemudian menambah imej anda sendiri sebagai stand-in. Ini memberi anda lebih kebebasan:
/* open state */
details[open]::details-content {
block-size: auto;
}
Anda boleh menunjukkan keadaan secara visual menggunakan ikon penanda baharu, seperti imej sebaris atau melalui elemen pseudo.
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Anda juga boleh memilih untuk meletakkan penanda pada penghujung
details {
interpolate-size: allow-keywords;
}
Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa menyembunyikan penanda menyebabkan masalah kebolehaksesan dengan pembaca skrin. Firefox, VoiceOver, JAWS dan NVDA semuanya menghadapi masalah dengan mengumumkan secara konsisten keadaan togol bagi widget pendedahan jika penanda dialih keluar. Malangnya, gaya itu terikat dengan negeri. Adalah lebih baik untuk mengelak daripada melakukan ini.
Anda mungkin mahu menggayakan bahagian "maklumat tambahan" widget pendedahan tanpa membocorkan gaya kepada
/* closed state */
details::details-content {
block-size: 0;
transition: content-visibility, block-size;
transition-duration: 750ms;
transition-behavior: allow-discrete;
overflow: hidden;
}
Tujuan saya ialah mengecualikan
/* open state */
details[open]::details-content {
block-size: auto;
}
Sebagai alternatif, anda boleh menggunakan ::details-content pseudo-element, yang menyasarkan keseluruhan bahagian. Inilah sebabnya anda ingin menggunakan ini untuk menghidupkan peralihan keadaan pembukaan dan penutupan:
>@media (prefers-reduced-motion) {
/* styles to apply if a user's device settings are set to reduced motion */
details::details-content {
transition-duration: 0.8s; /* slower speed */
}
}
Perhatikan perbezaannya? Hanya terdapat satu margin pada permulaan bahagian. Yang
dan
<details>
<summary>Payment Options</summary>
<p>...</p>
</details>
<details>
<summary>Personalise your PIN</summary>
<p>...</p>
</details>
<details>
<summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
<p>...</p>
</details>
Kerana dalam
<details> <summary>Do you want to know more?</summary> <h3>Additional info</h3> <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p> </details>
Menyembunyikan penanda menyebabkan masalah kebolehaksesan dengan sesetengah pembaca skrin. Firefox, VoiceOver, JAWS dan NVDA semuanya menghadapi masalah dengan mengumumkan secara konsisten keadaan togol bagi widget pendedahan jika penanda dialih keluar
Baru-baru ini, terdapat cadangan besar untuk membantu membuat
Berita menarik ialah item 1 dan 3 dalam senarai di atas telah dihantar dalam Chrome 131 (sehingga November 2024). Fasa seterusnya hendaklah menangani penambahbaikan penggayaan penanda. Selain itu, terdapat satu set perubahan berkaitan yang akan membantu meningkatkan keupayaan untuk menghidupkan elemen ini.
Tumit
Memandangkan bahagian hadapan web semakin kompleks, ciri rakus sumber menuntut lebih banyak lagi daripada penyemak imbas. Jika anda berminat untuk memantau dan menjejaki penggunaan CPU pihak pelanggan, penggunaan memori dan banyak lagi untuk semua pengguna anda dalam pengeluaran, cuba LogRocket.
LogRocket adalah seperti DVR untuk apl web dan mudah alih, merakam semua yang berlaku dalam apl web, apl mudah alih atau tapak web anda. Daripada meneka sebab masalah berlaku, anda boleh mengagregat dan melaporkan metrik prestasi bahagian hadapan utama, memainkan semula sesi pengguna bersama-sama dengan keadaan aplikasi, log permintaan rangkaian dan secara automatik memaparkan semua ralat.
Modenkan cara anda menyahpepijat web dan apl mudah alih — mula memantau secara percuma.
Atas ialah kandungan terperinci Menggayakan HTML dengan CSS moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
