使用現代 CSS 設計 HTML 和

作者：羅布·奧利裡✏️

和 HTML 元素（統稱為公開小工具）不容易設定樣式。由於限制，人們經常使用自訂元件製作自己的版本。然而，隨著 CSS 的發展，這些元素變得更容易自訂。在本文中，我將介紹如何自訂揭露小工具的外觀和行為。

如何和一起工作嗎？

是一個 HTML 元素，用於建立隱藏附加資訊的公開小工具。公開小部件通常呈現為帶有一些文字的三角形標記。

當使用者點擊小工具或聚焦於它並按空白鍵時，它會開啟並顯示其他資訊。三角形標記指向下方表示為開啟狀態：

揭露小工具有一個始終顯示的標籤，由

提供。元素。這是第一個孩子。如果省略，則瀏覽器提供預設標籤。通常，它會說“詳細資訊”：

您也可以在

之後提供多個元素表示附加資訊的元素：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

造型和

在設定

樣式時應考慮一些互通性問題。和元素。在討論一些常見用例之前，讓我們先介紹一下基礎知識。

元素與[

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) 元素類似，因為它的預設樣式包括display: list -item。因此，它支援 [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style) 簡寫屬性及其普通屬性。瀏覽器對清單樣式屬性的支援相當好，但 Safari 仍然落後。

揭露小工具有兩個偽元素來設定其組成部分的樣式：

1. ::marker 偽元素：表示位於
   開頭的三角形標記。這個造型的故事有點複雜。我們僅限於一小組 CSS 屬性。瀏覽器對 ::marker 的支援很好，但 Safari 目前不支援完整的屬性集。我將在本文的「設定摘要標記樣式」部分更詳細地討論這一點
2. ::details-content 偽元素：表示
   的「附加資訊」。這是最近新增的，因此瀏覽器支援目前僅限於 Chrome

在下面的部分中，我將示範一些更新的、鮮為人知的自訂揭露小部件的方法。

動畫開啟和關閉動作

當您開啟公開小工具時，它會立即開啟。一眨眼，你就會錯過它！

最好以更漸進的方式從一種狀態轉換到另一種狀態，以向使用者展示其操作的影響。我們可以為顯示小部件的開啟和關閉操作添加過渡動畫嗎？簡而言之，是的！

