瞭解設定清單樣式的實用又創意方法。
當您在構思清單時,會想到什麼?最顯而易見的例子就是購物清單,這是最簡單的清單,以及沒有特定順序的一系列項目。不過,我們會在網路上以各種方式使用清單。某場地近期舉辦的演唱會收藏素材?非常可能是清單。需要完成多個步驟的預訂程序嗎?這可能是一份清單,或是多張圖片的圖庫?就算是含有說明文字的圖片清單也一樣。
本文將深入介紹網路上可用的各種 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
虛擬元素的 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) '🐈 ';
}
我們的計數器會自動遞增 1,但也可以選擇在清單項目上設定 counter-increment
屬性,以其他值增加計數器。舉例來說,這樣每次會使計數器增加 3 次:
li {
counter-increment: list-item 3;
}
計數器還能深入探索更多功能。請參閱「CSS 清單、標記和計數器」一文,深入瞭解部分可能性。
::標記樣式的限制
有時候,我們可能會希望進一步控制標記的位置和樣式。您無法使用 flexbox 或格線來定位標記,而這有時在需要其他對齊方式時,這可能會是缺點。::marker
提供一些 CSS 屬性,以便設定樣式。如果設計需要基本樣式以外的任何項目,我們建議使用其他虛擬元素。
設定類似清單的樣式
有時候,我們可能會想設定清單樣式,與預設樣式完全不同。使用導覽選單經常出現這種情況,例如我們通常會移除所有標記,並且使用 Flexbox 以水平方式顯示清單。常見的做法是將 list-style
屬性設為 none
。這表示您將無法在 DOM 中存取標記虛擬元素。
含有 ::before 的自訂標記
設定 ::before
虛擬元素樣式是在 ::marker
導入之前建立自訂清單標記的常見方式。但現在有了這類工具,我們就能在需要時享有更多彈性,建立視覺複雜的清單樣式。
和 ::marker
一樣,我們可以使用 content
屬性新增自訂項目符號樣式。與使用 ::marker
不同的是,我們需要手動定位,因為我們不具有 list-style-position
提供的自動福利。但是,我們可以透過 Flexbox 輕鬆安排它的擺放位置,並且開創更多可能的對齊方式。舉例來說,我們可以改變標記的位置:
如果使用 ::before
元素來設定已排序清單樣式,可能也會使用計數器來新增數值標記。
li::before {
counter-increment: list-item;
content: counter(list-item);
}
使用 ::before
而非 ::marker
,我們可以完整存取 CSS 屬性的自訂樣式,以及允許動畫和轉場效果,但部分支援僅限於 ::marker
。
列出屬性
已排序清單元素接受部分選用屬性,這有助於我們各種用途。
反轉清單
如果有過去一年的前 10 大專輯清單,我們可能會將它數從 10 減少到 1 數。我們「可以」使用這個自訂計數器,並增加反之。我們也可以直接在 HTML 中使用 reversed
屬性。我認為,除非計數器單純是呈現方式,否則語意通常較適合使用 reversed
屬性,而非在 CSS 中以負面遞增的方式遞增計數器。如果 CSS 無法載入,HTML 中仍會正確計算數字。同時,我們需要考量螢幕閱讀器會如何解讀清單。
觀看 2021 年前 10 大熱門專輯的示範影片。如果計數器只是因為 CSS 增加而增加,使用者透過螢幕閱讀器存取網頁時,可能表示這些數字有所增加,因此 10 其實是數字。
您可以在示範中看到,使用 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
屬性值。如果將 20 的 start
值新增到第一個清單,標記也會再次自動更新!
<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 清單