HTML CSS的完美目錄

本文詳細介紹了僅使用HTML和CSS建立強大而可訪問的目錄（TOC），這是一項令人驚訝挑戰但又有意義的努力。目的是創建一個適用於網頁（帶有可通航鏈接）和印刷媒體（書籍，小冊子）的TOC，優雅地處理多層標題。

構建目錄

TOC的基本結構很簡單：每個條目將一個截面標題鏈接到其頁碼，通常將視覺“領導者”（點，破折號等）連接起來。鑑於基於HTML的工作流程，雖然很容易在文字處理器中生成，但這並不可行。該解決方案需要一種自動化的HTML兼容方法，以確保可訪問性和打印準備。

最初的研究揭示了有用但不完整的解決方案。朱莉·布蘭克（Julie Blanc）的“從您的HTML中建立了目錄”和Christoph Grabo的“帶有CSS的響應式TOC領導者”提供了對佈局技術的寶貴見解（基於Float的VS. CSS Grid），但都沒有完美地滿足要求。

最佳標記選擇

語義正確性指導標記選擇。最初，<table>和<code><dl></dl>被考慮，代表標題頁數字作為鍵值對。但是，事實證明，這些不足以用於多級TOC（章節和小節）。嵌套<dl></dl>元素缺乏語義清晰度。

選定的方法利用有序列表（<ol></ol> ） - 比無序列表更合適（<ul></ul> ）對於TOC的順序性質。標題頁數關係是通過明確維護的，包括每個列表項目中的頁碼之前的“頁面”。即使沒有視覺提示，這種簡單的添加也闡明了上下文。

基本的HTML骨架說明了以下內容：

<ol role="list">
  <li>
    <a href="https://www.php.cn/link/8f646834ef1adefaef52d74d5ea8329d">
      章節或小節標題第1頁
    </a>
    <ol role="list"></ol>
  </li>
</ol>

造型目錄

樣式涉及幾個步驟：

1. 刪除自動生成的數字：手動編號允許書籍中常見的未編號元素（前言等）。

2. 列表樣式：頂級列表使用padding: 0用於與段落對齊。嵌套列表使用padding-inline-start: 2ch （基於字體獨立性的基於字符寬度的填充）。至關重要的是，在list-style-type: none使用時，添加了role="list"以保留webkit瀏覽器中的列表語義。

3. 標題和頁碼樣式： CSS網格提供了較高的對齊方式，尤其是對於多行標題。網格的兩列（ grid-template-columns: auto max-content ）確保標題擴展以填充可用的空間，而頁碼（ text-align: right ）則在右側對齊。 “頁面”文本在視覺上使用可訪問性的visually-hidden隱藏。

4. 領導者實施： leader() CSS功能雖然指定，但缺乏瀏覽器支持。從以前的文章中藉來的解決方案利用了一個::after帶有一串長點的偽元素。但是，通過將dot在元素中包裹在aria-hidden="true"中，以防止屏幕讀取器宣佈點，從而改善了可訪問性。

5. 完成觸摸：頂級項目是粗體的（ font-weight: bold ），邊距（ margin-block-start: 1em ）將章節與小節分開。 font-variant-numeric: tabular-nums和min-width: 2ch確保在不同數字上的頁數寬度一致，以使其適當的領導者對齊。

所得的CSS是有效，靈活且可訪問的，可容納的嵌套小節，而無需修改。該解決方案對於Web導航和打印輸出同樣有效。朱莉·布蘭克（Julie Blanc），克里斯托夫·格拉伯（Christoph Grabo）和薩拉·索伊丹（Sara Soueidan）的貢獻和見解表示感謝。

以上是HTML CSS的完美目錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！