清單

CSS Podcast - 030：清單

想像一下，您下次在雜貨採購時打算買到許多件商品。以清單方式呈現這種內容的常見方式之一，但該如何在購物清單中新增樣式？

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

建立清單

上述清單以語意元素 (<ul>) 開頭，將雜貨清單項目 (<li> 元素) 做為子項。如果檢查每個 <li> 元素，您會發現所有元素都具有 display: list-item，因此瀏覽器預設會算繪 ::marker。

li {
  display: list-item;
}

目前有兩種清單，

你可以使用 <ol> 建立已排序的清單，這時清單/項目將顯示為 ::marker。

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

說明清單是使用 <dl> 建立，但這個清單類型不會使用 <li> 清單項目元素。

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

清單樣式

現在您已經瞭解如何建立清單，可以設定樣式了。第一個要探索的 CSS 屬性是套用到整份清單的 CSS 屬性。

您可透過三種清單樣式屬性設定範例樣式：list-style-position、list-style-image 和 list-style-type。

list-style-position

list-style-position 可讓您將項目符號移至 inside 或 outside 清單項目內容。預設的 outside 表示清單項目內容不包含項目符號，而 inside 會在清單項目內容之間移動第一個元素。

list-style-image

list-style-image 可讓你將清單的項目符號點替換成圖片。這樣你就可以設定 url 或 none 之類的圖片，讓項目符號變成圖片、svg 或 GIF。您也可以使用任何媒體類型，甚至資料 URI。

讓我們瞭解如何為各個雜貨項目新增圖片做為 list-style-image：

list-style-type

最後一種是設定 list-style-type 的樣式，可將項目符號變更為已知的樣式關鍵字、自訂字串、表情符號等等。您可以在這裡查看所有可能的清單樣式類型。

list-style (簡寫)

現在，您已經有上述所有的個別屬性，可以使用 list-style 簡寫，在同一行中設定所有清單樣式：

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

list-style 可讓您依任何順序宣告 list-style 屬性中的一、二或三個組合。如果同時設定 list-style-type 和 list-style-image，當圖片無法使用時，系統會使用 list-style-type 做為備用選項。

/* type */
list-style: square;

/* image */
list-style: url('../img/shape.png');

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;

本節所涵蓋的清單樣式中最常用的屬性是屬性。常見的應用程式是使用 list-style: none 隱藏預設樣式。預設樣式來自瀏覽器，而且您經常看到重設樣式表會移除邊框間距和邊界等清單樣式。您也可以使用這個簡寫設定樣式，例如 list-style: square inside;

到目前為止，這些範例主要是為了設定整個清單和清單項目的樣式，但更精細的做法呢？

::marker 虛擬元素

list-item 標記元素是項目符號、連字號或羅馬數字，有助於標明清單中的每個項目。

如果您在開發人員工具中檢查清單，即使未在 HTML 中宣告任何項目，每個清單項目都會顯示 ::marker 元素。如果進一步檢查 ::marker，您將會看到瀏覽器的預設樣式。

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

當您宣告清單時，即使 HTML 中沒有項目符號或羅馬數字，每個項目都會獲得一個標記。這是虛擬元素，因為瀏覽器會為您產生這個元素，並提供限定樣式 API 來指定該元素。進一步瞭解 CSS 項目符號的構成元素。::marker 在 Safari 中僅提供部分支援。

標記框

在 CSS 版面配置模型中，清單項目標記會以與每個清單項目相關聯的標記方塊表示。標記方塊是指容器，通常包含項目符號或編號。

如要設定標記方塊的樣式，您可以使用 ::marker 選取器。這樣您就可以只選取標記，而不是根據整個清單設定樣式。

標記樣式

您已選取標記，接著來看看此選取器可用的樣式屬性。你可以前往 web.dev，進一步瞭解如何使用 CSS 自訂項目符號 ::marker。

以下列舉幾個允許的 CSS ::marker 屬性：

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

顯示類型

我們所有的 list-style 和 ::marker 屬性都知道設定 <li> 元素的樣式，因為它們具有預設的 list-item 顯示值。您也可以將非 <li> 的項目轉換為清單項目。

要做到這一點，請新增屬性 display: list-item。display: list-item 的其中一個例子，是想在標題上放置項目符號，以便使用 ::marker 將項目符號變更為其他內容。下例顯示使用 display: list-item 設定樣式的標題，其中包含使用正確的清單標記的清單。

雖然您可以使用 display 將任何內容轉換為清單項目檢視畫面，但如果設定的內容確實為清單，請勿使用正確的清單標記。將項目的外觀外觀變更為清單項目，並不會改變無障礙服務讀取及辨識項目的方式，因此不會向螢幕閱讀器讀取及辨識該項目，因此不會向螢幕閱讀器讀取該項目，也無法切換裝置。請盡可能使用語意標記，並以 <li> 建立清單。

隨堂測驗

考驗你對清單的瞭解

資源

• MDN 清單樣式指南
• 使用 CSS 自訂項目符號 ::marker
• Smashing Magazine：CSS 清單、標記和計數器
• 使用 CSS 計數器的 MDN
• CSS 清單和計數器單元第 3 級
• CSS-Tricks：運用 CSS 計數器和 CSS 格線計算