主要观点:介绍了多种 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) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。