那一天我二十一岁,在我一生的黄金时代,我有好多奢望。我想爱,想吃,还想在一瞬间变成天上半明半暗的云。
——王小波《黄金时代》
简介
HTML5 引入的 <details>
元素好玩的一点是,用鼠标点点点,它包含的内容会在显示与隐藏之间切换。
代码就非常简单啦,这样的
<details>
<div>你好啊</div>
</details>
复制代码
如果调出控制台的话,会能看到实现显隐的细节:
<details>
元素有一个 open
布尔值属性,默认它包含的内容(除了 summary
)是隐藏的,加了这个属性之后,内容就显示出来了。
<summary>
总是和 <detail>
配合使用。其实,上面代码里,虽然我们没有在 <details>
包含 <summary>
,但是 ,<details>
会有一个缺省的 summary
,也就是说:
<details></details>
<!-- 等同于(中文环境下) -->
<details>
<summary>详细信息</summary>
</details>
<!-- 如果我们手动设置 `<summary>`,就会覆盖掉缺省的 -->
<details>
<summary>一首小诗</summary>
</details>
复制代码
举一个完整的小例子:
<details open>
<summary>Overview</summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details>
复制代码
<details>
中除了 <summary>
元素是始终显示的外,其他部分都受到 open
属性的影响,产生对应的显隐效果。
使用场景
一种使用场景是折叠面板:
还有一种就是下拉框了。
如下图所示,Github 的下拉框就是使用 <details>
和 <summary>
实现的。
本文不介绍实现上面两种场景所可能需要的 JS 逻辑,在这里只是提供一种实现思路。当然了,在使用这两个元素前,需要知道怎么给它们应用样式,这样才算是真正的物尽其用。
首当其冲的就是去除那个箭头。
重置样式(去掉箭头)
默认 <summary>
元素右侧会有一个箭头来只是当前内容展开、收起状态的。通常写网页时,都需要将这个箭头样式去掉,替换成我们设计所需要的那个样子。
去掉这个箭头我们要从渲染引擎出发:Webkit 和 Gecko。
Webkit
使用 Webkit 引擎的主要浏览器包括:Chrome 和 Safair。我们以 Chrome 为例,Safair 于此类似。
下面是箭头部分的样式,它是用伪元素 ::-webkit-details-marker
模拟的:
summary::-webkit-details-marker {
display: inline-block;
width: 0.66em;
height: 0.66em;
margin-inline-end: 0.4em;
}
复制代码
感觉样式,去掉箭头的方式超简单,就是将伪元素设置成 display: none
就可以了。
summary::-webkit-details-marker {
display: none;
}
复制代码
注意:
- Chrome 默认看不见图里标的那个
#shadow root
的,需要在 Chrome 控制台 Settings 中手动勾选 show user agent shadow DOM 选项,这个东西称之为影子树(Shadow DOM),属于 Web Component 的范畴。
- 在上图的影子树中,可以看见一个具有
pseudo="-webkit-details-maker"
属性的 div,这个属性是未被规范化、因历史原因保留的一个属性,summary
元素的那个箭头就是用这个 div 实现的,我们可以使用summary::-webkit-details-maker
控制这个元素的样式,这也是上面去除summary
默认箭头的原理。Firefox 的设置于此稍有不同,接下来讲到。再啰嗦一下,
pseudo
是一个未被标准化的属性。是因为早期,浏览器厂商为了能够控制内部 DOM 结构(internal DOM structures)而引入的一个实验特性,之后为了兼容而得到保留。Shadow DOM 标准出台后,允许我们用其他方式,实现同样的功能。
Gecko
Firefox 使用的是 Gecko 引擎,与 Webkit 不同。如果我们调出 Firefox 的控制台,查看 summary
使用的用户代理就会发现,它是直接将 summary 元素设置成 list-item 元素,展示那个箭头的。
details > summary:first-of-type {
display: list-item;
list-style: disclosure-closed inside;
}
details[open] > summary:first-of-type {
list-style-type: disclosure-open;
}
复制代码
因此重置样式、把箭头去掉时,有两种方式:
// 方式一、将 `summary` 元素的 `list-style` 属性设置为 `none`
summary {
list-style: none;
}
// 方式二、重置 `summary` 元素的 `display` 值,比如 `block`、`inline-block` 之类的
// 不过丢失些许通用性,兼有一些破坏性
// 因此还是推荐第一种方式
summary {
display: inline-block;
}
复制代码
总结
// 代码来源:https://github.com/primer/css/blob/v12.4.0/src/buttons/button.scss#L205
.details-reset {
// Remove marker added by the display: list-item browser default
> summary { list-style: none; }
// Remove marker added by details polyfill
> summary::before { display: none; }
// Remove marker added by Chrome
> summary::-webkit-details-marker { display: none; }
}
复制代码
上面的最终代码是从 Primer CSS 源码中截取的,多了一个去除 Details Polyfill 的样式代码。
现在我们写个简单的自定义样式代码吧。
简单的自定义
// See:https://github.com/primer/css/blob/v12.4.0/src/buttons/button.scss#L205
details {
// Remove marker added by the display: list-item browser default
> summary { list-style: none; }
// Remove marker added by details polyfill
> summary::before { display: none; }
// Remove marker added by Chrome
> summary::-webkit-details-marker { display: none; }
}
// custom style
summary:after {
content: "🙈";
float: left;
}
details[open] summary:after {
content: "🐵";
}
复制代码
参考链接
- The details and summary elements, by Tom Leadbetter.
- Primer CSS source code, by Github.
贡献指北
感谢你花费宝贵的时间阅读这篇文章。
如果你觉得这篇文章让你的生活美好了一点点,欢迎给我鼓(diǎn)励(zàn)😀。如果能在文章下面留下你宝贵的评论或意见是再合适不过的了,因为研究证明,参与讨论比单纯阅读更能让人对知识印象深刻😉~。
(完)