What’s !important #13: Khám phá sức mạnh của @function, hàm alpha() và những cập nhật CSS mới nhất

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• @function chính thức trở thành tính năng CSS quan trọng nhất trong năm nay, mở ra khả năng tùy biến logic mạnh mẽ.
• Hàm alpha() mới giúp việc quản lý độ trong suốt của màu sắc trở nên linh hoạt và ngắn gọn hơn so với cách truyền thống.
• Các cập nhật về UX cho thẻ <dialog> và hướng dẫn về Grid Lanes giúp lập trình viên tối ưu hóa giao diện web hiện đại.

Chào mừng các bạn quay trở lại với series "What’s !important", nơi chúng ta cùng cập nhật những thay đổi nóng hổi nhất của công nghệ web. Trong số thứ 13 này, chúng ta sẽ đi sâu vào những tính năng CSS mới đang làm thay đổi cách chúng ta viết code hàng ngày.

1. Làm chủ CSS @function

CSS đang ngày càng trở nên mạnh mẽ hơn với sự xuất hiện của @function. Đây được dự đoán là tính năng CSS quan trọng nhất đạt chuẩn Baseline trong năm nay. Nếu bạn cảm thấy bối cảnh này có phần "đáng sợ", đừng lo lắng. Jane Ori đã có một bài hướng dẫn từng bước rất chi tiết, giúp bạn làm quen với cú pháp và cách áp dụng @function vào dự án thực tế. Ngoài ra, bạn có thể tra cứu tài liệu kỹ thuật do Declan Chidlow biên soạn để nắm vững cách sử dụng.

2. Hàm alpha() - Bước tiến mới trong quản lý màu sắc

Một trong những điểm nhấn thú vị là hàm alpha(). Nhiều lập trình viên tự hỏi tại sao chúng ta cần nó khi đã có các hàm màu như oklch(). Dưới đây là bảng so sánh sự khác biệt:

Phương pháp	Cú pháp	Ưu điểm
Truyền thống	oklch(from var(--color) l c h / 0.5)	Chi tiết, kiểm soát cao
Mới (alpha)	alpha(from var(--color) / 0.5)	Ngắn gọn, rõ ràng ý định

Việc sử dụng alpha() giúp code của bạn trở nên "sạch" hơn, giảm bớt sự phụ thuộc vào việc hard-code giá trị màu và giúp việc truyền biến CSS trở nên linh hoạt hơn bao giờ hết.

3. Nâng cấp trải nghiệm với

Una Kravets đã chia sẻ những cải tiến đáng giá cho thẻ <dialog>, đặc biệt là thuộc tính closedby và overscroll-behavior: contain. Những thay đổi này giải quyết các vấn đề UX kinh điển như:

• Layout shift: Khi thanh cuộn biến mất đột ngột.
• Light dismiss: Kiểm soát việc đóng dialog khi click ra ngoài.

Sơ đồ quy trình xử lý dialog tối ưu:
[Kích hoạt Dialog] ➔ [Thiết lập overscroll-behavior: contain] ➔ [Sử dụng closedby="any"] ➔ [Trải nghiệm mượt mà]

4. CSS Day 2026 và CSS Wordle

Hội nghị CSS Day 2026 vừa diễn ra tại Amsterdam đã mang đến nhiều kiến thức chuyên sâu. Dù không có livestream, bạn vẫn có thể theo dõi các slide và nội dung thảo luận trên Bluesky. Sau khi đã "căng não" với các kiến thức mới, đừng quên thử sức với CSS Wordle của Sunkanmi Fafowora – một trò chơi cực kỳ gây nghiện cho dân lập trình.

5. Cập nhật tính năng nền tảng web

Chrome 149 mang đến nhiều cải tiến đáng chú ý:

• Gap decorations: Đã đạt chuẩn Baseline.
• image-rendering: crisp-edges: Hỗ trợ tốt hơn cho việc hiển thị hình ảnh sắc nét.
• Shape-outside: Cập nhật hỗ trợ các hàm rect() và xywh().

Việc làm chủ các kỹ thuật CSS hiện đại không chỉ dừng lại ở các hàm mới, mà còn là cách bạn kết hợp chúng với các kỹ thuật dịch chuyển phần tử như Tìm hiểu hàm CSS translate(): Kỹ thuật dịch chuyển phần tử chuyên sâu trong thiết kế Web để tạo ra những giao diện sống động và chuyên nghiệp hơn.