CSS năm 2026: Những tính năng mới đang định hình lại phát triển frontend

• Sự tiến hóa của nền tảng CSS đã đạt đến mức mà ngay cả các hoạt ảnh và tương tác phức tạp cũng có thể được triển khai mà không cần JavaScript
• Các tính năng mới được bổ sung hỗ trợ tùy biến <select>, phát hiện trạng thái cuộn, tính toán phần tử anh em, styling dựa trên thuộc tính và nhiều hơn nữa
• Với appearance: base-select và ::picker(select), có thể kiểm soát hoàn toàn giao diện trong khi vẫn giữ khả năng truy cập và hành vi native
• Tận dụng sibling-index() và attr() giúp triển khai hoạt ảnh và styling màu sắc dựa trên dữ liệu một cách ngắn gọn
• Những thay đổi này đồng nghĩa với sự dịch chuyển trong mô hình phát triển frontend: giảm phụ thuộc vào JavaScript, đồng thời tăng khả năng truy cập và tính dễ bảo trì

---

Tổng quan về các tính năng mới của CSS

• Trong CSS năm 2026, nhiều tính năng mới dành cho tương tác và hoạt ảnh đã được giới thiệu
  • appearance: base-select chuyển phần tử <select> sang chế độ có thể tùy biến
  • select::picker(select) là pseudo-element đại diện cho bề mặt dropdown, cho phép style bóng đổ, viền, khoảng cách và hơn thế nữa
  • selectedcontent dùng để style vùng hiển thị của tùy chọn đang được chọn
• Các tính năng liên quan đến cuộn cũng được mở rộng đáng kể
  • ::scroll-button() là các nút điều hướng trái/phải được tự động tạo cho container có thể cuộn
  • ::scroll-marker và ::scroll-marker-group đóng vai trò là dấu phân trang hoặc chỉ báo trực quan
  • scroll-target-group và :target-current giúp tự động highlight liên kết tương ứng với phần hiện đang hiển thị
• Container query dựa trên trạng thái cuộn cũng được bổ sung
  • Với container-type: scroll-state và @container scroll-state(snapped: x), có thể thay đổi style theo vị trí cuộn
• Các tính năng hàm đếm trong cây và tham chiếu thuộc tính có chỉ định kiểu cũng được thêm vào
  • sibling-index() và sibling-count() trả về thứ tự và số lượng của các phần tử anh em
  • attr() cho phép đọc giá trị thuộc tính dưới dạng kiểu như màu sắc để dùng trực tiếp trong thuộc tính CSS
• @starting-style là cú pháp thử nghiệm để định nghĩa style tại thời điểm bắt đầu hoạt ảnh

Demo: tùy biến native HTML <select>

• Phần tử <select> mang lại khả năng truy cập và cấu trúc ngữ nghĩa, nhưng trước đây khả năng kiểm soát style bị hạn chế
• Với các tính năng CSS mới, có thể tùy biến hoàn toàn mà không cần JavaScript
  • Kích hoạt chế độ tùy biến bằng appearance: base-select
  • Dùng select::picker(select) để style bề mặt dropdown
• Các chức năng được trình duyệt tự động xử lý
  • Quản lý overflow: tự động cuộn để dropdown không vượt ra ngoài màn hình
  • Điều chỉnh vị trí neo: tự động chọn vị trí tối ưu theo không gian của viewport
  • Quản lý focus và điều hướng bằng bàn phím: hỗ trợ các phím Arrow, Enter, Escape
  • Tùy chọn nội dung phong phú: có thể chứa nội dung có cấu trúc như icon, label
• Trên các trình duyệt không hỗ trợ, sẽ fallback về <select> mặc định, không cần polyfill riêng

Hoạt ảnh bậc thang với sibling-index()

• Triển khai hoạt ảnh trượt tuần tự khi các tùy chọn trong dropdown mở ra
• sibling-index() trả về thứ tự của phần tử trong nhóm anh em (bắt đầu từ 1)
  • Ví dụ: tùy chọn đầu tiên có độ trễ 0s, tùy chọn thứ hai 0.2s, tùy chọn thứ ba 0.4s
• Ngay cả khi thêm hoặc xóa phần tử, thời gian vẫn được tính lại tự động, giúp dễ bảo trì
• Đơn giản hóa quy trình vốn trước đây phải chỉ định thủ công bằng :nth-child() hoặc thuộc tính tùy chỉnh

Styling dựa trên dữ liệu với attr()

• Dùng phiên bản có chỉ định kiểu của attr() cho phép tận dụng trực tiếp giá trị thuộc tính HTML trong style
  • Ví dụ: có thể đọc thuộc tính data-bg-color bằng background-color: attr(data-bg-color color, transparent) để sử dụng
• Khi chỉ rõ kiểu thuộc tính, trình duyệt sẽ parse chính xác và cũng có thể chỉ định màu fallback
• Có thể xây dựng cấu trúc styling lấy dữ liệu làm trung tâm mà chỉ cần sửa màu trong HTML, không cần thay CSS

So sánh dropdown làm bằng CSS với phiên bản JavaScript

• Nếu triển khai cùng một dropdown bằng JavaScript, sẽ cần hơn 150 dòng code
• Phiên bản CSS có thể đạt cùng chức năng chỉ với một <select> và vài thuộc tính
• Khả năng truy cập native, focus, và điều khiển bằng bàn phím được tự động cung cấp ở cấp nền tảng

Tương lai của CSS và định hướng phát triển

• Các tính năng CSS mới giúp xây dựng UI phức tạp bằng mã khai báo đơn giản
• Nhờ các khả năng được nền tảng cung cấp sẵn, mã trùng lặp và mức độ phụ thuộc vào thư viện bên ngoài giảm xuống
• Trong thời đại AI, cấu trúc đơn giản và mang tính khai báo này giúp tăng độ ổn định của việc sinh mã tự động
• Hướng tiếp cận được khuyến nghị để áp dụng trong thực tế
  • Rà soát lại các UI component hiện đang thiên về JavaScript theo hướng dựa trên CSS
  • Kết hợp kiểm thử khả năng truy cập để xác nhận tương thích với bàn phím và screen reader
  • Liên tục theo dõi tình hình hỗ trợ của trình duyệt để áp dụng dần dần
• Những thay đổi này cho thấy CSS đang nổi lên như công nghệ trung tâm cho tương tác frontend