关于 HTML 进入 2025 年你应该知道的相对较新的事情

主要观点:介绍了多种 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>样式化演示、多页视图过渡示例等。
阅读 4
0 条评论