- Sự phát triển của công nghệ web hiện đại giúp nhiều tác vụ trước đây phải triển khai bằng JavaScript nay có thể thực hiện đơn giản bằng HTML và CSS
- Các kỹ thuật mới như styling theo hướng component, styling phần tử cha, định nghĩa màu tương đối nay đã có thể dùng rộng rãi trên nhiều trình duyệt
- Mang đến cho các nhà thiết kế và lập trình viên những cách đơn giản và hiệu quả hơn để tạo UI component
CSS Container Queries và Style Queries
- Có thể styling theo hướng component
- Truy vấn thông tin về chiều rộng và style của container để áp dụng CSS style
- Hữu ích khi styling các component tái sử dụng có nhiều biến thể
- Tham khảo: Giới thiệu về CSS Style Queries
Cân bằng văn bản (text-wrap: balance)
- Giữ cân bằng về typography
- Tự động tính toán để phân bổ văn bản đồng đều trong tiêu đề, tiêu đề thẻ và các trường hợp tương tự
- Tham khảo: Hướng dẫn của Ahmad Shadeed
Tự động điều chỉnh kích thước trường nhập biểu mẫu
- Tự động hóa kích thước ô nhập
- Kích thước của ô nhập văn bản hoặc menu chọn sẽ tự động điều chỉnh theo nội dung
- Có thể triển khai chỉ với một dòng CSS đơn giản
- Tham khảo: Giải thích của Adam Argyle
Có thể tìm kiếm nội dung ẩn (hidden=until-found)
- Cải thiện khả năng truy cập của UI
- Nội dung ẩn như các phần accordion đang thu gọn vẫn có thể được tìm thấy bằng tìm kiếm trong trang và trên công cụ tìm kiếm
- Tham khảo: Hướng dẫn của Joey Arhar
Hỗ trợ màu sắc độ phân giải cao (OKLCH, OKLAB)
- Hỗ trợ nhiều hơn 50% dải màu
Màu tương đối trong CSS
- Tính toán màu dựa trên màu hiện có
View Transitions API
- Chuyển cảnh mượt mà giữa các màn hình
- Khi chuyển từ màn hình hiện tại sang màn hình mới, có thể tạo chuyển tiếp mượt bằng CSS animation
- Hỗ trợ chuyển tiếp trong một tài liệu hoặc giữa hai tài liệu
- Tham khảo: Hướng dẫn của Bramus Van Damme
CSS Scroll Snap
- Mang lại trải nghiệm cuộn chính xác
Styling phần tử cha (:has)
- Styling phần tử cha dựa trên trạng thái của phần tử con
Các tính năng đáng chú ý khác
- Cải thiện styling trạng thái nhập liệu:
:user-valid, :user-invalid cung cấp phản hồi sau khi người dùng thay đổi dữ liệu nhập
- Tối ưu bàn phím trên di động: cải thiện bàn phím ảo với
inputmode và enterkeyhint
- Phần tử HTML
<dialog>: triển khai modal và popover có khả năng truy cập tốt
Kết luận
- Các công nghệ frontend mới và thực tiễn đang tạo ra ảnh hưởng mang tính đổi mới cho thiết kế UI và UX
- Những tính năng sẽ được triển khai trong tương lai: layout masonry, tùy biến
<selectmenu>, căn chỉnh hộp văn bản và nhiều hơn nữa
- Xin cảm ơn tất cả các lập trình viên đang nỗ lực phát triển nền tảng web, và hy vọng bài viết này sẽ hữu ích trong việc cải thiện dự án cũng như ứng dụng của bạn. Chúc bạn làm việc vui vẻ!
4 bình luận
Như người khác cũng đã chỉ ra, tác giả dường như hoàn toàn không cân nhắc đến tính tương thích giữa các trình duyệt hay sự nhất quán trong hoạt động. Ngoài điều này ra, còn có những trường hợp cách triển khai hoặc hành vi khác nhau giữa các trình duyệt, nên không thể cứ thế mà chọn các tính năng mới. Dù thị phần của Chrome có cao đến đâu thì vì vẫn có iOS, ít nhất cũng cần cân nhắc xem nó có hoạt động tốt trên Safari hay không.
Tôi đồng ý.. có vẻ sẽ khó để dùng bừa vào sản phẩm.
Safari, Firefox chưa hỗ trợ
hidden=until-found)Firefox chưa hỗ trợ
Trên thực tế, sẽ tiện hơn nếu coi các tính năng frontend mới về cơ bản là tính năng mới riêng của Chrome.
Một ví dụ cực đoan là OffscreenCanvas, có trường hợp mất tới 5 năm. (Chrome 2018, Safari 2023)
Container query và
:hascực kỳ tiện.