Hãy khám phá một số tính năng thú vị đã xuất hiện trên trình duyệt web ổn định và thử nghiệm trong tháng 3 năm 2024.
Bản phát hành trình duyệt ổn định
Vào tháng 3 năm 2024, Firefox 124, Safari 17.4 và Chrome 123 đã trở nên ổn định. Bài đăng này đề cập đến các tính năng mới được thêm vào nền tảng web.
Điều chỉnh bảng phối màu bằng light-dark()
Hàm màu light-dark() đã có trong Chrome 123 và giúp bạn dễ dàng điều chỉnh bảng phối màu theo lựa chọn ưu tiên của người dùng hơn.
Trong ví dụ sau, color-scheme được thiết lập thành light dark trên root.
Các thuộc tính tuỳ chỉnh sử dụng hàm màu light-dark() để đặt các màu sẽ được chuyển đổi, tuỳ thuộc vào lựa chọn ưu tiên của người dùng về chế độ sáng hoặc tối.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
Xem thêm ví dụ và thông tin chi tiết trong Các màu phụ thuộc vào CSS color-scheme bằng light-dark()
Kiểm soát dữ liệu đầu vào hiệu quả hơn nhờ field-sizing
Ngoài ra, trong Chrome 123, thuộc tính field-sizing sẽ cho phép tự động phát triển các trường nhập văn bản.
Hỗ trợ trình duyệt
- 123
- x
- x
- x
Khắc phục lỗi dấu câu CJK bằng text-spacing-trim
Trong Chrome 123, thuộc tính text-spacing-trim áp dụng khoảng cách cho các ký tự dấu câu của tiếng Trung, tiếng Nhật và tiếng Hàn (CJK) để điều chỉnh khoảng cách quá mức.
Vui lòng đọc thêm trong phần Giới thiệu 4 tính năng quốc tế mới cho CSS.
Hỗ trợ trình duyệt
- 123
- x
- x
- x
CSS @scope theo quy tắc
Safari 17.4 có
@scope
cho phép bạn chọn các phần tử trong những cây con DOM cụ thể, nhắm mục tiêu chính xác các phần tử mà không cần viết bộ chọn quá cụ thể khó ghi đè cũng như không cần ghép nối bộ chọn quá chặt với cấu trúc DOM.
Tìm hiểu thêm trong phần Giới hạn phạm vi tiếp cận của các bộ chọn bằng CSS @scope theo quy tắc
Các điểm cải tiến ở chế độ hình trong hình
Chrome 123 có hai tính năng giúp cải thiện trải nghiệm hình trong hình.
Đầu tiên là chế độ hiển thị
picture-in-picture của CSS.
Điều này cho phép bạn viết các quy tắc CSS cụ thể chỉ được áp dụng khi
(một phần của) ứng dụng web hiển thị ở chế độ hình trong hình.
Tính năng thứ hai cho phép bạn sử dụng
opener.focus
từ cửa sổ hình trong hình của tài liệu để chuyển tiêu điểm ở cấp hệ thống
đến thẻ sở hữu cửa sổ hình trong hình của tài liệu.
Điều này cho phép bạn đưa thẻ gốc trở lại nền trước khi cần. Ví dụ: khi người dùng cần truy cập vào một trải nghiệm giao diện người dùng không vừa với cửa sổ hình trong hình nhỏ hơn.
Hỗ trợ align-content ở bố cục khối và bảng
Chrome 123 và Safari 17.4 hỗ trợ align-content ở bố cục khối và bảng. Hãy đọc thông tin về thay đổi đối với align-content.
API định tuyến tĩnh của Service Worker
Trên Chrome 123, Service Worker Static Routing API đã có sẵn. API này cho phép bạn tuyên bố cách tìm nạp một số đường dẫn tài nguyên nhất định, nghĩa là trình duyệt không cần chạy một trình chạy dịch vụ chỉ để tìm nạp phản hồi từ bộ nhớ đệm, hay trực tiếp từ mạng.
Tìm hiểu thêm trong phần Sử dụng Service Worker Static Routing API để bỏ qua trình chạy dịch vụ cho các đường dẫn cụ thể.
API Khung hình động dài
Chrome 123 cũng bao gồm API Khung hình động dài, là bản cập nhật cho API Tác vụ dài để giúp bạn hiểu rõ hơn về các bản cập nhật giao diện người dùng (UI) chậm. Việc này có thể giúp xác định các khung ảnh động có tốc độ chậm có khả năng ảnh hưởng đến chỉ số Chỉ số quan trọng chính của trang web Tương tác với nội dung hiển thị tiếp theo (INP). Chỉ số này đo lường khả năng phản hồi hoặc xác định hiện tượng giật khác trên giao diện người dùng ảnh hưởng đến độ mượt.
Hỗ trợ trình duyệt
- 123
- x
- x
- x
Thuộc tính content-visibility
Firefox 124 hỗ trợ thuộc tính content-visibility của CSS.
Thuộc tính này kiểm soát việc một phần tử có hiển thị nội dung của phần tử đó hay không, cho phép các trình duyệt bỏ qua việc hiển thị nội dung cho đến khi cần thiết.
Các lượt thêm vào ArrayBuffer và nhóm mảng
Trong Safari 17.4, JavaScript có một số tính năng mới có hỗ trợ thuộc tính detached cũng như phương thức transfer() và transferToFixedLength() của ArrayBuffer.
Safari 17.4 cũng bao gồm các phương thức nhóm mảng Object.groupBy
và Map.groupBy. Để tìm hiểu thêm về cách nhóm mảng, hãy đọc nội dung JavaScript đang nhận các phương thức nhóm mảng.
Các tính năng này hiện có khả năng tương tác, do đó sẽ tham gia chương trình mới của Baseline.
setHTMLUnsafe và parseHTMLUnsafe
Phương thức setHTMLUnsafe và parseHTMLUnsafe phân phối trong Safari 17.4 cho phép sử dụng DOM bóng khai báo từ JavaScript.
Các phương thức này cũng cung cấp một cách dễ dàng hơn để phân tích cú pháp HTML thành DOM ngay lập tức, so với innerHTML hoặc DOMParser.
Bản phát hành trình duyệt beta
Các phiên bản trình duyệt beta cho bạn xem trước những nội dung sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm tuyệt vời để thử nghiệm hoặc xoá bỏ những tính năng mới có thể ảnh hưởng đến trang web của bạn trước khi cả thế giới nhận được bản phát hành đó. Các phiên bản thử nghiệm mới là Firefox 125 và Chrome 124. Các bản phát hành này mang đến nhiều tính năng tuyệt vời cho nền tảng. Hãy xem ghi chú phát hành để biết toàn bộ thông tin chi tiết. Dưới đây chỉ là một vài điểm nổi bật.
Firefox 125 đang trong quá trình hình thành để là một bản phát hành thú vị.
Thư viện này bao gồm align-content trên các khối, giúp tính năng này có khả năng tương tác.
Cũng được đưa vào và do đó trở thành một phần của Baseline Newly Available (Mới có sẵn của cơ sở) là API Popover. Thuộc tính transition-behavior cũng sẽ được hỗ trợ.
Cửa sổ bật lên và transition-behavior là một phần của Interop 2024.
Chrome 124 bao gồm các phương thức setHTMLUnsafe và parseHTMLUnsafe để cho phép sử dụng DOM tối khai báo qua JavaScript, giúp các tính năng này có thể tương tác. Ngoài ra còn có API WebSocketStream và thuộc tính writingsuggestions.