Goodbye JavaScript: A compilation of CSS features to replace JS in 2026

Popover API: Create pop-ups and dialogs without JavaScript.

Previously, to create a modal window or menu, you needed JavaScript to handle events. click, state management display: block/none and handles closing when clicked outside. The Popover API handles all of this automatically.

For example:

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

Advantage: Automatic key support Esc to close and mechanism "Light Dismiss" (Press outside to close).

Anchor Positioning: Positioning Tooltips and Dropdowns

One of the biggest reasons we use JS (as a library) is... Popper.js nice Floating UI) is used to calculate the position of the dropdown menu so that it does not overflow the screen. Anchor Positioning It is an alternative solution.

For example:

/* 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: Smooth page scrolling effects

Creating progress bar effects when scrolling or parallax effects often consumes a lot of JS resources (because it has to listen for scroll events). scroll (continuously). CSS now has scroll-timeline.

Example: Article reading progress bar

@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: Replace Media Queries for Component

Instead of changing the interface based on screen size (Media Queries), we can change it based on the size of the container itself. This makes components more flexible without needing to use `<div>`. ResizeObserver in JS.

For example:

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

Conclude

The shift from JS to CSS isn't just a trend; it's about optimizing the end-user experience. By utilizing built-in browser features, you can make websites load faster, smoother, and minimize script conflicts.

Reference source: