披露小部件有兩個偽元素來設(shè)置其組成部分的樣式：

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

在下面的部分中，我將演示一些更新的、鮮為人知的自定義披露小部件的方法。

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

當(dāng)您打開公開小部件時，它會立即打開。一眨眼，你就會錯過它！

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

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

這是動畫的 CodePen 示例。

披露動畫如何運(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)容。我使用塊大小屬性而不是高度，因?yàn)槭褂眠壿媽傩允且粋€好習(xí)慣。我們需要在過渡中包含內(nèi)容可見性，因?yàn)闉g覽器在內(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>

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

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

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

最后，我們添加打開狀態(tài)的樣式。我們希望最終狀態(tài)的大小為 auto:

details {
    interpolate-size: allow-keywords;
}

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

為披露小部件設(shè)置動畫時還有其他注意事項(xiàng)嗎？

如果“附加信息”內(nèi)容比寬，則披露小部件可能會水平增長。內(nèi)容。這可能會導(dǎo)致不必要的布局變化。在這種情況下，您可能需要在

與任何動畫一樣，您應(yīng)該考慮對運(yùn)動敏感的用戶。您可以使用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;
}

實(shí)施獨(dú)家<細(xì)節(jié)>組（手風(fēng)琴專用）

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

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

默認(rèn)樣式相當(dāng)簡單：

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

此模式的一種變體是使手風(fēng)琴獨(dú)占，以便一次只能打開一個披露小部件。一旦打開一個，瀏覽器就會關(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>

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

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

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

披露小部件通常在其旁邊顯示一個小三角形標(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)容
• 所有動畫和過渡屬性

如前所述，<總結(jié)>類似于 [

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

• Safari 支持當(dāng)前僅限于對 ::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 示例。

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

默認(rèn)情況下，標(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>

您可以在上面屏幕截圖的第二個實(shí)例中看到這一點(diǎn)。

這是此示例的 CodePen：

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

如果要更改標(biāo)記的內(nèi)容，可以使用 ::marker 偽元素的 content 屬性。根據(jù)您的喜好，您可以將其設(shè)置為文本。對于我的示例，我使用拉鏈嘴表情符號表示閉合狀態(tài)，使用張口表情符號表示打開狀態(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;
}

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

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

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

您可以使用新的標(biāo)記圖標(biāo)（例如內(nèi)聯(lián)圖像或通過偽元素）直觀地指示狀態(tài)。 <總結(jié)>已經(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>

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

details {
    interpolate-size: allow-keywords;
}

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

設(shè)計

的“附加信息”部分

您可能想要設(shè)置披露小部件的“附加信息”部分的樣式，而不會將樣式泄漏到。因?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;
}

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