Menggayakan HTML dan dengan CSS moden

Ditulis oleh Rob O'Leary✏️

dan Unsur HTML, secara kolektif dirujuk sebagai widget pendedahan, tidak mudah untuk digayakan. Orang sering membuat versi mereka sendiri dengan komponen tersuai kerana batasannya. Walau bagaimanapun, apabila CSS telah berkembang, elemen ini menjadi lebih mudah untuk disesuaikan. Dalam artikel ini, saya akan membincangkan cara anda boleh menyesuaikan penampilan dan tingkah laku widget pendedahan.

Bagaimana dan bekerjasama?

ialah elemen HTML yang mencipta widget pendedahan di mana maklumat tambahan disembunyikan. Widget pendedahan biasanya dibentangkan sebagai penanda segi tiga disertai dengan beberapa teks.

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 unsur. Ini anak pertama. Jika ia ditinggalkan, label lalai disediakan oleh penyemak imbas. Biasanya, ia akan tertera "detail":

Anda juga boleh menyediakan berbilang elemen selepas elemen untuk mewakili maklumat tambahan:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Menggayakan dan

Terdapat beberapa isu kesalingoperasian yang harus dipertimbangkan semasa menggayakan dan elemen. Mari kita tutup perkara asas sebelum kita masuk ke dalam beberapa kes penggunaan biasa.

elemen adalah serupa dengan elemen [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) kerana gaya lalainya termasuk paparan: item senarai. Oleh itu, ia menyokong sifat trengkas [style-list](https://developer.mozilla.org/docs/Web/CSS/list-style) dan sifat longhandnya. Sokongan penyemak imbas untuk sifat gaya senarai agak baik, tetapi Safari masih ketinggalan.

Widget pendedahan mempunyai dua unsur pseudo untuk menggayakan bahagian konstituennya:

1. Unsur pseudo penanda ::: Mewakili penanda segi tiga yang terletak pada permulaan . Kisah penggayaan untuk ini agak rumit. Kami terhad kepada set kecil sifat CSS. Sokongan penyemak imbas bagus untuk ::marker, tetapi Safari tidak menyokong set lengkap sifat pada masa ini. Saya akan membincangkan perkara ini dengan lebih terperinci dalam bahagian "Menggayakan penanda ringkasan" artikel ini
2. Elemen semu ::details-content: Mewakili "maklumat tambahan"
   . Ini adalah tambahan baru-baru ini, jadi sokongan penyemak imbas kini terhad kepada Chrome

Dalam bahagian berikut, saya akan menunjukkan beberapa cara yang lebih baharu dan kurang dikenali untuk menyesuaikan widget pendedahan.

Menghidupkan aksi terbuka dan tutup

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.

Bagaimanakah animasi pendedahan berfungsi?

Pertama, kami menambah saiz interpolate supaya kami boleh beralih kepada ketinggian auto:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">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 id="Additional-info">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 dan .

Adakah terdapat sebarang pertimbangan lain semasa menganimasikan widget pendedahan?

Widget pendedahan mungkin berkembang secara mendatar jika kandungan "maklumat tambahan" lebih luas daripada kandungan. Itu boleh menyebabkan peralihan reka letak yang tidak diingini. Dalam kes itu, anda mungkin mahu menetapkan lebar pada .

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;
}

Melaksanakan kumpulan (akordion eksklusif)

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 elemen. Anda boleh menggayakannya untuk menunjukkan secara visual bahawa mereka tergolong bersama:

/* open state */
details[open]::details-content {
  block-size: auto;
}

Gaya lalai agak mudah:

Setiap menempati barisannya sendiri. Mereka diletakkan berdekatan (tiada margin atau padding) dan dianggap sebagai satu kumpulan kerana jaraknya yang hampir. Jika anda ingin menekankan bahawa mereka dikumpulkan bersama, anda boleh menambah jidar dan memberikan mereka gaya latar belakang yang sama seperti yang ditunjukkan dalam contoh di bawah:

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 . Mempunyai nama yang sama membentuk kumpulan semantik:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">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.

Menggayakan penanda ringkasan

Widget pendedahan biasanya dibentangkan dengan penanda segi tiga kecil di sebelahnya. Dalam bahagian ini, kami akan membincangkan proses menggayakan penanda ini.

Penanda dikaitkan dengan unsur. Penambahan elemen pseudo [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) bermakna kita boleh menggayakan kotak penanda secara terus. Walau bagaimanapun, kami terhad kepada set kecil sifat CSS:

• Semua sifat fon
• warna
• ruang putih
• text-combine-upright, [unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) dan sifat arah
• kandungan
• Semua sifat animasi dan peralihan