為了實現動畫效果，我們希望隱藏內容的高度從零過渡到其最終高度。 height 屬性的預設值為 auto，這讓瀏覽器根據內容計算高度。在新增 [interpolate-size](https://nerdy.dev/interpolate-size) 屬性之前，在 CSS 中無法將動畫設為 auto 值。雖然瀏覽器對我們需要使用的新 CSS 功能的支援有點有限（主要是 interpolate-size 和 ::details-content），但這是漸進增強的一個很好的例子。目前它可以在 Chrome 中運作！

這是動畫的 CodePen 範例。

揭露動畫如何運作？

首先，我們加入 interpolate-size，以便我們可以過渡到 auto 高度：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

接下來，我們要描述封閉式風格。我們希望「附加資訊」內容的高度為零，並確保沒有內容可見，即我們希望防止溢出。

我們使用 ::details-content 偽元素來定位隱藏內容。我使用區塊大小屬性而不是高度，因為使用邏輯屬性是一個好習慣。我們需要在過渡中包含內容可見性，因為瀏覽器在內容處於關閉狀態時設定內容可見性：隱藏 - 如果不包含它，關閉動畫將無法運作：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

動畫仍然無法如預期般運作，因為內容可見性屬性是離散的動畫屬性。這意味著沒有插值；瀏覽器將在兩個值之間翻轉，以便在整個動畫持續時間內顯示過渡內容。我們不要這個。

如果我們包含transition-behavior:allow-discrete;，值會在動畫的最後翻轉，這樣我們就得到了漸變過渡。

此外，當公開小部件處於中間狀態時，我們透過將區塊大小設為 0 來獲得內容溢出。我們會在開啟時顯示大部分內容。為了防止這種情況發生，我們添加了overflow:hidden。

最後，我們新增開啟狀態的樣式。我們希望最終狀態的大小為 auto:

details {
    interpolate-size: allow-keywords;
}

這些是大致的思路。如果您想要更詳細的影片說明，請查看 Kevin Powell 的演練，以了解如何為

製作動畫和。

為揭露小工具設定動畫時還有其他注意事項嗎？

如果「附加資訊」內容比寬，則揭露小部件可能會水平增長。內容。這可能會導致不必要的佈局變更。在這種情況下，您可能需要在

上設定寬度。

與任何動畫一樣，您應該考慮對運動敏感的使用者。您可以使用prefers-reduced-motion 媒體查詢來滿足該場景：

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

實施獨家組（手風琴專用）

常見的 UI 模式是手風琴組件。它由一堆公開小部件組成，可以擴展這些小部件以顯示其內容。要實現此模式，您只需要多個連續的

元素。您可以設定它們的樣式以在視覺上表明它們屬於在一起：

/* open state */
details[open]::details-content {
  block-size: auto;
}

預設樣式相當簡單：

每個佔據自己的陣線。它們的位置靠近（沒有邊距或填充），並且由於鄰近而被視為一個群組。如果您想強調它們是組合在一起的，您可以添加邊框並為它們提供相同的背景樣式，如下例所示：

此模式的變體是使手風琴獨佔，以便一次只能打開一個披露小部件。一旦打開一個，瀏覽器就會關閉另一個。您可以透過

的name屬性建立獨佔群組。具有相同的名稱形成一個語義組：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

在使用專屬手風琴之前，請考慮它是否對使用者有幫助。如果用戶可能想要消耗更多信息，這將要求他們經常打開項目，這可能會令人沮喪。

目前所有現代瀏覽器都支援此功能，因此您可以立即使用它。

設定摘要標記的樣式

揭露小部件通常在其旁邊顯示一個小三角形標記。在本節中，我們將介紹設定此標記樣式的過程。

標記與

相關聯。元素。新增 [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) 偽元素意味著我們可以直接設定標記框的樣式。但是，我們只限於一組 CSS 屬性：

• 所有字體屬性
• 顏色
• 空白
• text-combine-upright、[unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) 與方向屬性
• 內容
• 所有動畫和過渡屬性

如前所述，類似[

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)；它支援清單樣式的簡寫屬性及其普通屬性。雖然這聽起來有點大雜燴，但透過一些範例會更容易理解樣式選項。

在進入範例之前，先簡單介紹一下瀏覽器支援。在撰寫本文時，Safari 是唯一不完全支援標記樣式的主要瀏覽器：

• Safari 支援目前僅限於對 ::marker 偽元素的顏色和字體大小屬性進行樣式設定。 Safari 支援非標準偽元素 ::-webkit-details-marker
• Safari 根本不支援設定清單樣式屬性的樣式。參考CanIUse

更改標記的顏色和大小

假設我們想將三角形標記的顏色變更為紅色，並將其放大 50%。我們可以做以下事情：

details {
    interpolate-size: allow-keywords;
}

這應該適用於所有瀏覽器。這是 CodePen 範例。

調整標記的間距

預設情況下，標記位於

文字內容的一側。並且它們位於同一個邊界框中。列表樣式位置設定為內部。當它處於開啟狀態時，「附加資訊」位於標記的正下方。也許您想更改其間距和對齊方式：

如果我們將 list-style-position 設為 Outside，則標記位於

之外。邊界框。這使我們能夠調整摘要文字和標記之間的間距：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

您可以在上面螢幕截圖的第二個實例中看到這一點。

這是此範例的 CodePen：

更改標記文字/圖像

如果要更改標記的內容，可以使用 ::marker 偽元素的 content 屬性。根據您的喜好，您可以將其設定為文字。對於我的範例，我使用拉鍊嘴表情符號表示閉合狀態，使用張口表情符號表示開啟狀態：

details {
    interpolate-size: allow-keywords;
}

要使用圖像作為標記，可以使用 ::marker 偽元素的 content 屬性，或

:
的 list-style-image 屬性

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

在下面的範例中，我們使用材質符號中的兩個箭頭圖示作為標記。向右的箭頭為關閉狀態，向下的箭頭為開啟狀態：

這些範例將在 Chrome 和 Firefox 中按預期工作，但 Safari 將忽略樣式。您可以將其視為漸進式增強，然後就到此為止了。但如果您希望在所有瀏覽器中具有相同的外觀，則可以隱藏標記，然後添加您自己的圖像作為替身。這給你更多的自由：

/* open state */
details[open]::details-content {
  block-size: auto;
}

您可以使用新的標記圖示（例如內嵌影像或透過偽元素）直觀地指示狀態。 已經（大部分）指示展開/折疊狀態。因此，如果您使用內嵌圖形，則應將其視為裝飾性的。空的 alt 屬性可以執行以下操作：

<details>
  <summary>Do you want to know more?</summary>
  <h3 id="Additional-info">Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

如果您願意，您也可以選擇將標記放置在

的末尾：

details {
    interpolate-size: allow-keywords;
}

但是，需要注意的是，隱藏標記會導致螢幕閱讀器出現可訪問性問題。 Firefox、VoiceOver、JAWS 和 NVDA 都存在一個問題，即如果刪除標記，則始終會宣佈公開小部件的切換狀態。不幸的是，這種風格與國家息息相關。最好避免這樣做。

設計

的「附加資訊」部分

您可能想要設定揭露小工具的「附加資訊」部分的樣式，而不會將樣式洩漏到。因為

中可以包含可變數量的元素，所以最好有一個包羅萬象的規則：

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

我的做法是排除

使用 :not() 函數的元素。請記住，這針對的是每個元素，而不是作為單一部分的內容！

/* open state */
details[open]::details-content {
  block-size: auto;
}

或者，您可以使用 ::details-content 偽元素，它針對整個部分。這就是為什麼你想用它來動畫開啟和關閉狀態轉換：

>@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

   details::details-content {
      transition-duration: 0.8s; /* slower speed */
   }
}

