Dua isu menggayakan elemen butiran dan bagaimana menyelesaikannya

Sebelum ini, mewujudkan blok kandungan yang mudah diperkembangkan yang diperlukan JavaScript atau workarounds CSS kompleks. Mengubah HTML juga boleh menjadi rumit. Sekarang, yang<details></details> dan<summary></summary> Unsur -unsur (membentuk "widget pendedahan") memudahkannya dengan ketara. Kami menggunakannya secara meluas di tempat kerja untuk Soalan Lazim, sebagai contoh.

Menangani cabaran gaya biasa

Manakala<details></details> dan<summary></summary> Secara semulajadi menyediakan fungsi berkembang/runtuh, anda mungkin masih memerlukan CSS untuk persembahan yang optimum. Tanpa gaya, dua isu utama timbul:

Isu 1:<summary></summary> Kursor

The<summary></summary> elemen, sementara interaktif, mungkir kepada kursor pemilihan teks dan bukannya penunjuk yang diharapkan.

Isu 2: Unsur blok bersarang di<summary></summary>

Elemen peringkat blok bersarang (seperti tajuk) di dalam<summary></summary> menyebabkan mereka muncul di bawah anak panah, bukan sebaris.

Penyelesaian CSS

Untuk menyelesaikannya, tambahkan gaya ini ke Reset CSS anda:

 Ringkasan Butiran {
  kursor: penunjuk;
}

Butiran Ringkasan> * {
  paparan: sebaris;
}

Mari kita periksa setiap isu dan penyelesaiannya secara terperinci.

Menyesuaikan<summary></summary> Kursor

Kursor harus secara visual mencerminkan interaksi yang dimaksudkan. Kursor teks lalai dihidupkan<summary></summary> Unsur -unsur, sementara secara teknikal betul (teks boleh dipilih), kurang intuitif daripada penunjuk.

Penyelesaiannya mudah:

 Ringkasan Butiran {
  kursor: penunjuk;
}

Banyak laman web yang terkenal, termasuk dokumen web MDN dan GitHub, sudah menggunakan gaya ini untuk widget pendedahan mereka. cursor: text mungkin mencerminkan seleksi teks ringkasan, tetapi penunjuk umumnya lebih baik untuk elemen interaktif. Perhatikan bahawa menukar kursor hanya mempengaruhi penampilan visual; Selectability tetap tidak berubah.

Memaparkan bersarang<summary></summary> Kandungan dalam talian

Untuk Soalan Lazim, saya sering membungkus soalan dalam tajuk (misalnya,<h3></h3> ) dalam<summary></summary> :

<details><summary><h3 id="Adakah-rancangan-anak-saya-akan-dilaksanakan"> Adakah rancangan 504 anak saya akan dilaksanakan?</h3></summary><p> Ya. Sama seperti musim bunga, pengurus kes akan menjangkau pelajar.</p></details>

Ini menawarkan beberapa kelebihan:

• Gaya yang konsisten: Mengekalkan konsistensi visual dengan tajuk lain.
• Keserasian IE/Edgehtml: Menyediakan sandaran untuk pelayar yang lebih tua yang tidak menyokong<details></details> .
• Kebolehcapaian: Navigasi Teknologi Pembantu AIDS (walaupun tafsiran oleh pembaca skrin boleh berbeza -beza, seperti yang dibincangkan di bawah).

Tajuk vs butang

The<summary></summary> Unsur berkelakuan seperti butang (secara tersirat mempunyai role=button ), namun tidak seperti butang, ia membolehkan tajuk bersarang. Ini menimbulkan konflik:

• Headings Aid Navigation.
• Butang biasanya menyentuh semantik dari elemen bersarang.

Keserasian pembaca skrin tidak konsisten di sini. NVDA dan Voiceover mengenali tajuk di dalam<summary></summary> , tetapi rahang tidak. Oleh itu, semasa menggayakan tajuk dalam<summary></summary> mungkin, tafsiran semantik mereka tidak dijamin.

Gaya dalam talian

Untuk mengelakkan anak panah daripada muncul di atas tajuk, gunakan gaya sebaris untuk unsur -unsur yang bersarang terus dalam<summary></summary> :

 Butiran Ringkasan> * {
  paparan: sebaris;
}

Gunakan inline , bukan inline-block , untuk mengelakkan isu pembalut. Sementara menggoda untuk menggunakan display: flex on<summary></summary> , ini menyembunyikan anak panah.

Bonus: Tidak termasuk gaya penjelajah internet

Oleh kerana versi IE dan lebih tua tidak menyokong<details></details> , Elakkan menggunakan gaya tersuai kepada mereka menggunakan pertanyaan ciri:

 @Supports not (-ms-im-align: auto) {
  Ringkasan Butiran {
    kursor: penunjuk;
  }
  Butiran Ringkasan> * {
    paparan: sebaris;
  }
  /* Lain -lain<details> /<summary> Gaya */
}</summary></details>

IE mengabaikan blok ini sepenuhnya. EdgeHTML juga mengabaikannya kerana cek -ms-ime-align . Perhatikan bahawa versi krom dan safari yang sangat lama (dengan bahagian pasaran yang tidak dapat dielakkan) juga kekurangan sokongan pertanyaan ciri. Blok @supports (details) akan menjadi ideal tetapi mempunyai sokongan penyemak imbas yang kurang.

Kesimpulan

Dengan struktur HTML yang betul dan gaya CSS ini, anda boleh menyesuaikan widget pendedahan anda dengan mudah. Ingat bahawa semasa menggayakan<summary></summary> Unsur -unsur adalah mudah, keserasian pembaca skrin untuk tajuk bersarang memerlukan pertimbangan.

Atas ialah kandungan terperinci Dua isu menggayakan elemen butiran dan bagaimana menyelesaikannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!