Seperti yang dinyatakan sebelum ini, adalah serupa dengan [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li); ia menyokong sifat trengkas gaya senarai dan sifat tangan panjangnya. Walaupun ini mungkin kedengaran agak bodoh, ia akan menjadi lebih mudah untuk memahami pilihan penggayaan dengan beberapa contoh.

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:

• Sokongan Safari pada masa ini terhad untuk menggayakan sifat warna dan saiz fon bagi elemen pseudo penanda ::. Safari menyokong pseudo-element ::-webkit-details-marker bukan standard
• Safari tidak menyokong penggayaan sifat gaya senarai sama sekali. Lihat CanIUse untuk rujukan

Menukar warna dan saiz 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.

Melaraskan jarak penanda

Secara lalai, penanda berada di sisi kandungan teks dan mereka berada dalam kotak sempadan yang sama. Kedudukan gaya senarai ditetapkan ke dalam. Apabila ia adalah keadaan terbuka, "maklumat tambahan" berada betul-betul di bawah penanda. Mungkin anda ingin menukar jarak dan penjajaran ini:

Jika kita menetapkan kedudukan gaya senarai ke luar, penanda terletak di luar kotak sempadan. Ini membolehkan kami melaraskan ruang antara teks ringkasan dan penanda:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">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:

Menukar teks/imej penanda

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. sudah (kebanyakannya) menunjukkan keadaan kembangkan/runtuh. Jadi jika anda menggunakan grafik sebaris, ia harus dianggap sebagai hiasan. Atribut alt kosong melakukan ini:

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">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 , jika anda mahu:

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.

Menggayakan bahagian "maklumat tambahan"

Anda mungkin mahu menggayakan bahagian "maklumat tambahan" widget pendedahan tanpa membocorkan gaya kepada . Oleh kerana anda boleh mempunyai bilangan elemen yang berubah-ubah di dalam , adalah bagus untuk mempunyai peraturan catch-all:

/* 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 elemen menggunakan fungsi :not(). Perlu diingat bahawa ini menyasarkan setiap elemen dan bukannya kandungan sebagai satu bahagian!

/* 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

tidak mempunyai margin. Kelemahan penggunaan ::details-content pseudo-element ialah sokongan penyemak imbas pada masa ini terhad kepada Chrome.

Kesilapan biasa semasa menggayakan widget pendedahan

• Dari segi sejarah, adalah tidak mungkin untuk menukar jenis paparan unsur. Sekatan ini telah dilonggarkan dalam Chrome
• Berhati-hati menukar jenis paparan . Lalai adalah paparan: senarai-item;; jika anda menukarnya kepada paparan: blok;, ia mungkin menyebabkan penanda disembunyikan dalam sesetengah penyemak imbas. Ini adalah isu dalam Firefox:

<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>

• Anda tidak boleh membuat sarang

• Kerana elemen mempunyai peranan ARIA lalai butang, ia menanggalkan semua peranan daripada elemen kanak-kanak. Oleh itu, jika anda ingin mempunyai tajuk seperti

  dalam , teknologi bantuan seperti pembaca skrin tidak akan mengenalinya sebagai tajuk. Cuba elakkan corak ini:
  

  <details>
    <summary>Do you want to know more?</summary>
    <h3 id="Additional-info">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

Adakah terdapat lebih banyak perubahan yang akan datang?

Baru-baru ini, terdapat cadangan besar untuk membantu membuat lebih boleh disesuaikan dan saling beroperasi antara penyemak imbas. Fasa 1 merangkumi beberapa perkara yang saya bincangkan dalam artikel ini:

1. Alih keluar sekatan sifat paparan CSS supaya anda boleh menggunakan jenis paparan lain seperti flex dan grid
2. Nyatakan struktur pokok bayangan dengan lebih jelas. Ini sepatutnya membantu dengan kebolehoperasian dengan Flexbox dan Grid CSS
3. Tambahkan elemen pseudo-kandungan ::details-content untuk menangani slot kedua supaya bekas untuk "maklumat tambahan" dalam
   elemen boleh digayakan

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.

Kesimpulan

Elemen HTML telah menjadi lebih mudah untuk disesuaikan dalam CSS. Anda kini boleh membuat kumpulan eksklusif dengan sokongan penuh penyemak imbas, menghidupkan peralihan keadaan pembukaan/tutup sebagai peningkatan progresif dan melakukan penggayaan mudah penanda.

Tumit Achilles; ialah penggayaan penanda. Berita baiknya ialah terdapat cadangan aktif yang menangani perkara ini dan beberapa titik kesakitan yang lain. Ini sepatutnya mengalih keluar semua batu penghalang apabila menggunakan . Dalam masa terdekat, anda tidak perlu menulis widget pendedahan anda sendiri atau menggunakan komponen web pihak ketiga! ?

---

Adakah bahagian hadapan anda memonopoli CPU pengguna anda?

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 dan dengan CSS moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!