Jadual kandungan yang sempurna dengan CSS HTML

Butir -butir artikel ini membina jadual kandungan yang mantap dan boleh diakses (TOC) hanya menggunakan HTML dan CSS, usaha yang mengejutkan namun memberi ganjaran. Matlamatnya adalah untuk mewujudkan TOC yang sesuai untuk kedua-dua laman web (dengan pautan yang boleh dilayari) dan media cetak (buku, brosur), mengendalikan tajuk pelbagai peringkat dengan anggun.

Membina jadual kandungan

Struktur asas TOC adalah mudah: setiap entri menghubungkan tajuk seksyen ke nombor halamannya, selalunya dengan "pemimpin" visual (titik, sengkang, dan lain -lain) menghubungkannya. Walaupun mudah dijana dalam pemproses kata, ini tidak dapat dilaksanakan diberikan aliran kerja berasaskan HTML. Penyelesaian ini memerlukan pendekatan yang bersesuaian dengan HTML, memastikan kebolehcapaian dan kesediaan cetak.

Penyelidikan awal mendedahkan penyelesaian yang membantu tetapi tidak lengkap. Julie Blanc's "Membina Jadual Kandungan Dari HTML Anda" dan "Lines Leader TOC Responsif Christoph Grabo" memberikan pandangan yang berharga ke dalam teknik susun atur (float berasaskan vs CSS grid), tetapi tidak sempurna menangani keperluan.

Pemilihan markup optimum

Ketepatan semantik membimbing pilihan markup. Pada mulanya,<table> dan<code><dl></dl> telah dipertimbangkan, mewakili hubungan nombor halaman sebagai pasangan nilai utama. Walau bagaimanapun, ini tidak mencukupi untuk TOCs pelbagai peringkat (bab dan subseksyen). Bersarang<dl></dl> Unsur -unsur tidak mempunyai kejelasan semantik.

Pendekatan yang dipilih memanfaatkan senarai yang diperintahkan (<ol></ol> ) - lebih sesuai daripada senarai yang tidak teratur (<ul></ul> ) untuk sifat berurutan TOC. Hubungan nombor tajuk halaman dikekalkan dengan jelas termasuk "halaman" sebelum nombor halaman dalam setiap item senarai. Tambahan mudah ini menjelaskan konteksnya, walaupun tanpa isyarat visual.

Kerangka HTML asas menggambarkan ini:

<ol role="list">
  <li>
    <a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
      Bab atau Tajuk Subseksyen Page 1
    </a>
    <ol role="list"></ol>
  </li>
</ol>

Menggayakan jadual kandungan

Styling melibatkan beberapa langkah:

1. Mengeluarkan nombor yang dihasilkan secara automatik: Penomboran manual membolehkan unsur-unsur yang tidak bernombor (pengantar, dll) biasa dalam buku.

2. Senarai Gaya: Senarai peringkat atas menggunakan padding: 0 untuk penjajaran dengan perenggan. Senarai bersarang diindentifikasi menggunakan padding-inline-start: 2ch (padding berasaskan aksara untuk kemerdekaan font). Secara kritis, role="list" telah ditambah untuk memelihara semantik senarai dalam pelayar WebKit apabila list-style-type: none yang digunakan.

3. Tajuk dan Halaman Nombor Gaya: Grid CSS disediakan penjajaran unggul, terutamanya untuk tajuk berbilang baris. Dua lajur grid ( grid-template-columns: auto max-content ) Pastikan tajuk berkembang untuk mengisi ruang yang ada, manakala nombor halaman ( text-align: right ) sejajar ke kanan. Teks "halaman" secara visual tersembunyi menggunakan kelas visually-hidden untuk kebolehcapaian.

4. Pelaksanaan pemimpin: leader() fungsi CSS, sementara yang ditentukan, tidak mempunyai sokongan penyemak imbas. Penyelesaian, yang dipinjam dari artikel sebelumnya, menggunakan A ::after pseudo-elemen dengan rentetan titik panjang. Walau bagaimanapun, ini telah diperbaiki untuk kebolehcapaian dengan membungkus titik-titik dalam elemen dengan aria-hidden="true" untuk menghalang pembaca skrin daripada mengumumkan titik-titik.

5. Sentuhan penamat: Item peringkat atas berani ( font-weight: bold ), dan margin ( margin-block-start: 1em ) memisahkan bab dari subseksyen. font-variant-numeric: tabular-nums dan min-width: 2ch Memastikan lebar nombor halaman yang konsisten merentasi digit yang berbeza untuk penjajaran pemimpin yang betul.

CSS yang dihasilkan adalah subseksyen bersarang yang cekap, fleksibel, dan boleh diakses tanpa pengubahsuaian. Penyelesaian ini sama berkesan untuk navigasi web dan output cetak. Kredit diberikan kepada Julie Blanc, Christoph Grabo, dan Sara Soueidan atas sumbangan dan pandangan mereka.

Atas ialah kandungan terperinci Jadual kandungan yang sempurna dengan CSS HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!