- Năm 2023 là một năm cực kỳ lớn đối với CSS. Nhiều tính năng mới trong CSS và UI đã xuất hiện, giúp hiện thực hóa những điều từng được xem là không thể trên nền tảng web
- Tất cả các trình duyệt lớn đều hỗ trợ container queries, subgrid, bộ chọn
:has() và cả các không gian màu cùng hàm màu mới
- Chrome hỗ trợ animation dựa trên cuộn trang và chuyển đổi mượt mà giữa các web view chỉ với CSS
- Nhiều thành phần nền tảng mới cũng được đưa vào để cải thiện trải nghiệm lập trình viên, như CSS nesting và scoped styles
Architectural foundations
Trigonometric functions
- Chrome 111 hỗ trợ các hàm lượng giác như
sin(), cos(), tan(), asin(), acos(), atan(), atan2()
- Các hàm này rất hữu ích cho animation và bố cục
Complex nth-* selection
- Bộ chọn giả lớp
:nth-child() cho phép chọn phần tử trong DOM theo chỉ số
- Từ Chrome 111, giờ đây có thể truyền tùy chọn một danh sách bộ chọn vào
:nth-child() và :nth-last-child()
Scope
- Chrome 118 hỗ trợ
@scope, cho phép giới hạn phạm vi khớp bộ chọn vào một cây con cụ thể của tài liệu
- Cây con được đặt phạm vi được xác định bằng scope root và scope limit tùy chọn
Nesting
- Trước khi có nesting, mọi bộ chọn đều phải được khai báo riêng rẽ một cách tường minh
- Giờ đây có thể nhóm các quy tắc style liên quan lại với nhau và tiếp tục sử dụng bộ chọn
Subgrid
- CSS
subgrid giúp tạo các grid phức tạp hơn và căn chỉnh tốt hơn giữa các layout con
- Nó cho phép grid bên trong kế thừa các hàng và cột của grid bên ngoài làm của riêng mình
Typography
Initial-letter
- Thuộc tính
initial-letter, bắt đầu từ Chrome 110, là một tính năng CSS nhỏ nhưng mạnh mẽ để thiết lập vị trí của chữ cái đầu
- Có thể đặt chữ cái ở dạng drop cap hoặc nhô lên
text-wrap: balance and pretty
- Nhà phát triển không biết trước kích thước cuối cùng, cỡ chữ, hay thậm chí ngôn ngữ của tiêu đề hoặc đoạn văn
- Hai kỹ thuật xuống dòng văn bản mới là
balance và pretty đã được giới thiệu
Color
HD Color Spaces (Color Level 4)
- Màu mới, nhiều màu hơn, không gian màu mới, các hàm màu và tính năng mới đã được giới thiệu trong năm 2023
- CSS và màu sắc giờ đây có thể tạo gradient cho màu HDR và nội suy gradient trong các không gian màu khác nhau
color-mix function
- Trộn màu là một tác vụ cổ điển, và giờ đây cũng khả thi trong CSS năm 2023
- Có thể trộn màu với trắng hoặc đen, cũng như trộn độ trong suốt vào màu, và thực hiện điều đó trong không gian màu đã chọn
Relative color syntax
- Cú pháp màu tương đối (RCS) là một cách bổ sung cho
color-mix() để tạo ra các biến thể màu
- RCS cho phép thao tác màu theo cả cách tương đối lẫn tuyệt đối
Responsive Design
Size container queries
- Thay vì dùng thông tin kích thước toàn cục của viewport, container queries hỗ trợ truy vấn phần tử cha bên trong trang
Style container queries
- Style queries cho phép truy vấn giá trị custom property của phần tử cha
:has() selector
- Trong gần 20 năm, các nhà phát triển đã yêu cầu có "bộ chọn cha" trong CSS
- Với bộ chọn
:has(), có thể chọn phần tử .card có ảnh hero là phần tử con, như .card:has(img.hero)
Update media query
- Media query
update cho phép điều chỉnh UI theo tốc độ làm tươi của thiết bị
Scripting media query
- Scripting media query có thể được dùng để kiểm tra JavaScript có khả dụng hay không
Reduced-transparency media query
- Giao diện không mờ đục có thể gây đau đầu hoặc gây khó chịu về mặt thị giác cho nhiều dạng suy giảm thị lực khác nhau
- Media query này cho biết người dùng có thiết lập hệ thống muốn giảm hoặc loại bỏ độ trong suốt trong UI
Interaction
View transitions
- View transitions có tác động lớn đến trải nghiệm người dùng của trang
- Với View Transitions API, có thể tạo chuyển đổi trực quan giữa hai trạng thái trang trong ứng dụng một trang
Linear-easing function
- Hàm
linear() giúp tạo các hàm easing phức tạp một cách đơn giản hơn, đổi lại là mất đi một chút độ chính xác
Scroll End
- Sự kiện
scrollend cung cấp thời điểm hoàn hảo để xác định việc cuộn đã kết thúc, đồng thời hiểu được liệu người dùng còn đang thực hiện cử chỉ hay không
Scroll-driven animations
- Animation dựa trên cuộn trang cho phép liên kết animation tạo bằng CSS hoặc Web Animations API với độ lệch cuộn của scroller
Deferred timeline attachment
- Khi áp dụng animation dựa trên cuộn trang qua CSS, cơ chế tìm scroller điều khiển luôn đi ngược lên cây DOM, nên nó chỉ bị giới hạn trong các tổ tiên cuộn
Discrete property animations
- Animation rời rạc, ví dụ khả năng animation từ
display: none, đã được bổ sung như một tính năng mới trong năm 2023
@starting-style
- Quy tắc CSS
@starting-style được xây dựng dựa trên tính năng web mới cho phép animation từ display: none
Overlay
- Thuộc tính CSS
overlay mới cho phép các phần tử được style ở lớp trên cùng như popover và dialog xuất hiện bằng animation mượt mà từ lớp trên cùng
Components
Popover
- Popover API giúp tạo ra các phần tử nằm nổi lên trên phần còn lại của trang
Horizontal rules in select
- Chrome và Safari trong năm nay đã hỗ trợ khả năng thêm phần tử đường kẻ ngang (thẻ
) bên trong phần tử
:user-valid and invalid pseudo classes
:user-valid và :user-invalid hoạt động tương tự các giả lớp :valid và :invalid, nhưng chỉ khớp với form control sau khi người dùng đã tương tác đáng kể với ô nhập
Exclusive accordion
- Trong Chrome 120, phần tử `` hỗ trợ thuộc tính
name
- Thuộc tính này cho phép nhiều phần tử `` có cùng giá trị
name tạo thành một nhóm ngữ nghĩa
Chưa có bình luận nào.