尘埃落定性描写细节摘要
开发了许多JavaScript库，以便为我们提供网站上的其他交互式小部件。 同样，HTML5还解释了许多流行的交互式组件，使它们成为本机Web功能。 在本文中，我们将研究一个称为<details>元素（并在此过程中使用<summary>元素），该元素为我们提供了类似于手风琴的交互式小部件。
使用<details>和<summary>
<details>元素可以在<body>范围内的任何位置使用。 举一个简单的例子，我们可以这样添加它：
<details>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details> 上面的示例显示了包含段落的<details>元素，突出显示了其与其他HTML段落元素的相似性。 它定义了一个语义部分，该语义部分又可能包含子元素（例如图像）和<figure>元素，诸如<input>和<textarea>表单元素，甚至嵌套其他<details>数组。
唯一的不同之处在于浏览器如何在前端显示此元素。 支持的浏览器（例如Chrome，Safari和最新版的Opera）将在侧面显示一个小三角形和一条明细线。
<details>元素的作用类似于手风琴小部件，因为其中的内容最初将被隐藏。 切换箭头或单击与箭头水平对齐的任意位置，将显示隐藏的内容。 我们也可以使用Tab键以及Space或Enter键来突出显示它。
注意 ：AccesibleCulture在屏幕阅读器和 详细信息 / 摘要中全面介绍了辅助功能。
开放状态
打开details元素后，如果现在使用dev工具浏览源代码，您会发现浏览器已在处于此状态时附加了open属性。 实际上，我们可以手动将open属性添加到<detail> ，以显示默认情况下打开的内容。
<details open>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>摘要元素
<details>元素与称为<summary>的元素一起提供； 这两个是要结合使用的，但是使用<summary>元素是完全可选的。
那么当您使用它时会发生什么呢？
<details open>
<summary>Hello World</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>给定以上示例，默认的Detail将被Hello World代替。
套料
如前所述， <details>元素可能包含其他嵌套的<details>元素，如下所示：
<details>
<summary>Hello World</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
<details>
<summary>Hi, How are you?</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>
</details>确实存在一个视觉问题（浏览器默认样式）（嵌套列表不会出现这种情况）。 如下所示，嵌套元素与模糊真实层次结构的父元素一起向左对齐：
但是，通过添加一些简单的样式可以轻松解决此问题。 因此，让我们看看如何设计这些元素。
使用CSS设置样式细节
<details>和<summary>元素可以像其他任何块元素一样设置样式。 通过元素选择器，类或ID选择它们，并堆叠一堆属性以对其进行样式设置。
details {
padding: 15px;
background-color: #f6f7f8;
margin-bottom: 20px;
}此外，您可以使用属性选择器为打开状态指定样式。
details[open] {
/* the style goes here */
} <summary>元素也可以设置样式。 说到这，如果将鼠标悬停在诸如按钮或锚点之类的可单击元素上，则光标通常会变成指针。 但是<summary>元素并非如此，该元素也是可单击的。 游标将变成text游标，感觉有点不自然，因此您可能需要修改默认样式，将游标定义为pointer 。
summary {
cursor: pointer;
}造型三角形
现在，您一直想问一个问题：您可以为小三角形设置样式吗？ 目前还没有标准，但是Webkit为此使用了伪元素::-webkit-details-marker 。 通过这种方式，我们可以自定义默认的箭头样式，例如颜色，背景色以及箭头大小。
summary::-webkit-details-marker {
color: #fff;
background-color: #000;
} 不幸的是，至少在撰写本文时，不可能直接通过::-webkit-details-marker替换箭头。 唯一可行的方法是使用::before或::after替换它。
summary::-webkit-details-marker {
display: none;
}
summary:before {
content: "\2714"; /* the new icon */
color: #696f7c;
margin-right: 5px;
}浏览器支持
在过去两年中，浏览器对这两个元素的支持得到了很大的改善。 早在2011年和2012年，Chrome是唯一能够呈现<details>和<summary>浏览器-尽管该实现存在一些可访问性问题。 Safari和Opera仅在最近才加入该俱乐部。
因此，就支持Firefox和Internet Explorer而言，有多个polyfill选项可以模拟该功能，例如Mathias Bynens和jQuery Details开发的 。 尽管此polyfill看似依赖jQuery，但文件大小比jQuery UI库对应的文件小得多。
一旦实施，就可以像往常一样设置样式。
summary:before {
content: "\25B8"; /* unicode character of the litle triangle */
color: #000;
margin-right: 5px;
}有关浏览器支持的更多信息，请访问caniuse.com 。
用例和范例
您可能已经在野外看到了这些元素。 例如，在网上购物时，您可能会发现一些网站在手风琴中包装了其产品的详细说明。 否则，他们可能会在边栏中使用它来过滤结果，例如Payless 。
<details>和<summary>元素也非常适合组织通常在定价表布局中找到的FAQ项目和功能列表项目。 我已经创建了一个演示，您可以在此处免费使用它。
结论
正如亚伦·伦姆斯登（Aaron Lumsden） 在这篇文章中所说的
因此，非常感谢这个新元素。 有一天，也许随着Web组件的出现，在添加简单的控件（如Accordion）时，构建网站或Web应用程序对JavaScript库的依赖程度会降低。
因此，您是否曾经在网站中使用<details>和<summary> ？
翻译自: https://webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements--cms-21999
尘埃落定性描写细节摘要
5283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
