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

Hãy khám phá một số tính năng thú vị có trên trình duyệt web ổn định và phiên bản thử nghiệm trong tháng 6 năm 2022.

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

Vào tháng 6, Chrome 103Firefox 102 đã trở nên ổn định.

Biến đổi luồng và luồng byte có thể đọc được

Firefox 102 bao gồm tính năng hỗ trợ cho Transform Streaming (Chuyển đổi luồng). Thao tác này sẽ bật đường ống từ ReadableStream đến WritableStream, thực thi phép biến đổi trên các đoạn. Thật tuyệt khi tính năng này hoạt động trên cả ba công cụ, giúp đây là thời điểm rất phù hợp để tìm hiểu về Luồng.

Hỗ trợ trình duyệt

  • 67
  • 79
  • 102
  • 14,1

Nguồn

Các luồng byte có thể đọc hiện cũng được hỗ trợ trong Firefox 102, cho phép trình đọc BYOB (mang bộ đệm của riêng bạn) qua giao diện ReadableStreamBYOBReader. Bạn có thể dùng dịch vụ này để truyền trực tuyến dữ liệu do nhà phát triển cung cấp.

Hỗ trợ trình duyệt

  • 89
  • 89
  • 102
  • x

Nguồn

Truy cập phông chữ được cài đặt trên máy

Chrome 103 bao gồm API Truy cập phông chữ cục bộ, cho phép truy cập vào phông chữ được cài đặt trên máy của người dùng. Sau khi yêu cầu quyền truy cập vào các phông chữ đã cài đặt trên thiết bị, hãy gọi window.queryLocalFonts() để nhận một dãy các phông chữ đã cài đặt.

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

Tính năng đa phương tiện update

Firefox 102 có tính năng đa phương tiện update. Thuộc tính này dùng để truy vấn xem thiết bị đầu ra có thể sửa đổi giao diện của nội dung sau khi kết xuất hay không.

Hỗ trợ trình duyệt

  • 113
  • 113
  • 102
  • 17

Nguồn

Mã trạng thái HTTP mới – 103 gợi ý sớm

Chrome 103 thêm mã trạng thái mới HTTP 103 Gợi ý sớm. Nếu máy chủ hoặc CDN biết rằng cần có một nhóm tài nguyên phụ nhất định để tải trang, thì trình duyệt có thể khuyên trình duyệt nên kết nối trước với các nguồn gốc hoặc thậm chí là tải trước tài nguyên khi trang yêu cầu các tài nguyên đó đến. Để tận dụng tính năng này, bạn cần cập nhật máy chủ hoặc CDN của mình (hãy tìm hiểu thêm về tính năng Gợi ý sớm).

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 nội dung 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 xoá bỏ những tính năng có thể ảnh hưởng đến trang web của bạn trước khi toàn thế giới ra mắt bản phát hành đó.

Các phiên bản thử nghiệm mới trong tháng 4 là Chrome 104, Firefox 103Safari 16.

Cú pháp mới cho truy vấn phương tiện phạm vi

Chrome 104 cung cấp cú pháp mới cho truy vấn nội dung nghe nhìn theo phạm vi, trong đó có phần thông số kỹ thuật về Truy vấn nội dung nghe nhìn cấp 4. Ví dụ: một truy vấn đa phương tiện trước đây đã được viết như sau:

@media (min-width: 400px) { … }

Bây giờ, bạn có thể viết như sau:

@media (width >= 400px) { … }

Hỗ trợ trình duyệt

  • 104
  • 104
  • 102
  • 16,4

Nguồn

API Khu vực

Chrome 104 trên máy tính cũng có API thu thập khu vực. Tính năng này cho phép cắt và xoá nội dung khỏi video đã quay trước khi chia sẻ.

Safari 16 mang đến một số tính năng chính cho trình duyệt

Safari 16 có vẻ là một bản phát hành thú vị khác của nhóm Safari. Bản phát hành này bổ sung nhiều tính năng có trong Interop 2022. Thật tuyệt khi thấy nhiều tính năng xuất hiện vào thời điểm giữa năm này. Tôi sẽ nêu bật một số tính năng yêu thích của mình ở đây, nhưng hãy xem ghi chú phát hành để biết thêm thông tin.

Cùng với nhiều nhà phát triển, tôi thực sự rất vui mừng khi thấy các truy vấn kích thước hỗ trợ cho Truy vấn vùng chứa, một tính năng hiện cũng đã được ra mắt trong Chrome.

Ngoài ra, trong Safari 16, giá trị subgrid cho grid-template-columnsgrid-template-rows cũng được hỗ trợ. Tính năng này đã có trong Firefox và đang được phát triển trên Chrome, đồng thời cho phép các lưới lồng nhau kế thừa kích thước đường lưới.

Hỗ trợ trình duyệt

  • 117
  • 117
  • 71
  • 16

Nguồn

Ngoài ra, đối với bố cục lưới là khả năng tạo ảnh động cho đường theo lưới.

Hỗ trợ trình duyệt

  • 107
  • 107
  • 66
  • 16

Phương thức showPicker(), cho phép một cách chính tắc để hiển thị bộ chọn ngày, giờ, màu sắc và tệp trong trình duyệt. Bạn có thể tìm hiểu thêm về điều này trong phần hiển thị bộ chọn ngày, giờ, màu sắc và tệp của trình duyệt.

Hỗ trợ trình duyệt

  • 99
  • 99
  • 101
  • 16

Nguồn

Các vấn đề về hỗ trợ tiếp cận cho display: contents cũng đã được giải quyết, giúp tính năng hữu ích này an toàn khi sử dụng mà không có nguy cơ phải xoá các phần tử khỏi cây hỗ trợ tiếp cận.

Các tính năng beta này sẽ sớm ra mắt trên các trình duyệt ổn định.

Một phần trong loạt video New to the web Series