Đ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ị đã có phiên bản ổn định và phiên bản beta trình duyệt web trong tháng 9 năm 2024.

Rachel Andrew

Bản phát hành trình duyệt ổn định

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

Những đàn phong độc quyền có thuộc tính name dành cho <details>

Firefox 130 hỗ trợ thuộc tính name của phần tử <details>. Nhóm này Các phần tử <details>, trong đó chỉ có một phần tử trong nhóm có thể được mở ở bất cứ lúc nào. Đ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.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

Tạo ảnh động cho chế độ tự động (và nhiều chế độ khác)

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

Thuộc tính interpolate-size CSS cho phép một trang chọn sử dụng ảnh động và chuyển đổi của các từ khoá định cỡ nội tại CSS như auto, min-content và fit-content, trong trường hợp các từ khoá đó có thể tạo ả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 cũng hỗ trợ các thao tác trên chính xác một từ khoá định kích thước được hỗ trợ. Các từ khoá định cỡ được hỗ trợ là auto, min-content, max-content và fit-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.
  • Edge: 129.
  • Firefox: không được hỗ trợ.
  • Safari: 16.4.

Nguồn

API WebCodecs

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, VideoFrame và VideoColorSpace. API này chưa hoàn thiện cung cấp Baseline mới vì chưa được hỗ trợ trên Firefox Android, tuy nhiên, có hỗ trợ Firefox Nightly cho Android.

Hỗ trợ trình duyệt

  • Chrome: 94.
  • Cạnh: 94.
  • Firefox: 130.
  • Safari: 16.4.

Nguồn

Truy vấn kiểu CSS cho thuộc tính 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.

Hiệu ứng chuyển đổi cùng chế độ xem tài liệu

Safari 18 cũng hỗ trợ 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 hình ảnh giữa các trạng thái khác nhau 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 cung cấp cho bạn bản xem trước về những tính năng sẽ có trong phiên bản ổn định của trình duyệt. Đây là thời điểm thích hợp để thử nghiệm các tính năng mới hoặc có thể ảnh hưởng đến trang web của bạn trước khi toàn cầu nhận được bản phát hành đó. Mới phiên bản beta là Firefox 131, Chrome 130, và Safari 18.1. Những 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. Đây chỉ là một vài các điểm nổi bật.

Firefox 131 bao gồm các trình trợ giúp mới liên quan đến biến lặp JavaScript và Cookie có trạng thái phân vùng độc lập (CHIPS) hiện đang bật.

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

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