Tính năng CSS mới của 2026 đáng dùng ngay

Mỗi tháng, đội ngũ web.dev lại đăng một “Baseline digest”: danh sách ngắn các tính năng của nền tảng web đã trở nên đáng tin cậy trên các trình duyệt chính. Phần lớn người đọc lướt qua, gật đầu rồi quay lại công việc. Nhưng với một studio nhỏ hay người phụ trách web nội bộ, những danh sách này là bộ lọc hữu ích. Chúng cho biết bạn có thể thôi “giả lập” những thứ gì bằng JavaScript hoặc plugin phụ. Dưới đây là cách chúng tôi đọc các bản digest tháng 1 và tháng 5 năm 2026, thiên về những gì giúp ích cho các website doanh nghiệp thông thường.

Cách hiểu “newly” và “widely” available

Mỗi bản digest chia tính năng thành hai nhóm. Nhóm “widely available” đã tồn tại đủ lâu để bạn dùng làm mặc định. Nhóm “newly available” chạy được trên các trình duyệt hiện tại nhưng có thể chưa đến được mọi khách truy cập. Quy tắc của chúng tôi: dùng thoải mái nhóm widely available, còn nhóm mới thì dùng khi có phương án dự phòng hợp lý hoặc khi số liệu analytics cho thấy phần lớn khách dùng trình duyệt đời mới.

Tính năng giúp đơn giản hóa form và dialog

:user-invalid

Pseudo-class :invalid cũ khớp với một trường form ngay khi trang tải, đó là lý do nhiều website hiện viền đỏ báo lỗi trên các trường trống khi chưa ai gõ gì. Bản digest tháng 5 liệt kê :user-invalid là widely available. Nó chỉ áp dụng sau khi khách truy cập đã tương tác với trường đó. Với form liên hệ, form yêu cầu báo giá và các bước thanh toán, đây là một cải thiện nhẹ nhàng cho cảm giác sử dụng trang, không cần script.

:open

Cũng trong tháng 5, ở nhóm newly available: pseudo-class :open khớp với các phần tử <dialog> và <details> khi chúng đang mở. Nếu bạn làm accordion FAQ hay cửa sổ modal đơn giản, bạn có thể tạo kiểu trực tiếp cho trạng thái mở thay vì bật tắt thêm các class.

ToggleEvent.source

Với các đội dùng Popover API, tính năng này cho biết control nào đã kích hoạt việc bật/tắt. Đây là tiện ích cho lập trình viên, chủ yếu liên quan khi có nhiều nút cùng điều khiển một popover.

Tính năng giúp bố cục và kiểu chữ gọn gàng hơn

Container style queries. Giờ bạn có thể tạo kiểu cho một component dựa trên các custom property đặt ở phần tử cha, không chỉ dựa trên kích thước của nó. Phù hợp với các card hay banner tái sử dụng có giao diện thay đổi tùy vị trí đặt.
Đơn vị lh và rlh. Cả hai đều widely available. Chúng định cỡ theo chiều cao dòng, giúp việc duy trì khoảng cách theo nhịp của văn bản dễ hơn nhiều. Bản digest tháng 1 cũng liệt kê một nhóm đơn vị tương đối theo root (rcap, rch, rex, ric) ở dạng newly available, chủ yếu hữu ích cho việc tinh chỉnh kiểu chữ.
Cú pháp display hai giá trị. Viết display: inline flex thay vì inline-flex hiện đã widely available. Không có thay đổi nhìn thấy được, nhưng nó giúp hành vi bên ngoài và bên trong của một hộp dễ đọc và dễ dạy hơn.
text-decoration-skip-ink: all. Một tinh chỉnh nhỏ cho cách đường gạch chân đi qua các chữ cái.
image-rendering. Tiện để giữ mã QR hoặc đồ họa độ phân giải thấp sắc nét thay vì bị mờ khi phóng to.
clip-path. Được liệt kê là widely available, nên ảnh có hình dạng riêng và các phần cắt không còn cần giải pháp vòng.

Tính năng giúp điều hướng và hoạt ảnh mượt hơn

Bản digest tháng 1 nêu bật Navigation API, một lựa chọn mới thay cho History API hướng đến single-page app, ở dạng newly available. Nó quan trọng nếu bạn duy trì một website chạy bằng JavaScript và vẫn phải chắp vá hành vi nút quay lại. Với website giới thiệu chủ yếu là tĩnh, bạn có thể bỏ qua. Cùng bản digest còn thêm :active-view-transition, chỉ nhắm vào trang trong lúc một view transition đang chạy, và liệt kê animation-composition là widely available để kiểm soát cách các hoạt ảnh xếp chồng kết hợp với nhau.

Về phía JavaScript, các phương thức mảng kiểu “by copy” là toReversed(), toSorted() và toSpliced() hiện đã widely available. Chúng trả về một bản sao đã thay đổi và giữ nguyên mảng gốc, giúp tránh một loại lỗi khó thấy trong code sắp xếp và lọc. Service worker cũng có thể dùng JavaScript module, giúp ích cho các đội chia sẻ code giữa trang và lớp offline.

Điều này có ý nghĩa gì với website doanh nghiệp nhỏ

Lợi ích thực tế là ít code hơn. Mỗi tính năng ở trên thay thế một script, một plugin hoặc một đống utility class. Ít code hơn nghĩa là trang nhanh hơn, ít thứ hỏng khi cập nhật, và bảo trì rẻ hơn. Nó cũng giúp theme luôn gọn nhẹ. Khi xây dựng hoặc chỉnh sửa theme cho khách hàng, đây là kiểu thay đổi chúng tôi cố gắng đưa vào dần dần; bạn có thể xem cách tiếp cận này tại trang theme của chúng tôi.

Khi nào nên bỏ qua hoặc hoãn lại

Nếu website của bạn dùng page builder hoặc theme được tùy biến nhiều, đừng viết lại CSS đang chạy tốt chỉ để dùng thứ mới. Hãy áp dụng tính năng khi bạn chạm vào từng component.
Nếu một tính năng newly available không có phương án dự phòng êm, chẳng hạn kiểu dáng mang tính thiết yếu chứ không chỉ trang trí, hãy chờ đến khi nó được gắn nhãn widely available.
Đừng coi bất kỳ bản digest nào là thay thế cho việc kiểm thử trên các thiết bị mà khách hàng của chính bạn đang dùng.

Một quy trình đơn giản

Lướt qua bản digest hằng tháng và ghi lại những mục liên quan đến form, bố cục hoặc điều hướng.
Thêm một hai mục vào backlog, gắn thẻ theo component mà chúng sẽ cải thiện.
Áp dụng khi bạn chỉnh sửa component đó lần tới, và kiểm tra kết quả trên vài trình duyệt thật.