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.
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 đã 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
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-content
và fit-content
, trong trường hợp các từ khoá đó có thể là ảnh động.
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-content
và fit-content
.
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ữ.
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
, VideoFrame
và VideoColorSpace
. 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.
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ể.
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.
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 130 và Safari 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 JavaScript và Cookie 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ó.