Tạm biệt JavaScript: Tổng hợp các tính năng CSS thay thế JS 2026

Popover API: Làm Pop-up và Dialog không cần JS

Trước đây, để làm một cửa sổ modal hay menu, bạn cần JS để bắt sự kiện click, quản lý trạng thái display: block/none và xử lý đóng khi bấm ra ngoài. Popover API xử lý tất cả những việc này một cách tự động.

Ví dụ:

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

Ưu điểm: Tự động hỗ trợ phím Esc để đóng và cơ chế "Light Dismiss" (bấm ra ngoài để đóng).

Anchor Positioning: Định vị Tooltip và Dropdown

Một trong những lý do lớn nhất chúng ta dùng JS (như thư viện Popper.js hay Floating UI) là để tính toán vị trí của menu thả xuống sao cho không bị tràn khỏi màn hình. Anchor Positioning là giải pháp thay thế.

Ví dụ:

/* 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;
}

Scroll-driven Animations: Hiệu ứng cuộn trang mượt mà

Làm hiệu ứng thanh tiến trình (progress bar) khi cuộn trang hoặc hiệu ứng Parallax thường ngốn rất nhiều tài nguyên JS (vì phải lắng nghe sự kiện scroll liên tục). CSS hiện nay đã có scroll-timeline.

Ví dụ: Thanh tiến trình đọc bài viết

@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();
}

Container Queries: Thay thế Media Queries cho Component

Thay vì thay đổi giao diện dựa trên kích thước màn hình (Media Queries), chúng ta có thể thay đổi dựa trên kích thước của chính container chứa nó. Điều này giúp các component linh hoạt hơn mà không cần dùng ResizeObserver trong JS.

Ví dụ:

.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;
  }
}

Kết luận

Việc chuyển dịch từ JS sang CSS không chỉ là một trào lưu, mà là cách chúng ta tối ưu hóa trải nghiệm người dùng cuối cùng. Bằng cách sử dụng các tính năng có sẵn trong trình duyệt, bạn giúp website tải nhanh hơn, mượt hơn và giảm thiểu tối đa các lỗi xung đột script.

Nguồn tham khảo: