HTML 也一直在高速发展，今天我们一起来看看 HTML 最近有哪些值得关注的新特性。

可以定制样式的下拉菜单

浏览器为了保持向后兼容性，并不会贸然改变像 <select> 和 <option> 这些元素的样式。这时候，一个巧妙的引入便是“选择加入”机制，它让开发者在可控的情况下，自由施展创意。起初，大家期待的解决方案是新元素 <selectmenu>，但它在渐进增强的表现上并不理想。最终，CSS 提供了一种更加灵活的方法：

select,
::picker(select) {
  appearance: base-select;
}

这种新方式让 <select> 的内嵌元素能够获得更为自由的样式定义，为我们打开了设计选择控件的新大门。例如，现在你可以在 <select> 中插入按钮和图像，从而创造出更视觉化的用户选择体验：

<select class="country-select">
  <button>
    <selectedoption></selectedoption>
  </button>
  <option value="" hidden>
    <figure></figure>
    <span>选择一个国家</span>
  </option>
  <option value="andorra">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Andorra.svg/120px-Flag_of_Andorra.svg.png" alt="" />
    <span>安道尔</span>
  </option>
  <!-- 更多选项 -->
</select>

可以增加分割线的下拉菜单

讲到 HTML 的老派元素，它们总是能以意想不到的方式令人耳目一新。就像我们熟悉的 <details> 元素通过 name 属性能实现手风琴效果一样经典。在 <select> 菜单中，你也可以用 <hr> 元素来增加一条简单的横线。

这听起来是不是很酷？最初我们可能习惯通过 <optgroup label="组名"> 来进行分组，不过在一些场景中，简单直接的一条线反而能更好地表达层次感和视觉分隔。

比如看下面这个例子：

<select>
   <option>苹果</option>
   <option>橙子</option>
   <option>香蕉</option>
   <hr>
   <option>辣椒</option>
   <option>西葫芦</option>
   <option>西兰花</option>
</select>

这条线安静地躺在菜单中，中规中矩，却直观地将水果与蔬菜分隔开。这样的设计方法无需复杂的代码，却足以为 UI 增添别样的细节，简约而不简单。

直接用操控 Popover

现在，你可以使用按钮轻松开启或关闭一个 Popover，无需编写一行 JavaScript 代码。这为网页交互提供了更为直观的操作方式。

示例：

<button popovertarget="the-popover">打开 Popover</button>

<div popover id="the-popover">
  你好 code秘密花园
  
  <button popovertarget="the-popover">关闭 Popover</button>
</div>

如果你希望用户只需点击 Popover 外部任意位置即可关闭它，那么只需将 popover 属性改为 popover="auto" 即可，这种交互方式通常被称为“轻量级消失”。

这些与按钮关联的目标行为，被称为“调用者（Invoker）”，预示着在未来几年 HTML 将获得更强大的功能。

虽然 Popover 不能像 <dialog> 那样通过表单提交来关闭，但考虑到 Popover 并不是适合放入表单的地方，这点限制反而显得无关紧要。一个有趣的小细节是，你可以将 <dialog> 设为 Popover，从而轻松获得这种按钮操作。

虽然对话框与 Popover 各有差异，但都非常实用。也许它们最重要的两个特性是：它们拥有的焦点限制能力，以及它们被提升到网站渲染的“顶层”，使得无需烦恼 z-index 的调整。

目前，Popover 的位置定位基本上局限于居中或边缘，像对话框一样，还不支持锚点定位。但这种能力预计在 2026 年将实现跨浏览器的兼容。

Checkbox 轻松变身 Toggle

复选框迎来了全新的可能性 — 它们可以在不费吹灰之力的情况下变身为 Toggle 开关。你只需简单地使用一个属性：

<input type="checkbox" switch>

目前这一特性仅在 Safari 浏览器中有效，而且尚未有正式的规范。

使用 <search> 简化搜索

在网页设计中，许多人可能曾一度忘记为搜索区域正确地添加角色属性，或者发现使用 <div role="search"> 不够直观。现在，HTML 提供了一种更加直接的方法：使用 <search> 标签。

<search>
  <!-- 你的搜索表单或组件 -->
