再见 JavaScript：2026 年将取代 JS 的 CSS 特性汇总

Popover API：无需 JavaScript 即可创建弹出窗口和对话框。

以前，要创建模态窗口或菜单，需要使用 JavaScript 来处理事件。 click, 国家管理 display: block/none 并能处理点击外部区域时的关闭操作。弹出框 API 会自动处理所有这些操作。.

例如：

<button popovertarget="info-box">Xem chi tiết</button>

<div id="info-box" popover>
  <h3>Thông báo quan trọng</h3>
  <p>Bạn đã mở pop-up này hoàn toàn bằng CSS!</p>
  <button popovertarget="info-box" popovertargetaction="hide">Đóng</button>
</div>

优势： 自动密钥支持 Esc 关闭和机制 "Light Dismiss" （按外侧键关闭）。.

锚点定位：定位工具提示和下拉菜单

我们使用JS（作为库）的最大原因之一是…… Popper.js 好的 Floating UI) 用于计算下拉菜单的位置，使其不会超出屏幕范围。. Anchor Positioning 这是另一种解决方案。.

例如：

/* Gán tên cho phần tử gốc */
.anchor-button {
  anchor-name: --nav-menu;
}

/* Kết nối menu với nút gốc */
.dropdown-menu {
  position: absolute;
  position-anchor: --nav-menu;
  /* Định vị: Nằm dưới nút và căn lề phải */
  position-area: bottom span-right;
  margin-top: 8px;
}

滚动驱动动画：流畅的页面滚动效果

创建滚动时的进度条效果或视差效果通常会消耗大量 JS 资源（因为它必须监听滚动事件）。 scroll （持续地）。CSS 现在有 scroll-timeline.

示例：文章阅读进度条

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: gold;
  transform-origin: 0 50%;
  /* Liên kết animation với việc cuộn trang */
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

容器查询：替换组件的媒体查询

与其根据屏幕尺寸（媒体查询）改变界面，我们可以根据容器本身的大小来改变界面。这使得组件更加灵活，而无需使用 `<div>` 标签。 ResizeObserver 在JS中。.

例如：

.container {
  container-type: inline-size;
}

/* Khi container rộng hơn 500px, chuyển sang giao diện 2 cột */
@container (min-width: 500px) {
  .card {
    display: flex;
    gap: 20px;
  }
}

得出结论

从 JavaScript 转向 CSS 不仅仅是一种趋势，更是为了优化最终用户体验。通过利用浏览器内置功能，您可以让网站加载更快、更流畅，并最大限度地减少脚本冲突。.

参考来源：