以前，創(chuàng)建簡單的可擴展內(nèi)容塊需要JavaScript或複雜的CSS解決方法。修改HTML也可能變得笨拙?，F(xiàn)在，<details></details>和<summary></summary>元素（形成“披露小部件”）大大簡化了這一點。例如，我們在工作中廣泛使用它們來進(jìn)行常見問題解答。

應(yīng)對常見的造型挑戰(zhàn)

儘管<details></details>和<summary></summary>固有地提供擴展/倒塌功能，您可能仍然需要CSS才能進(jìn)行最佳呈現(xiàn)。沒有樣式，出現(xiàn)了兩個關(guān)鍵問題：

第1期：<summary></summary>游標(biāo)

這<summary></summary>元素雖然交互式默認(rèn)為文本選擇光標(biāo)，而不是預(yù)期的指針。

問題2：嵌套的塊元素<summary></summary>

嵌套塊級元素（如標(biāo)題）<summary></summary>使它們出現(xiàn)在箭頭下方，而不是內(nèi)聯(lián)。

CSS解決方案

要解決這些問題，請將這些樣式添加到您的CSS重置中：

詳細(xì)信息摘要{
  光標(biāo)：指針；
}

詳細(xì)信息摘要> * {
  顯示：內(nèi)聯(lián)；
}

讓我們詳細(xì)檢查每個問題及其解決方案。

自定義<summary></summary>游標(biāo)

光標(biāo)應(yīng)在視覺上反映其預(yù)期的相互作用。默認(rèn)文本光標(biāo)<summary></summary>元素在技術(shù)上正確（可選文本），但不如指針直觀。

解決方案很簡單：

詳細(xì)信息摘要{
  光標(biāo)：指針；
}

許多著名的網(wǎng)站，包括MDN Web文檔和GitHub，已經(jīng)採用了這種風(fēng)格來披露小部件。默認(rèn)cursor: text可能反映了摘要文本的可選性，但是對於交互式元素，指針通常比較可取。請注意，更改光標(biāo)只會影響視覺外觀。選擇性保持不變。

顯示嵌套<summary></summary>內(nèi)容內(nèi)聯(lián)

對於常見問題解答，我經(jīng)常將問題包裹在標(biāo)題中（例如，<h3></h3> ） 之內(nèi)<summary></summary>：

<details><summary><h3>我孩子的504計劃會實施嗎？</h3></summary><p>是的。與春季類似，案例經(jīng)理將與學(xué)生聯(lián)繫。</p></details>

這提供了幾個優(yōu)勢：

• 一致的樣式：與其他標(biāo)題保持視覺一致性。
• IE/EdgeHTML兼容性：為不支持的舊瀏覽器提供後備<details></details>。
• 可訪問性： AIDS輔助技術(shù)導(dǎo)航（儘管屏幕讀取器的解釋可能會有所不同，如下所述）。

標(biāo)題與按鈕

這<summary></summary>元素的行為就像一個按鈕（它隱式具有role=button ），但與按鈕不同，它允許嵌套標(biāo)題。這造成了衝突：

• 標(biāo)題輔助導(dǎo)航。
• 按鈕通常會從嵌套元素中剝離語義。

屏幕閱讀器的兼容性在這裡不一致。 NVDA和配音識別內(nèi)部的標(biāo)題<summary></summary>，但是下巴沒有。因此，在內(nèi)部樣式的同時<summary></summary>可能的是，他們的語義解釋不能保證。

內(nèi)聯(lián)樣式

為防止箭頭出現(xiàn)在標(biāo)題上方<summary></summary>：

詳細(xì)信息摘要> * {
  顯示：內(nèi)聯(lián)；
}

使用inline ，而不是inline-block ，以避免包裝問題。在誘人使用display: flex on<summary></summary> ，這隱藏了箭頭。

獎金：不包括Internet Explorer樣式

由於IE和較舊的邊緣版本不支持<details></details>，避免使用功能查詢對它們應(yīng)用自定義樣式：

 @supports而不是（-ms-ime-align：auto）{
  詳細(xì)信息摘要{
    光標(biāo)：指針；
  }
  詳細(xì)信息摘要> * {
    顯示：內(nèi)聯(lián)；
  }
  /* 其他<details>/<summary> 樣式 */
}</summary></details>

IE完全忽略了這個塊。由於-ms-ime-align檢查，Edgehtml也忽略了它。請注意，非常古老的Chrome和Safari版本（具有微不足道的市場份額）也缺乏功能查詢支持。 @supports (details)塊是理想的選擇，但瀏覽器支持更少。

結(jié)論

使用正確的HTML結(jié)構(gòu)和這些CSS樣式，您可以輕鬆自定義披露小部件。記住造型時<summary></summary>元素很簡單，嵌套標(biāo)題的屏幕閱讀器兼容性需要考慮。

以上是兩個問題造型細(xì)節(jié)元素以及如何解決這些元素的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！