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

Khám phá một số tính năng thú vị đã ra mắt trong trình duyệt web phiên bản ổn định và thử nghiệm vào tháng 9 năm 2024.

Vào tháng 9 năm 2024, Firefox 130, Safari 18Chrome 129 đã 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.

Các nút bật/tắt độc quyền có thuộc tính name cho <details>

Firefox 130 hỗ trợ thuộc tính name của phần tử <details>. Thao tác này sẽ nhóm các phần tử <details>, trong đó mỗi lần chỉ có một phần tử trong nhóm có thể mở được. Điều này cho phép bạn tạo một accordion độc quyền mà không cần sử dụng JavaScript.

Hỗ trợ trình duyệt

  • Chrome: 120.
  • Cạnh: 120.
  • Firefox: 130.
  • Safari: 17.2.

Tạo ảnh động tự động (và nhiều hiệu ứng khác)

Chrome 129 thêm thuộc tính interpolate-size CSS và hàm calc-size().

Thuộc tính interpolate-size của CSS cho phép một trang chọn sử dụng ảnh động và hoạt động chuyển đổi các từ khoá định kích thước nội tại CSS, chẳng hạn như auto, min-contentfit-content, trong trường hợp các từ khoá đó có thể là ảnh động.

Hỗ trợ trình duyệt

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

Nguồn

Hàm calc-size() CSS là một hàm CSS tương tự như calc(), tuy nhiên, hàm này cũng hỗ trợ các thao tác trên đúng một từ khoá định cỡ được hỗ trợ. Các từ khoá định cỡ được hỗ trợ là auto, min-content, max-contentfit-content.

Hỗ trợ trình duyệt

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

Nguồn

Tìm hiểu thêm trong phần Tạo ảnh động cho chiều cao: auto; (và các từ khoá định cỡ nội tại khác) trong CSS.

Định dạng thời lượng trong JavaScript

Ngoài ra, trong Chrome 129 còn có Intl.DurationFormat, cung cấp một phương thức định dạng thời lượng, ví dụ: "1 giờ 40 phút 30 giây", hỗ trợ nhiều ngôn ngữ.

Hỗ trợ trình duyệt

  • Chrome: 129.
  • Cạnh: 129.
  • Firefox: không được hỗ trợ.
  • Safari: 16.4.

Nguồn

WebCodecs API

Web Codecs API hiện được hỗ trợ trên máy tính trong Firefox 130, cho phép các nhà phát triển web truy cập cấp thấp vào từng khung hình của luồng video và các đoạn âm thanh. Các giao diện mới bao gồm: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrameVideoColorSpace. API này chưa hoàn toàn cung cấp Baseline Newly vì nó chưa được hỗ trợ trong Firefox Android, tuy nhiên vẫn có tính năng hỗ trợ Firefox Nightly cho Android.

Hỗ trợ trình duyệt

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Nguồn

Truy vấn kiểu CSS cho cơ sở lưu trú tuỳ chỉnh

Safari 18 hỗ trợ một số tính năng mới, bao gồm cả Truy vấn kiểu CSS. Truy vấn kiểu cung cấp một cách để tạo kiểu có thể sử dụng lại và áp dụng các kiểu đó dưới dạng một nhóm. Ví dụ: khi bạn có một thành phần có thể sử dụng lại với nhiều biến thể.

Hỗ trợ trình duyệt

  • Chrome: 111.
  • Cạnh: 111.
  • Firefox: không được hỗ trợ.
  • Safari: 18.

Nguồn

Tìm hiểu thêm về truy vấn kiểu CSS.

Chuyển đổi chế độ xem tài liệu giống nhau

Safari 18 cũng hỗ trợ các hiệu ứng chuyển đổi chế độ xem tài liệu tương tự cho SPA, cho phép bạn tạo hiệu ứng chuyển đổi trực quan giữa nhiều trạng thái của ứng dụng.

Hỗ trợ trình duyệt

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

Nguồn

Tìm hiểu thêm về chuyển đổi chế độ xem tài liệu giống nhau

Bản phát hành trình duyệt beta

Phiên bản trình duyệt beta cho phép 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 131, Chrome 130Safari 18.1. 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. Sau đây là một vài điểm nổi bật.

Firefox 131 bao gồm trình trợ giúp biến lặp JavaScriptCookie có trạng thái phân vùng độc lập (CHIPS) hiện đã được bật.

Chrome 130 hỗ trợ box-decoration-break: clone cho cả tính năng phân mảnh cùng dòng (bố cục dòng) lẫn phân mảnh khối (các mảnh được tạo để in và nhiều cột). Ngoài ra, tính năng báo cáo lỗi trong IndexedDB cũng tốt hơn và có một thuộc tính connected mới cho giao diện SerialPort của Web Serial.

Safari 18.1 là bản phát hành sửa lỗi cho các tính năng hiện có.