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 đã ổ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.
Các nút bật/tắt độc quyền có thuộc tính name
cho <details>
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ó thể mở một phần tử trong một nhóm. Đ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.
Browser Support
Tạo ảnh động cho chế độ tự động (và nhiều chế độ khác)
Chrome 129 thêm thuộc tính interpolate-size
CSS 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à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 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 không hoàn toàn giúp
Baseline mới có sẵn vì API này chưa được hỗ trợ trong Firefox Android,
tuy nhiên, Firefox Nightly có hỗ trợ Android.
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ể.
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 giống nhau 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 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
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 để thử nghiệm các tính năng mới hoặc việc xoá những tính năng có thể ảnh hưởng đến trang web của bạn trước khi chúng được phát hành trên toàn thế giới. 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 tất cả 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 trình lặp JavaScript mới và Cookie có trạng thái được phân vùng độc lập (CHIPS) hiện đã được bật.
Chrome 130 hỗ trợ box-decoration-break: clone
cho cả phân mảnh cùng dòng (bố cục dòng) và 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ó.