Điểm mới trên nền tảng web vào tháng 3

Khám phá một số tính năng thú vị đã có mặt trên các trình duyệt web ổn định và thử nghiệm trong tháng 3 năm 2024.

Rachel Andrew

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 xem xét 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 cho phù hợp với lựa chọn ưu tiên của người dùng. Trong ví dụ sau, color-scheme được đặt 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 màu sẽ được chuyển đổi tuỳ thuộc vào chế độ sáng hoặc tối mà người dùng ưu tiên.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Tìm thêm ví dụ và thông tin chi tiết trong các màu phụ thuộc vào color-scheme của CSS với light-dark()

Hỗ trợ trình duyệt

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Nguồn

Kiểm soát tốt hơn dữ liệu đầu vào bằng field-sizing

Ngoài ra, trong Chrome 123, thuộc tính field-sizing cho phép các trường nhập văn bản tự động tăng kích thước.

Hỗ trợ trình duyệt

  • Chrome: 123.
  • Edge: 123.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nguồn

Khoảng cách giữa các ký tự cho 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 giữa các chữ cái cho các ký tự dấu câu tiếng Trung, tiếng Nhật và tiếng Hàn (CJK) để điều chỉnh khoảng cách quá lớn. Vui lòng đọc thêm trong bài viết Giới thiệu 4 tính năng quốc tế mới cho CSS.

Hỗ trợ trình duyệt

  • Chrome: 123.
  • Edge: 123.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nguồn

Quy tắc at-rule CSS @scope

Safari 17.4 bao gồm @scope cho phép bạn chọn các phần tử trong các 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 các bộ chọn quá cụ thể khó ghi đè và không ghép nối bộ chọn quá chặt chẽ với cấu trúc DOM.

Tìm hiểu thêm trong bài viết Giới hạn phạm vi của bộ chọn bằng quy tắc tại @scope CSS

Hỗ trợ trình duyệt

  • Chrome: 118.
  • Edge: 118.
  • Firefox: phía sau một cờ.
  • Safari: 17.4.

Nguồn

Cải tiến tính năng 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 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 để đưa 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.

Thao tác này cho phép bạn đưa thẻ ban đầu 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 giao diện người dùng không vừa trong cửa sổ hình trong hình nhỏ hơn.

Hỗ trợ align-content trong bố cục khối và bảng

Chrome 123 và Safari 17.4 hỗ trợ align-content theo bố cục khối và bảng. Đọc về thay đổi đối với tính năng hỗ trợ align-content.

API định tuyến tĩnh của Worker dịch vụ

Từ Chrome 123, bạn có thể sử dụng API Định tuyến tĩnh của Worker. API này cho phép bạn khai báo 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 trình chạy dịch vụ chỉ để tìm nạp phản hồi từ bộ nhớ đệm hoặc trực tiếp từ mạng.

Tìm hiểu thêm trong phần Dùng API Định tuyến tĩnh của Service Worker để bỏ qua trình chạy dịch vụ đối với các đường dẫn cụ thể.

API Khung hoạt ảnh dài

Chrome 123 cũng bao gồm API Khung ảnh động dài. Đây 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) bị chậm. Điều này có thể hữu ích khi xác định các khung ảnh động 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

  • Chrome: 123.
  • Edge: 123.
  • Firefox: không được hỗ trợ.
  • Safari: không được hỗ trợ.

Nguồn

Thuộc tính content-visibility

Firefox 124 hỗ trợ thuộc tính CSS content-visibility. Thuộc tính này kiểm soát việc một phần tử có hiển thị nội dung hay không, cho phép trình duyệt bỏ qua việc hiển thị nội dung cho đến khi cần.

Hỗ trợ trình duyệt

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Nguồn

Các thành phần bổ sung vào ArrayBuffer và nhóm mảng

Trong Safari 17.4, JavaScript có một số tính năng mới hỗ trợ thuộc tính detached và các phương thức transfer() và transferToFixedLength() của ArrayBuffer.

Hỗ trợ trình duyệt

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Nguồn

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ề tính năng nhóm mảng, hãy đọc bài viết JavaScript đang nhận các phương thức nhóm mảng.

Hỗ trợ trình duyệt

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4.

Nguồn

Các tính năng này hiện có khả năng tương tác nên sẽ được đưa vào phần Mới có trong Baseline.

setHTMLUnsafe và parseHTMLUnsafe

Phương thức setHTMLUnsafe và parseHTMLUnsafe vận chuyển 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 một cách bắt buộc vào DOM, so với innerHTML hoặc DOMParser.

Bản phát hành trình duyệt thử nghiệm

Các phiên bản trình duyệt beta cho bạn xem trước những tính năng sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm thích hợp để kiểm thử các tính năng mới hoặc xoá bớt. Những tính năng này có thể ảnh hưởng đến trang web của bạn trước khi chúng tôi ra mắt bản phát hành đó. Các bản thử nghiệm beta 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 tất cả thông tin chi tiết. Sau đây là một số điểm nổi bật.

Firefox 125 đang được định hình để trở thành một bản phát hành thú vị. Tệp này bao gồm align-content trên các khối, giúp tính năng này có thể tương tác. Ngoài ra, Popover API cũng được đưa vào và trở thành một phần của API cơ sở mới có. Thuộc tính transition-behavior cũng sẽ được hỗ trợ. Popover 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 bóng đổ khai báo từ JavaScript, giúp các tính năng này tương tác được với nhau. Ngoài ra, còn có WebSocketStream API và thuộc tính writingsuggestions.