2025，重新认识 HTML！

<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 中的

多页面视图过渡

在以往的前端开发中，页面之间的跳转常常是直接刷新导致的生硬切换。然而，现在通过加入简单的 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 提供的 元素，我们可以灵活地控制 ，根据不同条件切换源图像，实现了内容的最佳展示。这个强大的概念原本源自 标签，但由于一些原因，它曾从大多数浏览器中消失。然而，如今得益于 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/