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

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

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

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

當(dāng)您開啟公開小工具時(shí)，它會(huì)立即開啟。一眨眼，你就會(huì)錯(cuò)過它！

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

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

這是動(dòng)畫的 CodePen 範(fàn)例。

揭露動(dòng)畫如何運(yùn)作？

首先，我們加入 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>

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

我們使用 ::details-content 偽元素來定位隱藏內(nèi)容。我使用區(qū)塊大小屬性而不是高度，因?yàn)槭褂眠壿媽傩允且粋€(gè)好習(xí)慣。我們需要在過渡中包含內(nèi)容可見性，因?yàn)闉g覽器在內(nèi)容處於關(guān)閉狀態(tài)時(shí)設(shè)定內(nèi)容可見性：隱藏 - 如果不包含它，關(guān)閉動(dòng)畫將無法運(yù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>

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

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

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

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

details {
    interpolate-size: allow-keywords;
}

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

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

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

與任何動(dòng)畫一樣，您應(yīng)該考慮對(duì)運(yùn)動(dòng)敏感的使用者。您可以使用prefers-reduced-motion 媒體查詢來滿足該場(chǎng)景：

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

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

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

實(shí)施獨(dú)家組（手風(fēng)琴專用）

常見的 UI 模式是手風(fēng)琴組件。它由一堆公開小部件組成，可以擴(kuò)展這些小部件以顯示其內(nèi)容。要實(shí)現(xiàn)此模式，您只需要多個(gè)連續(xù)的

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

預(yù)設(shè)樣式相當(dāng)簡(jiǎn)單：

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

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

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

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

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

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

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

標(biāo)記與

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

如前所述，類似[

在進(jìn)入範(fàn)例之前，先簡(jiǎn)單介紹一下瀏覽器支援。在撰寫本文時(shí)，Safari 是唯一不完全支援標(biāo)記樣式的主要瀏覽器：

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

更改標(biāo)記的顏色和大小

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

details {
    interpolate-size: allow-keywords;
}

這應(yīng)該適用於所有瀏覽器。這是 CodePen 範(fàn)例。

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

預(yù)設(shè)情況下，標(biāo)記位於

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

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

您可以在上面螢?zāi)唤貓D的第二個(gè)實(shí)例中看到這一點(diǎn)。

這是此範(fàn)例的 CodePen：

更改標(biāo)記文字/圖像

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

details {
    interpolate-size: allow-keywords;
}

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

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

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

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

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

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

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

您可以使用新的標(biāo)記圖示（例如內(nèi)嵌影像或透過偽元素）直觀地指示狀態(tài)。 已經(jīng)（大部分）指示展開/折疊狀態(tài)。因此，如果您使用內(nèi)嵌圖形，則應(yīng)將其視為裝飾性的。空的 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>

如果您願(yuàn)意，您也可以選擇將標(biāo)記放置在

details {
    interpolate-size: allow-keywords;
}

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

設(shè)計(jì)

的「附加資訊」部分

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

/* 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 偽元素，它針對(duì)整個(gè)部分。這就是為什麼你想用它來動(dòng)畫開啟和關(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é)的開頭只有一個(gè)邊距。

和

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