主要观点:介绍了多种 HTML 相关的新特性和改进,包括可扩展的<details>元素(可实现类似手风琴效果但存在访问限制)、可样式化的<select>(需通过 CSS 触发)、在<select>中添加<hr>、仅用按钮打开/关闭弹出框、将复选框变为切换开关、用<search>包裹搜索区域、无需noopener noreferrer属性、声明式 Shadow DOM 使 Web 组件框架更好、Import Maps 无需打包器、inert属性、保持页面搜索功能正常、多页视图过渡、响应式视频的回归等。
关键信息:
- 2016 年有跨浏览器的
<details>/<summary>支持,近期能力扩展。 - 新的
<select样式化方式需通过 CSS 触发。 - 可在
<select>中添加<hr>进行分组。 - 仅用按钮可控制弹出框的打开和关闭。
- 仅 Safari 支持将复选框变为切换开关。
- 用
<search>包裹搜索区域方便记忆。 - Chrome 2021 年不再自动为
_blank链接添加noopener noreferrer属性。 - 声明式 Shadow DOM 使 Web 组件有服务端渲染能力。
- Import Maps 可通过 HTML 映射模块。
inert属性可隐藏元素及相关 DOM 。hidden="until-found"可隐藏元素但仍可搜索。- 通过 CSS 可为多页视图过渡添加动画控制。
- 响应式视频回归,可通过
<picture>和<source>控制视频源。
重要细节: - 对于
<details>的独占手风琴效果可通过name属性实现,但存在反模式及访问问题。 - 新的
<select样式化示例及相关文章。 - 在
<select>中使用<hr>的示例。 - 弹出框的不同关闭方式及相关概念。
- 复选框变为切换开关的现状及相关讨论。
- 各种 HTML 特性的演示和代码示例,如
<details>的手风琴效果演示、<select>样式化演示、多页视图过渡示例等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。