注意到差別了嗎？該節的開頭只有一個邊距。

和

沒有邊距。使用 ::details-content 偽元素的缺點是瀏覽器支援目前僅限於 Chrome。

設計揭露小部件時的常見錯誤

• 歷史上，無法變更
  的顯示類型。元素。 Chrome 中放寬了此限制
• 請小心變更
  的顯示類型。預設為display:list-item;;如果將其更改為 display: block;，可能會導致標記在某些瀏覽器中被隱藏。這是 Firefox 中的一個問題：

<details>
    <summary>Payment Options</summary>
    <p>...</p>
</details>
<details>
    <summary>Personalise your PIN</summary>
    <p>...</p>
</details>
<details>
    <summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
    <p>...</p>
</details>

• 你不能巢狀

• 因為元素具有按鈕的預設 ARIA 角色，它會從子元素中刪除所有角色。因此，如果您想要一個像

  這樣的標題，總之，螢幕閱讀器等輔助技術不會將其識別為標題。盡量避免這種模式：
  

  <details>
    <summary>Do you want to know more?</summary>
    <h3 id="Additional-info">Additional info</h3>
    <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
  </details>
  

• 隱藏標記會導致某些螢幕閱讀器出現輔助使用問題。 Firefox、VoiceOver、JAWS 和 NVDA 都存在一個問題，即如果刪除標記，則始終會宣佈公開小部件的切換狀態

還會有更多變化嗎？

最近有個大提案，幫忙把做成了。瀏覽器之間更具可自訂性和互通性。第一階段包括我在本文中介紹的一些內容：

1. 刪除CSS顯示屬性限制，以便您可以使用其他顯示類型，例如flex和grid
2. 更清楚地指定影子樹的結構。這應該有助於與 Flexbox 和 CSS Grid 的互通性
3. 加入 ::details-content 偽元素來定址第二個槽，以便在
   中加入「附加資訊」的容器。元素可以設定樣式

令人興奮的消息是上面列表中的第 1 項和第 3 項已在 Chrome 131 中發布（截至 2024 年 11 月）。下一階段應該可以解決改進標記的樣式問題。此外，還有一組相關的變更將有助於提高這些元素的動畫能力。

結論

在 CSS 中自訂 HTML 元素變得更加容易。現在，您可以建立具有完整瀏覽器支援的專用群組，將開啟/關閉狀態的轉換動畫化為漸進增強，並執行標記的簡單樣式。

的致命弱點是標記的樣式。好消息是，有一個積極的提案可以解決這個問題和其他一些痛點。這應該可以消除使用

時的所有障礙。在不久的將來，您將不需要編寫自己的揭露小工具或使用第三方 Web 元件！ ？

---

您的前端是否佔用了使用者的 CPU？

隨著 Web 前端變得越來越複雜，資源貪婪的功能對瀏覽器的要求越來越高。如果您有興趣監控和追蹤生產中所有使用者的客戶端 CPU 使用情況、記憶體使用情況等，請嘗試 LogRocket。

LogRocket 就像是網路和行動應用程式的 DVR，記錄網路應用程式、行動應用程式或網站中發生的所有情況。您無需猜測問題發生的原因，而是可以匯總和報告關鍵前端效能指標、重播用戶會話以及應用程式狀態、記錄網路請求並自動顯示所有錯誤。

現代化偵錯 Web 和行動應用程式的方式 - 開始免費監控。

以上是使用現代 CSS 設計 HTML 和 的詳細內容。更多資訊請關注PHP中文網其他相關文章！