</search>

这个小小的标签为开发者提供了一种更简洁、易记的方式来标记页面中的搜索区域。不再需要额外的角色属性，只需简单地将搜索相关的内容包裹在 <search> 标签内，即可保证语义的明确性。

不再需要 noopener noreferrer

在过去的一段时间里，开发者们往往会在使用 _blank 打开新页面的链接中添加 rel="noopener noreferrer" 属性。这种做法主要是为了防患于未然，避免在新开页面中可能出现的安全问题，比如泄露引用者信息或被钓鱼攻击。

<a 
  href="https://conardLi.top" 
  target="_blank"
  rel="noopener noreferrer"
>

但你或许不知道，自从 2021 年开始，主流浏览器（其中最后一个是 Chrome）已经自动为 _blank 链接应用该行为，这意味着这种手动添加的方式在很多情况下已经不再必要。

我个人在项目中也曾因使用代码检查工具（linter）而被时常提醒，继续保持这样的代码习惯。为了确保代码的安全性和兼容性，我们有必要定期审视这些工具的配置，并根据当前的浏览器支持情况进行相应调整。别再为过去的做法感到拘谨，可以在确保安全的情况下，清理那些不再需要的冗余代码，让项目更加简洁高效。

声明式 Shadow DOM

在 Web 组件的发展历程中，过去要想使用 Shadow DOM，只能依赖 JavaScript 渲染。这种实现方式让使用 Shadow DOM 的 Web 组件在服务器端渲染（SSR）上寸步难行，形成了一个关键性短板。然而，所有主要的 UI 框架都越来越重视 SSR，因为它能显著提高性能、加载速度、SEO 以及增强网页的弹性。

随着声明式 Shadow DOM 的出现，这一局限被打破。现在，开发者可以实现完全不依赖 JavaScript 的 Shadow DOM 应用。

声明式 Shadow DOM 被视作一种基础工具，更多时候将由库或框架来封装使用，以提升开发者的体验，而非手动书写。

过去，React 19 是最后一个完整支持 Web 组件的框架。未来，我们可能会看到框架不仅仅是支持 Web 组件，而是全面接受和拥抱它们。也许不久的将来，一个类似于 Next.js 的 Web 组件框架将应运而生。

Import Maps 导入模块

在 JavaScript 开发中，我们习惯了用这样的方式来导入模块：

import React from "react";

乍一看，这似乎是 ES 模块的代码。但如果你仔细观察，会发现字符串里的路径既不是绝对 URL，也不是相对路径。我们只是习惯这么写，因为 JavaScript 打包工具会识别它为 npm 包，并自动从 node_modules 文件夹中查找。

然而，如今情况发生了变化。通过 HTML 的 Import Maps，我们可以将诸如 "react" 这样的值映射到实际的 URL 上，从而直接在浏览器中导入。

举个例子，如果你从一个包含如下 Import Map 的 HTML 文件中执行上述 JavaScript：

<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18",
      "reactdom": "https://esm.sh/react-dom@18"
    }
  }
</script>

那么，这段代码将能够从指定的位置导入 React 和 React DOM，而不需要借助打包工具。这样一来，即使省去繁杂的工具配置，依然可以保持模块导入的抽象化。

让页面静止：inert 属性

在前端开发中，有时我们需要将某些元素暂时“隐藏”起来，从用户视角和交互上完全忽略。这时，新的 inert 属性就派上了用场。通过简单地设置元素的 inert 属性，整个元素及其子元素会从交互中消失。它们无法被点击、聚焦，也会从可访问性树中移除，甚至页面的“查找”功能也无法选中其中的文本。

这项功能在构建复杂交互时显得尤其有用。例如，在一个多步骤的表单中，可以将所有步骤预先放在 DOM 中，但将不当前步骤的部分设置为 inert，确保用户无法误用到未来或已完成的步骤，这样的做法会极大提升用户体验和流程的严谨性。

有人可能会想到用这功能来实现模态框（modal），而 HTML 中的 <dialog> 标签为此提供了天然支持，使得构建和管理模态框变得更加简单和灵活，只需适当地使用即可。

多页面视图过渡

