兩個問題造型細節元素以及如何解決這些元素

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

應對常見的造型挑戰

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

第1期：<summary></summary>游標

這<summary></summary>元素雖然交互式默認為文本選擇光標，而不是預期的指針。

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

嵌套塊級元素（如標題）<summary></summary>使它們出現在箭頭下方，而不是內聯。

CSS解決方案

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

詳細信息摘要{
  光標：指針；
}

詳細信息摘要> * {
  顯示：內聯；
}

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

自定義<summary></summary>游標

光標應在視覺上反映其預期的相互作用。默認文本光標<summary></summary>元素在技術上正確（可選文本），但不如指針直觀。

解決方案很簡單：

詳細信息摘要{
  光標：指針；
}

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

顯示嵌套<summary></summary>內容內聯

對於常見問題解答，我經常將問題包裹在標題中（例如，<h3></h3> ） 之內<summary></summary>：

<details><summary><h3 id="我孩子的-計劃會實施嗎">我孩子的504計劃會實施嗎？</h3></summary><p>是的。與春季類似，案例經理將與學生聯繫。</p></details>

這提供了幾個優勢：

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

標題與按鈕

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

• 標題輔助導航。
• 按鈕通常會從嵌套元素中剝離語義。

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

內聯樣式

為防止箭頭出現在標題上方<summary></summary>：

詳細信息摘要> * {
  顯示：內聯；
}

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

獎金：不包括Internet Explorer樣式

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

 @supports而不是（-ms-ime-align：auto）{
  詳細信息摘要{
    光標：指針；
  }
  詳細信息摘要> * {
    顯示：內聯；
  }
  /* 其他<details>/<summary> 樣式 */
}</summary></details>

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

結論

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

以上是兩個問題造型細節元素以及如何解決這些元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！