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

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

Rachel Andrew

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

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

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

Firefox 102 hỗ trợ Luồng biến đổi. Thao tác này cho phép chuyển từ ReadableStream sang WritableStream, thực thi một phép biến đổi trên các đoạn. Thật tuyệt khi thấy tính năng này có sẵn trong cả ba công cụ, đây là thời điểm rất thích hợp để tìm hiểu về Luồng.

Hỗ trợ trình duyệt

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Nguồn

Luồng byte có thể đọc hiện cũng được hỗ trợ trong Firefox 102, cho phép trình đọc BYOB (tự mang vùng đệm) bằng giao diện ReadableStreamBYOBReader. Bạn có thể dùng tính năng 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

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

Nguồn

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

Chrome 103 bao gồm Local Font Access API (API truy cập phông chữ trên máy), cho phép truy cập vào phông chữ mà người dùng đã cài đặt trên máy. 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() để lấy một mảng 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 nội dung đó được kết xuất hay không.

Hỗ trợ trình duyệt

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Nguồn

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

Chrome 103 thêm một mã trạng thái mới là 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 một trang, thì máy chủ hoặc CDN có thể đề xuất trình duyệt kết nối trước với các nguồn gốc hoặc thậm chí tải trước các tài nguyên khi trang yêu cầu các tài nguyên đó xuất hiệ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. Hãy tìm hiểu thêm về Gợi ý sớm.

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 chính thức 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 các nội dung bị xoá có thể ảnh hưởng đến trang web của bạn trước khi chúng tôi phát hành bản cập nhật đó trên toàn cầu.

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

Cú pháp mới cho truy vấn nội dung nghe nhìn theo phạm vi

Chrome 104 bao gồm cú pháp mới cho truy vấn nội dung đa phương tiện theo phạm vi, từ quy cách Truy vấn nội dung đa phương tiện cấp 4. Ví dụ: trước đây, truy vấn nội dung nghe nhìn được viết như sau:

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

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

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

Hỗ trợ trình duyệt

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Nguồn

Region Capture API

Chrome 104 trên máy tính cũng bao gồm API chụp vùng. Tính năng này cho phép bạn 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 có nhiều tính năng được ra mắt vào giữa năm nay. Tôi sẽ nêu bật một vài tính năng mà tôi yêu thích ở đâ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 rất vui 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 đang ở chế độ bật cờ trong Chrome.

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

Hỗ trợ trình duyệt

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Nguồn

Ngoài ra, bố cục lưới còn có khả năng tạo ảnh động cho các kênh lưới.

Hỗ trợ trình duyệt

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

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

Hỗ trợ trình duyệt

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 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 để sử dụng mà không có nguy cơ xoá các phần tử khỏi cây hỗ trợ tiếp cận.

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

Một phần của chương trình Mới làm quen với web