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

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 10 năm 2022.

Rachel Andrew

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

Vào tháng 10, Firefox 106, Chrome 107 và Safari 16.1 đã trở nên ổn định. Hãy cùng xem điều này có ý nghĩa gì đối với nền tảng web.

Ảnh động của các bản nhạc dạng lưới

Nhờ những đóng góp của các cộng tác viên tại Microsoft, Chrome hiện có thể nội suy các giá trị grid-template-columns và grid-template-rows. Điều này có nghĩa là bố cục lưới có thể chuyển đổi liền mạch giữa các trạng thái, thay vì chụp nhanh ở điểm giữa của ảnh động hoặc hiệu ứng chuyển đổi.

Nội dung bổ sung cho getDisplayMedia()

Ngoài ra, Chrome còn có một số tính năng bổ sung cho getDisplayMedia() nhằm ngăn chặn việc vô tình chia sẻ quá nhiều khi chia sẻ màn hình.

• Tuỳ chọn displaySurface có thể cho biết rằng ứng dụng web ưu tiên cung cấp một loại nền tảng hiển thị cụ thể (thẻ, cửa sổ hoặc màn hình).
• Tuỳ chọn surfaceSwitching cho biết liệu Chrome có cho phép người dùng linh động chuyển đổi giữa các thẻ được chia sẻ hay không.
• Bạn có thể dùng tuỳ chọn selfBrowserSurface để ngăn người dùng chia sẻ thẻ hiện tại. Điều này giúp tránh hiệu ứng "hội trường gương".
• Tuỳ chọn systemAudio đảm bảo Chrome chỉ cung cấp tính năng ghi âm phù hợp cho người dùng.

Safari 16.1 cũng hỗ trợ getDisplayMedia, thêm tính năng hỗ trợ chụp một cửa sổ Safari cụ thể.

Kiểm thử khả năng hỗ trợ công nghệ phông chữ và các tính năng của CSS

Firefox đã thêm các hàm font-tech() và font-format() để đưa các truy vấn nổi bật vào bằng @supports. Ví dụ sau đây kiểm thử khả năng hỗ trợ phông chữ COLRv1.

@supports font-tech(color-COLRv1) {

}

Bạn có thể xem thêm ví dụ trên MDN.

Di chuyển đến đoạn văn bản

Safari 16.1 hỗ trợ tính năng cuộn đến đoạn văn bản, bổ sung tính năng hỗ trợ để điều hướng đến URL có đoạn văn bản cụ thể được chỉ định.

Hỗ trợ AVIF

Safari 16 hỗ trợ hình ảnh tĩnh AVIF, còn Safari 16.1 hỗ trợ hình ảnh động AVIF trên macOS Ventura, iOS 16 và iPadOS 16.

Thông báo đẩy trên web cho Safari

Safari 16.1 hỗ trợ tính năng Web Push cho Safari trên macOS Ventura. Cách này sử dụng API đẩy và API thông báo. Bạn có thể đọc thêm về thông tin này trong bài viết Meet qua tính năng đẩy trên web. Trang đích Web Push trong Safari có nghĩa là tính năng này hiện đã có trên cả 3 công cụ chính.

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 yêu cầu xoá 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 đó. Các bản thử nghiệm beta mới trong tháng này là Chrome 108, Firefox 107 và Safari 16.2.

Chrome 108 hỗ trợ giá trị avoid của các thuộc tính phân mảnh CSS break-before, break-after và break-inside khi in. Giá trị này cho trình duyệt biết để tránh ngắt dòng trước, sau hoặc bên trong phần tử được áp dụng. Ví dụ: CSS sau đây giúp tránh việc một hình bị ngắt ở dấu ngắt trang.

figure {
    break-inside: avoid;
}

Chrome 108 bắt đầu triển khai một thay đổi đối với cách hoạt động của phần tràn trên các phần tử được thay thế. Điều này có thể gây ra thay đổi về hình ảnh trong một số trường hợp. Hãy đọc bài viết Thay đổi đối với phần tràn trên các phần tử được thay thế trong CSS để biết thêm thông tin chi tiết và xem cách giải quyết mọi vấn đề bạn gặp phải.

Có thay đổi về cách Khung nhìn bố cục hoạt động trong Chrome trên Android khi bàn phím ảo hiển thị. Hãy đọc bài viết Chuẩn bị cho những thay đổi về hành vi đổi kích thước khung nhìn sắp ra mắt trên Chrome trên Android để tìm hiểu thêm và tìm hiểu cách chuẩn bị cho quá trình vận chuyển này diễn ra ổn định vào tháng tới.

Ngoài ra, Chrome còn có các Đơn vị khung nhìn CSS mới. Các đơn vị này bao gồm đơn vị nhỏ (svw, svh, svi, svb, svmin, svmax), đơn vị lớn (lvw, lvh, lvi, lvb, lvmin, lvmax), đơn vị động (dvw, dvh, dvi, dvb, dvmin, dvmax) và đơn vị logic (vi, vb). Các đơn vị này đã được triển khai trong Firefox và Safari.

Firefox 107 hỗ trợ phông chữ COLRv1, cùng với Chrome hỗ trợ công nghệ phông chữ này. Ngoài ra, trong phông chữ, Chrome 108 còn hỗ trợ các hàm font-tech() và font-format() để đưa ra các truy vấn có @supports.

Firefox cũng hỗ trợ contain-intrinsic-size, cùng với Chrome để tạo ra hai trình duyệt hỗ trợ tính năng này.

Safari 16.2 Beta bao gồm một loạt bản sửa lỗi CSS, bao gồm cả tính năng định cỡ và cuộn nhanh.

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