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 trong tháng 10 năm 2022.
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.
Hỗ trợ trình duyệt
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ể sử 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 "hiệu ứng hình ảnh phản chiếu". - Tuỳ chọn
systemAudio
đảm bảo rằng 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
, bổ sung 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.
Chuyển đến đoạn văn bản
Safari 16.1 hỗ trợ tính năng cuộn đến mảnh văn bản, giúp hỗ trợ việc điều hướng đến một URL có một mảnh 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. Phương thức này sử dụng Push API và Notifications API. Bạn có thể đọc thêm về phương thức này trong bài viết Tìm hiểu về tính năng Thông báo đẩ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ả ba 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 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 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 về tình trạng 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ó một thay đổi đối với 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 các thay đổi về hành vi đổi kích thước khung nhìn sắp ra mắt trên Chrome cho Android để tìm hiểu thêm và tìm hiểu cách chuẩn bị cho việc phát hành phiên bản ổ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
), lớn (lvw
, lvh
, lvi
, lvb
, lvmin
, lvmax
), động (dvw
, dvh
, dvi
, dvb
, dvmin
, dvmax
) 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