CSS 2026 Đang "Nổ Tung": sibling-index(), corner-shape(), và Hàng Loạt API Mới Đổ Bộ Cùng Lúc

CSS đang trải qua cuộc cách mạng thầm lặng nhất trong lịch sử của nó

Nếu bạn chưa theo dõi changelog của Chrome, Firefox và Safari gần đây, bạn đang bỏ lỡ điều gì đó thực sự thú vị. Năm 2026, các trình duyệt lớn đang ship tính năng CSS mới với tốc độ chưa từng có — và không phải những tính năng nhỏ nhặt. Đây là những thứ thay đổi cách chúng ta viết giao diện từ gốc rễ.

sibling-index(): Khi CSS biết vị trí của mình trong DOM

Theo CSS-Tricks, hàm sibling-index() đang được giới developer khai thác theo những cách cực kỳ sáng tạo. Tính năng này cho phép CSS tính toán dựa trên vị trí của một phần tử so với các "anh chị em" của nó trong DOM — thứ mà trước đây bắt buộc phải dùng JavaScript hoặc inline style hardcode.

Ứng dụng thực tế ngay lập tức: tạo gradient màu sắc tự động theo danh sách chỉ với một dòng CSS, hay thậm chí xây dựng hiệu ứng cuộn xoắn ốc (spiral scrollytelling) hoàn toàn bằng CSS thuần. Không cần một dòng JS nào. Đây không còn là CSS "hacky" — đây là CSS có khả năng lập trình thực sự.

corner-shape() và scroll-driven animations: Combo đáng sợ

CSS-Tricks ghi nhận rằng property corner-shape() mới đang mở ra khả năng animation rất thú vị khi kết hợp với scroll-driven animations. Vì corner-shape() hoạt động dựa trên toán học thuần túy, nó có thể được animate mượt mà — cho phép tạo ra những hiệu ứng UI với góc cạnh thay đổi theo scroll mà không cần thư viện animation nào. Hãy thử tưởng tượng hero section với border radius "méo dần" khi bạn scroll xuống — tất cả trong vài dòng CSS.

Popover API và Container Queries: Sự đồng thuận hiếm có giữa các trình duyệt

Một trong những tín hiệu đáng mừng nhất là Firefox 149 — giống như Chrome 133 trước đó — đã ship popover=hint, loại popover tự động đóng khi một popover khác mở. Song song đó, Firefox 149 và Safari 26.4 đều đã hỗ trợ querying container chỉ bằng tên (@container name-only) mà không cần kèm điều kiện kích thước.

Điều này có ý nghĩa lớn: chúng ta đang tiến gần hơn bao giờ hết tới thế giới mà một tính năng CSS mới được ship đồng loạt trên tất cả trình duyệt chính trong vòng vài tháng thay vì vài năm.

::search-text: Tùy biến highlight tìm kiếm theo brand

Chrome 144 đã giới thiệu pseudo-element ::search-text mới, cho phép developer tùy biến màu sắc highlight khi người dùng dùng Ctrl+F trên trang. Mặc định Chrome hiển thị màu vàng cho kết quả match và cam cho kết quả hiện tại — nhưng với ::search-text và ::search-text:current, bạn có thể override hoàn toàn theo màu thương hiệu. Nhỏ nhưng là thứ mà designer sẽ rất vui.

background-image + light-dark(): Dark mode chưa bao giờ khai báo dễ thế

Như nhà nghiên cứu browser Bramus đã ghi nhận — và được CSS-Tricks chia sẻ — background-image sắp hỗ trợ hàm light-dark(). Điều đó có nghĩa là bạn sẽ có thể khai báo ảnh nền khác nhau cho dark/light mode ngay trong CSS một dòng, không cần media query, không cần class toggle.

Ý nghĩa với developer Việt Nam

• Giảm phụ thuộc JavaScript: Những tính năng như sibling-index(), corner-shape(), hay scroll-driven animations đang dần thay thế code JS phức tạp bằng CSS khai báo đơn giản hơn — bundle size nhỏ hơn, hiệu năng tốt hơn.
• Interoperability đang tốt hơn hẳn: Firefox và Safari đang bắt kịp Chrome nhanh hơn. Thời đại "chỉ chạy trên Chrome" thực sự đang kết thúc.
• Cần cập nhật kiến thức ngay: Nhiều pattern quen thuộc — JavaScript-based tooltips, JS scroll animations, JS-driven color theming — sắp trở thành legacy code.
• CSS ngày càng là ngôn ngữ lập trình thực sự: Với functions, custom properties, container queries, và giờ là sibling-index(), ranh giới giữa CSS và JS đang mờ dần theo cách thú vị nhất.

"CSS không còn là ngôn ngữ styling đơn giản nữa — nó đang trở thành một trong những công cụ biểu đạt mạnh nhất trên web."

Nhận định của biên tập

Tôi dự đoán rằng trong vòng 12–18 tháng tới, nhiều UI component library lớn sẽ bắt đầu thay thế JavaScript animation và positioning code bằng CSS thuần, giảm đáng kể bundle size. Developer nào nắm vững CSS hiện đại ngay từ bây giờ sẽ có lợi thế cạnh tranh rõ rệt — đặc biệt trong bối cảnh performance web ngày càng quan trọng với người dùng mobile tại Việt Nam.