瞭解一些實用且有創意的清單樣式。
一提到清單，你會想到什麼？最顯而易見的例子就是購物清單，也就是最簡單的清單，也就是一組沒有特定順序的項目。不過，我們在網路上會以各種方式使用清單。某場地點即將舉辦的演唱會集合？很可能是清單。需要完成多個步驟的預訂程序嗎？很可能是清單。圖片庫？這也算是附帶說明文字的圖片清單。
本文將深入探討網站上可用的不同 HTML 清單類型，以及使用這些清單的時間點，包括您可能不熟悉的部分屬性。我們也會介紹一些實用且有創意的方式，讓您使用 CSS 設定樣式。
使用名單的時機
當項目需要以語意方式分組時，應使用 HTML 清單元素。輔助技術 (例如螢幕閱讀器) 會通知使用者有清單，以及清單中的項目數量。比如說，在購物網站排列產品組合時，只要知道這項資訊就能派上用場。因此，使用清單元素或許是不錯的選擇。
列出類型
標記標記時，我們提供三種不同的清單元素：
- 未排序的清單
- 已排序的清單
- 說明清單
請根據用途選擇適當的做法。
未排序的清單 (ul)
當清單中的項目不按任何特定順序排列時，無序清單元素 (<ul>) 最實用。系統預設會以項目符號清單的形式呈現清單內容。例如購物清單，其中的項目順序不拘。
網頁上更常見的例子是導覽選單。建立選單時，最佳做法是將 ul 納入 nav 元素中，並利用標籤識別選單，以利輔助技術。我們也應使用 aria-current 屬性來識別選單中目前的頁面：
<nav aria-label="Main">
<ul>
<li>
<a href="/page-1" aria-current="page">Menu item 1</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
<li>
<a href="/page-2">Menu item 2</a>
</li>
…
</ul>
</nav>
這篇文章將說明一些建議，確保所有使用者都能存取導覽選單。
已排序的清單 (ol)
如果項目的順序很重要，例如多步驟程序，有序清單元素 (<ol>) 就是最佳選擇。根據預設，清單項目會加上編號。舉例來說，您可以提供一組操作說明，要求使用者依序完成步驟。
<ol> 和 <ul> 元素都只能包含 <li> 元素做為直接子項。
說明清單 (dl)
說明清單包含術語 (<dt> 元素) 和說明 (<dd>)，每個術語可搭配多個說明。可能的用途包括術語字典，或是餐廳菜單。根據預設，說明清單不會顯示任何標記，但瀏覽器傾向於縮排 <dd> 元素。
在 HTML 中，您可以使用 <div> 將字詞和相關的說明分組，這在設定樣式時非常實用，我們稍後會介紹。
<!-- This is valid -->
<dl>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</dl>
<!-- This is also valid -->
<dl>
<div>
<dt>Term 1</dt>
<dd>This is the first description of the first term in the list</dd>
<dd>This is the second description of the first term in the list</dd>
</div>
<div>
<dt>Term 2</dt>
<dd>This is the description of the second term in the list</dd>
</div>
</dl>
簡易清單樣式
清單最簡單的用途之一，就是在內文區塊中使用。這些簡單的清單通常不需要複雜的樣式，但我們可能希望在某種程度上自訂排序或未排序清單的標記，例如使用品牌顏色，或利用自訂圖片設定項目符號。我們可以利用 list-style 和 ::marker 虛擬元素進行許多工作！
::marker
除了為清單標記提供一些基本樣式，我們還可以建立循環圖示。以下使用三個不同的圖片網址做為 ::marker 虛擬元素的 content 值，進一步增添購物清單範例的手寫風格 (相對於所有圖片都使用單一圖片)：
::marker {
content: url("/marker-1.svg") ' ';
}
li:nth-child(3n)::marker {
content: url("/marker-2.svg") ' ';
}
li:nth-child(3n - 1)::marker {
content: url("/marker-3.svg") ' ';
}
自訂計數器
對於某些有順序的清單，我們可能會使用計數器值，但會在其後附加其他值。我們可以使用 list-item 計數器做為標記 content 屬性的值，並附加任何其他內容：
::marker {
content: counter(list-item) '🐈 ';
}
我們的計數器會自動依一個遞增單位，但可以選擇在清單項目上設定 counter-increment 屬性，以不同的值遞增計數器。舉例來說，這會讓計數器每次遞增 3：
li {
counter-increment: list-item 3;
}
我們可以深入探討更多有關計數器的內容。「CSS 清單、標記和計數器」一文詳細說明瞭一些可能的用途。
::標記樣式的限制
有時候，我們希望進一步控制標記的位置和樣式。舉例來說，您無法使用彈性容器或格線來定位標記，這在需要其他對齊方式時，可能會造成不便。::marker 會公開數量有限的 CSS 屬性，用於設定樣式。如果設計需要除了基本樣式設定之外，使用其他虛擬元素可能會更好。
為不像清單的清單設定樣式
有時，我們可能會希望以與預設樣式完全不同的方式為清單設定樣式。導覽選單通常就是這種情況，因為我們通常會移除所有標記，並使用彈性容器將清單水平顯示。常見做法是將 list-style 屬性設為 none。這表示標記符號偽元素將無法再在 DOM 中存取。
使用 ::before 的自訂標記
在 ::marker 推出之前，為 ::before 擬元素設定樣式是建立自訂清單標記的常見方式。不過，即使現在也是如此，我們仍可在需要時，為視覺上複雜的清單樣式提供更多彈性。
和 ::marker 一樣，我們可以使用 content 屬性新增自訂的項目符號樣式。與使用 ::marker 不同的是，我們需要手動調整位置，因為我們無法獲得 list-style-position 提供的自動優勢。不過，我們可以使用彈性容器來輕鬆調整位置，彈性容器確實能提供更多對齊選項。舉例來說，我們可以交替標記的位置：
如果使用 ::before 元素設定已排序的清單樣式，我們也可能希望使用計數器來新增數值標記。
li::before {
counter-increment: list-item;
content: counter(list-item);
}
使用 ::before 而非 ::marker 時，您可以完全存取 CSS 屬性，以便自訂樣式，並允許動畫和轉場效果 (::marker 僅提供有限支援)。
列出屬性
已排序的清單元素接受一些選用屬性，這有助於我們在各種用途上助我們一臂之力。
反向清單
如果有過去一年前 10 大專輯的清單，我們可能會從 10 本減去 1 本。我們可以使用自訂計數器，並以負值遞增計數器。或者，我們也可以直接在 HTML 中使用 reversed 屬性。我認為，除非計數器純粹是呈現用途，否則一般來說，在 CSS 中使用 reversed 屬性，而非以負值方式遞增計數器，會比較符合語意。如果 CSS 無法載入，您仍會在 HTML 中看到正確倒數的數字。此外，我們也需要考量螢幕閱讀器如何解讀清單。
觀看 2021 年前 10 大專輯的示範影片。如果計數器是純粹透過 CSS 遞增，使用螢幕閱讀器存取網頁的使用者可能會認為數字是遞增的，因此 10 其實是 1。
您可以在示範中看到，只要使用 reversed 屬性，標記就會自動取得正確的值，而我們不必額外採取任何行動！但如果我們要使用 ::before 虛擬元素建立自訂清單標記，就需要調整計數器。我們只需要指示清單項目計數器以負值遞增：
li::before {
counter-increment: list-item -1;
content: counter(list-item);
}
這適用於 Firefox，但 Chrome 和 Safari 中的標記會從 0 降低到 10。我們可以將 start 屬性新增至清單來修正這個問題。
分割清單
start 屬性可讓我們指定清單應從哪個數值開始。如果您想將清單分割成不同群組，這個方法就很實用。
讓我們以前 10 大專輯範例為基礎。也許我們其實想倒數前 20 大的專輯，但每 10 張為一組。這兩個群組之間有其他網頁內容。
我們需要在 HTML 中建立兩個獨立的清單，但如何確保計數器正確無誤？根據目前的標記，兩個清單都會從 10 倒數到 1，這不是我們想要的結果。不過，在 HTML 中，我們可以指定 start 屬性值。如果我們在第一個清單中新增 start 值 20，標記會再次自動更新！
<ol reversed start="20">
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
多欄清單版面配置
如您在先前的示範中所見，多欄版面配置有時很適合用於清單。設定資料欄寬度後，我們就能確保清單會自動調整為響應式，並在有足夠空間時，將清單放在兩個或更多資料欄上。我們也可以設定欄間間距，並為額外的裝飾效果新增樣式化的 column-rule (使用與 border 屬性相似的簡寫)：
ol {
columns: 25rem;
column-gap: 7rem;
column-rule: 4px dotted turquoise;
}
使用欄時，有時會導致清單項目出現不美觀的斷行，這並非我們想要的效果。
在清單項目中使用 break-inside: avoid 即可避免這些強制廣告插播：
li {
break-inside: avoid;
}
自訂屬性
CSS 自訂屬性可讓您為清單設定樣式，並提供多種可能性。如果我們知道清單項目的索引，就可以使用該索引來計算屬性值。很抱歉，目前無法透過 CSS 判斷元素的索引 (至少以可用的方式)。計數器只允許我們在 content 屬性中使用其值，不允許計算。
不過，我們可以在 HTML 的 style 屬性中設定元素索引，這樣計算的可能性就會提高，尤其是在使用模板語言時。以下範例說明如何使用 Nunjucks 設定：
<ol style="--length: items|length">
</ol>
Splitting.js 是用於用戶端執行類似功能的程式庫。
我們可以使用自訂屬性值，以各種方式透過清單顯示進度。其中一種方法是使用步驟清單的進度列。在這個範例中，我們使用含有線性漸層的虛擬元素，為每個項目建立長條圖，顯示使用者在清單中的位置。
li::before {
--stop: calc(100% / var(--length) * var(--i));
--color1: deeppink;
--color2: pink;
content: '';
background: linear-gradient(to right, var(--color1) var(--stop), var(--color2) 0);
}
我們也可以使用 hsl() 顏色函式，在清單進度變化時調整色調。我們可以使用自訂屬性來計算 hue 值。
說明清單樣式
如先前所述，我們可以選擇在 dl 的 div 中包裝術語和其定義，以便提供更多樣式選項。舉例來說，我們可能會想以格狀方式顯示清單。如果在清單上設定 display: grid，但沒有在每個群組周圍加上包裝函式 div，就表示我們的條款和說明會放置在不同的格線儲存格中。有時這種做法很實用，如以下範例所示，可以在菜單裡放進拼盤和料理。
我們可以在清單中定義格線，確保條件和說明一律會在欄中對齊，且欄寬由最長的條件決定。
另一方面，如果想將字詞與說明資訊卡樣式進行區分，可以使用包裝函式 <div>。
資源
- 清單：清單和 ::marker 簡介
- 使用 ::marker 的自訂標記
- 含計數器的 CSS 清單