浅谈 和

那一天我二十一岁，在我一辈子的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变整天上半明半暗的云。

——王小波《黄金时代》

简介

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;
}
复制代码

注意：

1. Chrome 默认看不见图里标的那个 #shadow root 的，须要在 Chrome 控制台 Settings 中手动勾选 show user agent shadow DOM 选项，这个东西称之为影子树（Shadow DOM），属于 Web Component 的范畴。

3. 在上图的影子树中，能够看见一个具备 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;
}
复制代码

所以重置样式、把箭头去掉时，有两种方式：

// 方式1、将 `summary` 元素的 `list-style` 属性设置为 `none`
summary {
    list-style: none;
}

// 方式2、重置 `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: "🐵";
}
复制代码

参考连接

1. The details and summary elements, by Tom Leadbetter.
2. Primer CSS source code, by Github.

贡献指北

感谢你花费宝贵的时间阅读这篇文章。

若是你以为这篇文章让你的生活美好了一点点，欢迎给我鼓（diǎn）励（zàn）😀。若是能在文章下面留下你宝贵的评论或意见是再合适不过的了，由于研究证实，参与讨论比单纯阅读更能让人对知识印象深入😉~。

（完）