两个问题造型细节元素以及如何解决这些元素

以前，创建简单的可扩展内容块需要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>我孩子的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中文网其他相关文章！