在以往的前端开发中，页面之间的跳转常常是直接刷新导致的生硬切换。然而，现在通过加入简单的 CSS 规则，我们可以实现流畅的多页面视图过渡：

@view-transition {
  navigation: auto;
}

一旦启用这一特性，常规点击链接导致的新页面跳转（在同一域名内）将能具备视图过渡效果。默认情况下，这将为页面切换添加淡入淡出的效果，令用户的浏览体验更加顺滑。同时，这也为开发者提供了丰富的动画控制，能在页面加载之间设计出更加吸引人的过渡效果。

虽然视图过渡依赖于 CSS 的开启，但其真正的魅力和实用性更多地体现在 HTML 的应用中。想象一下如下代码：

<!-- 首页 -->
<div class="card">
  <h3 style="view-transition-name: post-title-087afd;">博客文章标题</h3>
  <p>...</p>
  <a href="/blog-post">阅读完整文章《博客文章标题》</a>
</div>

<!-- 博客文章页 -->
<article>
  <h1 style="view-transition-name: post-title-087afd;">博客文章标题</h1>
  <p>...</p>
</article>

在这个例子中，我们将“卡片”视作一种从数据中生成的组件，并且这种组件可能是页面上的众多之一。因此，使用唯一的 view-transition-name 是实现细腻过渡效果的关键，而最好的介入点无疑是在 HTML 之中。

响应式视频

现代网页设计中，响应式图像已经是提升网站性能和用户体验的常用技术。通过 HTML 提供的 <picture> 元素，我们可以灵活地控制 <source> ，根据不同条件切换源图像，实现了内容的最佳展示。这个强大的概念原本源自 <video> 标签，但由于一些原因，它曾从大多数浏览器中消失。然而，如今得益于 Scott Jehl 和他的团队的努力，这一功能荣耀归来。

借助 media 属性，我们能够为视频源添加条件控制。虽然在实践中，更多的可能是用于宽度查询，但它几乎能处理任何媒介特性。以下是一个简单的例子：

<video autoplay controls playsinline muted loop>
  <source media="(orientation: landscape)" src="sunset-landscape-1080.mp4">
  <source src="sunset-portrait-1080.mp4">
</video>

在这个例子中，我们根据设备的方向进行视频选择：在横向（landscape）模式下加载一个视频文件，而在其他情况加载另一个。这使得视频内容可以根据用户的设备特性进行动态调整，不仅保证了视觉效果的一致性，也显著优化了网络性能。

详细了解请看这个例子：https://www.htmhell.dev/adventcalendar/2024/19/

利用 <details> 标签创建交互式手风琴效果

在网页设计中， <details> 和 <summary> 标签已经被广泛使用，以便创建简洁的折叠内容。自 2016 年以来，浏览器对这对标签的支持已经成熟，不过近来这些功能又有了新的增强和清理。

开发者现在可以通过使用 name 属性将 <details> 元素组合在一起，从而实现“独占”手风琴效果——即一次只能打开一个内容块：

<details name="group"><summary>第一项</summary> ... </details>
<details name="group"><summary>第二项</summary> ... </details>
<details name="group"><summary>第三项</summary> ... </details>
<details name="group"><summary>第四项</summary> ... </details>

虽然有些人认为一次只能打开一个是反用户体验的，因为它会自动关闭用户可能想保持打开的内容，但在特定的网页设计中这一特性可能会很有效。然而，使用“手风琴”这个术语来描述这种模式还是颇为恰当的。同时，我们也必须注意到，使用这种模式在可访问性上可能存在一些问题。例如，用于常见问题解答部分时，如果每个问题通常会作为类似 <h3> 这样的标题，那么 <summary> 会将这种语义抹去，使其变成一个“按钮”。这种做法在语义上不够理想。

此外， <details> 元素可以在 Flexbox 布局中使用，表现得体。然而，仅最近这些表现有所改进。

在 CSS 方面，现在引入了一个新的选择器 ::details-content，帮助我们访问和处理 <details> 中的 HTML 内容。这使得创建带有动画效果的折叠内容变得更加简便，只需利用 HTML 和 CSS 即可实现开关动画。

阅读原文：原文链接