by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11900
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、温故而知新

<details>、<summary>元素我很早就介绍过了，看了一下，居然是2018年，七年前，奶奶的，时间过得也太快了，长叹一口气。

有兴趣访问这里：“借助HTML5 details,summary无JS实现各种交互效果”

本以为这个HTML元素已经很成熟了，结果在接下来的岁月中，其又发生了一些迭代与变化。

首先，哪个三角箭头改为::marker伪元素，和<ul>、<ol>这些元素的项目符号保持一致。

然后，支持name属性，也就是如果多个<details>元素使用同一个name属性值，那么这些<details>元素就会产生关联，每次最多只会展开一个<details>元素，可以实现手风琴这样的展开与收起交互效果。

然后，支持内容元素hash匹配自动展开（本文后面会有案例）。

再到本文要重点介绍的::details-content伪元素，可以匹配内容区域的Shadow DOM元素（见下图示意），目前最具代表性的应用就是实现展开与收起的动画效果。

二、::details-content让任意尺寸展开动画

直接看案例，下面的效果为实时渲染（点击下面的小三角标题）：

//zxx: 如果浏览器版本不足，会看不到动画效果

相关代码如下所示：

<details>
  <summary>欢迎关注我的抖音</summary>
  <p><strong>钓鱼账号：</strong>最会钓鱼的程序员</p>
  <p><strong>技术账号：</strong>张鑫旭本人</p>
</details>

CSS样式部分：

::details-content {
  transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
  height: 0;
  overflow: clip;
}

details {
  interpolate-size: allow-keywords;
}

[open]::details-content {
  height: auto;
}

一些说明

• <details>元素的显隐是通过content-visibility属性（内容隐藏，锚点匹配显示）控制的，所以transition的关键字值之一就是content-visibility属性。
• allow-discrete也是新特性，可以让离散的CSS属性也支持transition过渡效果，例如display属性。详见我之前撰写的这篇文章：“CSS transition-behavior让display none也有动画效果”
• interpolate-size:allow-keywords可以让auto尺寸也能transition过渡效果，这个之前也介绍过，参见“这啥?CSS calc-size和interpolate-size,真学不动了”一文。

上述效果属于渐进增强特性，浏览器不支持也没关系，不影响展开与收起，所以大家放心使用。

三、锚点匹配与自动展开

这个其实也是新的特性，之前没有的，不过这个新特性比较隐蔽。

那就是，如今呢，我家主人已经结成元婴……错了错了，串场了，如今呢，只要<details>元素的内容被URL的hash锚点匹配，那么，<details>元素的会自动展开。

例如：

<details>
    <summary>欢迎关注我的抖音</summary>
    <p id="account1"><strong>钓鱼账号：</strong>最会钓鱼的程序员</p>
    <p id="account2"><strong>技术账号：</strong>张鑫旭本人</p>
</details>

<p>
    <a href="#account1">关注钓鱼账号</a>
    <a href="#account2">关注技术账号</a>
</p>

点击链接，则会看到展开效果，如下GIF录屏示意：

这个效果其实有些类似之前介绍过的hidden="until-found"，有兴趣的可以点击这里进行访问，他也是使用的content-visibility隐藏，同样是锚点匹配，或者被搜索匹配，就会显示，我怀疑这是content-visibility隐藏内容公用特性。

补充小技巧

锚点定位会触发页面的滚动，并将匹配的元素定位在浏览器的上边缘。

这就会有个问题，会将<summary>元素的内容定位在屏幕之外，导致看不到，影响体验。

此时，可以使用CSS scroll-margin-block-start属性进行调整，例如：

details :target {
  scroll-margin-block-start: 6em;
}

此时，定位的滚动位置会距离上边缘6em大小。

四、其他补充信息碎碎念

最后来看一下::details-content伪元素的兼容性，今年所有现代浏览器都已经支持：

看起来像是约好了的，几乎都是同一时间支持的。

语法参考：

selector::details-content

使用示意：

details[open]::details-content {
  /* 样式，CSS属性基本上都支持 */
}

其他碎碎念

人果然是赚不到认知以外的钱的。

记得3年前，疫情刚结束那会儿，还在和我老婆说，我们什么时候也能遇到08年金融危机那种资产大抄底的时候就好了，我老婆也表示赞同。

结果，这一年，我们就把闲钱用来在临港买了套房投资。

尼玛，现在跌到贷款还完都没有多余钱的地步了。

也就是那种资产大跌的时刻其实就在眼前，但是，眼界和认知不足，我们两人完全没有意识到这种情况，要是那时候持有现金，现在换个大房子都没什么压力。

但是，我们又比普通人好一些，风险意识强，量力而为，杠杆小，加上前两年股市低迷的时候，重仓了基金，目前清了70%多，还算游刃有余。

这也符合目前我在整个社会阶层的位置，看明白了这一点，其实心态还是很平和的，人最重要的还是认清自己。

好了，就扯这多吧，如果觉得内容还不错，欢迎分享，点赞，转发！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11900

（本篇完）