- Danh sách tổng hợp các tính năng CSS/HTML mới được bổ sung hoặc mở rộng hỗ trợ trong năm nay dưới góc nhìn thực chiến, bao quát rộng từ chuyển đổi UI, biểu mẫu, typography đến CSS hàm
- Các tính năng mới trọng tâm gồm chuyển đổi kích thước sang từ khóa như
auto, HTML popover/invoker, CSS @function·if(); nhiều tính năng hiện vẫn ưu tiên hỗ trợ trên Chrome nên cần chiến lược nâng cấp dần
field-sizing cho input tự mở rộng, Select tùy biến, text-wrap: balance/pretty, easing linear(), đường dẫn shape() giúp nâng chất lượng hiển thị và khả năng sử dụng một cách dễ dàng- Các công cụ điều khiển giá trị và luồng như
attr() được tăng cường, reading-flow để điều khiển thứ tự đọc, calc-size() đang mở rộng phạm vi thiết kế có thể xử lý chỉ bằng CSS
- Nên tiếp tục theo dõi các tính năng vẫn đang trong quá trình chuẩn hóa/hỗ trợ như Masonry,
random(), margin-trim, mở rộng View Transitions; trong khi Container Queries, :has(), dvh đã trở thành kỹ năng cơ bản trong thực tế
Animate to Auto
- Tính năng cho phép chuyển đổi mượt mà giữa giá trị cố định ↔︎
auto ở các phần tử có chiều cao nội dung thay đổi tùy ý
- Có thể khai báo
interpolate-size: allow-keywords ở phạm vi toàn cục để cho phép các chuyển đổi như height: 0 → auto
- Hoặc không cần
interpolate-size, dùng calc-size() để thực hiện chuyển đổi với height: calc-size(auto, size)
- Ưu điểm là loại bỏ các cách làm mong manh trước đây như mẹo
max-height hay đo ngoài màn hình + animation bằng JS, đồng thời giữ nguyên bố cục tự nhiên
- Tình trạng hỗ trợ hiện chủ yếu xoay quanh Chrome; vì animation thuộc nhóm có thì tốt, nên rất phù hợp với PE (Progressive Enhancement)
Popovers & Invokers
- Thuộc tính
popover là tính năng HTML giúp gán hành vi mở/đóng và API JS tương ứng cho một phần tử bất kỳ; đây là dạng overlay nhẹ, khác với modal
- Dùng thuộc tính Invoker có thể điều khiển theo kiểu khai báo mà không cần JS
- Ý nghĩa của nó là tích hợp sẵn ở cấp HTML các phần như khả năng truy cập, điều khiển bàn phím, quản lý focus, giúp giảm rủi ro bỏ sót khi triển khai
- Hỗ trợ: Popover đã khá rộng, còn Invoker vẫn ưu tiên Chrome; một số chi tiết như
popover="hint" còn có khác biệt về mức hỗ trợ
- Có polyfill nên vẫn có thể áp dụng cho các UX thiết yếu
@function
- Đưa hàm do người dùng định nghĩa vào hệ thống hàm giá trị của CSS, cho phép trừu tượng hóa logic dùng chung dưới dạng
@function --foo(--x) { result: ... }
- Giúp loại bỏ lặp lại (DRY) và đơn giản hóa phần khai báo, từ đó cải thiện độ dễ đọc và khả năng bảo trì
- Hỗ trợ hiện ưu tiên Chrome; nếu hợp lý, có thể viết fallback mềm bằng cách khai báo
property: fallback rồi ở dòng sau là property: --func()
- Cần lưu ý là không tương thích với hàm của Sass
if()
- Hàm phân nhánh ở cấp giá trị đầu tiên của CSS, cho phép liệt kê các điều kiện
media()·supports()·style() giống câu lệnh switch để trả về giá trị khớp đầu tiên
- Ví dụ: mô tả
grid-template-columns theo từng breakpoint bằng một khai báo duy nhất
- Tác dụng là cải thiện tính dễ đọc và giảm lặp, đồng thời kết hợp tốt với
@function tùy biến
- Hỗ trợ vẫn ưu tiên Chrome; nên khai báo giá trị fallback trước để áp dụng mẫu PE
field-sizing
- Giới thiệu thuộc tính
field-sizing giúp các phần tử nhập/chỉnh sửa tự động lớn lên theo nội dung
- Trường hợp tiêu biểu là
<textarea> tự tăng chiều cao, ngoài ra còn có thể dùng cho UX resize tức thời ngay trong dòng
- Hỗ trợ hiện có trên Chrome và Safari dự kiến sẽ bổ sung; nếu cần có thể thay bằng JS nhẹ
- Vì đây là tính năng thiên về cải thiện UX chứ không phải bắt buộc, nên rất phù hợp để triển khai dần
Custom Selects
- Hỗ trợ tùy biến hoàn toàn không chỉ giao diện ngoài của
select mà cả UI lựa chọn khi mở ra, sau khi opt-in tường minh
- PE rất tốt: trong môi trường không hỗ trợ sẽ fallback an toàn về
<select> mặc định
- Hỗ trợ hiện ưu tiên Chrome; có thể mở rộng phạm vi kiểm soát bằng
appearance: base-select và ::picker(select)
text-wrap
text-wrap: balance giúp cân bằng độ dài các dòng cho tiêu đề và chữ cỡ lớn, còn text-wrap: pretty cải thiện widow và thẩm mỹ cả trong phần thân bài- Hiệu quả là nâng chất lượng độ dễ đọc và typography, đồng thời cảm nhận được ngay mà không tốn chi phí
- Hỗ trợ:
balance đã rộng rãi, pretty hiện ưu tiên Chrome·Safari và phù hợp với PE
linear() easing
- Khác với từ khóa
linear, hàm linear() cho phép định nghĩa đường cong easing tinh vi bằng số lượng điểm tùy ý, rất phù hợp để tạo các chuyển động phức hợp như bounce
- Trong khi
cubic-bezier() có giới hạn, linear() cung cấp khả năng điều khiển timing chi tiết và hiện đã được hỗ trợ đầy đủ
- Khi cần, vẫn có thể dùng easing được đặt tên hoặc
cubic-bezier() làm fallback
shape()
- Hàm
shape() cải thiện các hạn chế của path() trước đây như chỉ dùng pixel và cú pháp khó dùng, cho phép mô tả đường dẫn tùy ý bằng đơn vị responsive và custom property
- Có thể dùng
clip-path để mask hình dạng tùy ý, dùng offset-path để đặt vị trí/animation theo đường dẫn, và trong tương lai còn dự kiến kết hợp với shape-outside
- Hỗ trợ hiện có trên Chrome·Safari, Firefox đang triển khai sau cờ, nên khi dùng thực tế cần thiết kế fallback đẹp mắt
More Powerful attr()
attr() nay hỗ trợ chỉ định kiểu, nhờ đó có thể đọc trực tiếp các giá trị không phải chuỗi như số, màu sắc từ thuộc tính HTML để dùng làm giá trị CSS- Ý nghĩa là mở rộng các pattern bơm dữ liệu từ markup cho màu chủ đề, bộ đếm, kích thước và nhiều trường hợp khác
- Hỗ trợ hiện ưu tiên Chrome; nên bắt đầu áp dụng dần từ thành phần tăng cường thẩm mỹ thay vì phụ thuộc vào bố cục cốt lõi
Reading Flow
- Giới thiệu thuộc tính
reading-flow giúp điều chỉnh logic thứ tự tab trong các bố cục mà thứ tự hiển thị khác thứ tự source
- Khi tái sắp xếp bằng grid, có thể chỉ định luồng focus phù hợp với kiểu layout như
reading-flow: grid-rows
- Có thể giảm rủi ro accessibility chỉ bằng một dòng khai báo CSS, từ đó tăng độ tự do trong thiết kế layout
- Hỗ trợ vẫn ưu tiên Chrome, nên chưa khuyến nghị tái sắp xếp quá mạnh trước khi có hỗ trợ rộng rãi hơn
Stuff to Keep an Eye On
- Bố cục Masonry vẫn đang được hoàn thiện trong đặc tả; đề xuất
item-flow được kỳ vọng sẽ mở rộng khả năng sắp đặt vượt ra ngoài grid
- Hàm
random() hiện đã có trên Safari, hữu ích để tạo các thiết kế biến hóa giàu biểu cảm
margin-trim khá hữu ích nhưng hiện thiên về Safari; còn sibling-index()/count() có trên Chrome và hữu ích cho stagger animation- Có các tín hiệu tích cực về cross-browser như
view-transition-name: match-element; của View Transitions và việc Firefox đang phát triển hỗ trợ
- Việc hợp lý hóa phép nhân/chia
calc() giữa các đơn vị khác nhau đang gần vượt qua giai đoạn thử nghiệm, hứa hẹn giảm nhu cầu dùng các mẹo ép kiểu trước đây
- Bài viết cũng nêu vấn đề không có cách đặt tên theo phiên bản kiểu “CSS4”, đồng thời giới thiệu danh sách tham khảo tập hợp các tính năng mới trong 5 năm gần đây
Great Stuff to Remember
- Container Queries & các đơn vị liên quan vẫn giữ vị trí nền tảng cốt lõi, được xem là bước tăng năng suất lớn nhất kể từ media query
:has() cho phép chọn theo phần tử cha và trạng thái, mở ra phạm vi ứng dụng rộng để giải quyết các tổ hợp selector phức tạp chỉ bằng CSS- View Transitions, Anchor Positioning, Scroll-Driven Animations đã đến với Safari, giúp hạ thấp rào cản áp dụng trong môi trường làm việc thực tế
- Các đơn vị viewport bổ sung (như dvh) đã vào Baseline, cải thiện độ ổn định của viewport trên thiết bị di động
Điểm nhấn code/cách dùng
- Chuyển đổi kích thước: dùng
interpolate-size: allow-keywords toàn cục hoặc khi toggle trạng thái thì đặt height: calc-size(auto, size) để tạo animation theo chiều cao nội dung
- Phân nhánh grid: dùng pattern
if(media(...): giá trị; ... else: giá trị;) để gom template columns theo từng breakpoint vào một khai báo duy nhất
- Custom Select:
select, ::picker(select) { appearance: base-select } để bật picker tùy biến
- Easing bounce:
animation-timing-function: linear( ... nhiều điểm ... ) để tạo đường cong nảy/giảm chấn tinh chỉnh
- Clip path:
clip-path: shape( ... ) để dựng mask hình học responsive theo tỷ lệ
Hướng dẫn áp dụng thực tế
- Với các hạng mục có độ chênh lệch hỗ trợ giữa các trình duyệt lớn, nên quyết định áp dụng dựa trên thiết kế ưu tiên fallback và hiệu quả so với chi phí triển khai
- Animation, typography, hiệu ứng thị giác là các ứng viên ưu tiên cho PE, còn các phần accessibility cốt lõi như thứ tự focus/tab nên chờ hỗ trợ rộng rãi hơn rồi mới áp dụng
- Với hàm tự định nghĩa/phân nhánh, ROI sẽ cao nhất khi được chuẩn hóa thành pattern dùng chung cho team thông qua tài liệu quy tắc thiết kế kết hợp với token và custom property
- Các cải tiến UX cho biểu mẫu như
field-sizing, Custom Select mang lại lợi ích cảm nhận rõ trong các kịch bản mobile-first
Kết luận
- CSS hiện đại bản 2025 là một năm mở rộng mạnh về hàm giá trị, phân nhánh logic, điều khiển hình dạng, giúp “làm được nhiều việc hơn chỉ với CSS”, và rất đáng để áp dụng dần cùng chiến lược PE
- Một lộ trình thực tế là xây nền bằng các kỹ năng cơ bản như Container Queries,
:has(), đơn vị viewport, sau đó ưu tiên đưa vào các hạng mục hiệu quả cao như animate-to-auto·if()·shape()
3 bình luận
CSS giờ gần như đã trở thành một ngôn ngữ rồi nhỉ. Nó đã cho phép hiện thực logic ở mức khá nhiều rồi nên... Tôi còn tự hỏi đây có còn là stylesheet nữa không.
Nhiều tính năng xịn sắp xuất hiện, những thứ trước giờ phải dùng JavaScript để làm
CSS đúng là đã được cải thiện rất nhiều.