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

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

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

動畫開啟和關(guān)閉動作

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

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

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

這是動畫的 CodePen 範例。

揭露動畫如何運作？

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

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

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

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

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

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

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

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

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

details {
    interpolate-size: allow-keywords;
}

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

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

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

與任何動畫一樣，您應該考慮對運動敏感的使用者。您可以使用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 模式是手風琴組件。它由一堆公開小部件組成，可以擴展這些小部件以顯示其內(nèi)容。要實現(xiàn)此模式，您只需要多個連續(xù)的

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

預設(shè)樣式相當簡單：

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

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

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

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

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

設(shè)定摘要標記的樣式

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

標記與

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

如前所述，類似[

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

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

更改標記的顏色和大小

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

details {
    interpolate-size: allow-keywords;
}

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

調(diào)整標記的間距

預設(shè)情況下，標記位於

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

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

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

這是此範例的 CodePen：

更改標記文字/圖像

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

details {
    interpolate-size: allow-keywords;
}

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

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

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

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

在下面的範例中，我們使用材質(zhì)符號中的兩個箭頭圖示作為標記。向右的箭頭為關(guān)閉狀態(tài)，向下的箭頭為開啟狀態(tài)：

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

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

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

<details>
  <summary>Do you want to know more?</summary>
  <h3>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;
}

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

設(shè)計

的「附加資訊」部分

您可能想要設(shè)定揭露小工具的「附加資訊」部分的樣式，而不會將樣式?jīng)┑健Ｒ驗?

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

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

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

我的做法是排除

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

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

>@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 */
   }
}

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

和

<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>