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 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 về đường đi dạng lưới
Nhờ công sức của các cộng tác viên tại Microsoft, Chrome giờ đây 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 suôn sẻ giữa các trạng thái, thay vì quay ngay ở điểm giữa của ảnh động hoặc hiệu ứng chuyển đổi.
Hỗ trợ trình duyệt
- 107
- 107
- 66
- 16
Bổ sung vào getDisplayMedia()
Ngoài ra, trong 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á mức khi chia sẻ màn hình.
- Tuỳ chọn
displaySurfacecó 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
surfaceSwitchingcho biết liệu Chrome có cho phép người dùng tự động chuyển đổi giữa các thẻ dùng chung 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 "hall of gương". - Tuỳ chọn
systemAudiođảm bảo Chrome chỉ cung cấp bản ghi âm có liên quan 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ể.
Thử nghiệm 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() để làm nổi bật các truy vấn bằng @supports. Các ví dụ sau đây kiểm tra tính 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 mảnh văn bản
Safari 16.1 hỗ trợ tính năng cuộn đến mảnh văn bản, tính năng này hỗ trợ thêm cho việc điều hướng đến 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, Safari 16.1 hỗ trợ hình ảnh AVIF động trên macOS Ventura, iOS 16 và iPadOS 16.
Tính năng đẩy trên web cho Safari
Safari 16.1 mang đến hỗ trợ Web Push cho Safari trên macOS Ventura. Tính năng này sử dụng API đẩy và API thông báo. Bạn có thể đọc thêm về vấn đề này trong bài viết Thông báo đẩy trên web của Meet. Trang web Đẩy trên trang web có trong Safari có nghĩa là trang web này hiện có thể sử dụng trên cả 3 công cụ chính.
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 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 phá vỡ trước, sau hoặc bên trong phần tử được áp dụng. Ví dụ: CSS sau đây giúp bạn tránh được một con số bị hỏng tại một dấu ngắt trang.
figure {
break-inside: avoid;
}
Chrome 108 bắt đầu triển khai một thay đổi về cách tính năng tràn hoạt động 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 tràn đối với các phần tử được thay thế trong CSS để biết thêm thông tin và xem cách giải quyết mọi vấn đề mà bạn gặp phải.
Có một thay đổi về cách hoạt động của Khung nhìn bố cục 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 việc thay đổi 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 ổn định vào tháng tới.
Chrome cũng có các Đơn vị khung nhìn CSS mới. Các chiến dịch này bao gồm các đơ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à đơn vị logic (vi, vb). Các đơn vị này đã được triển khai trên Firefox và Safari.
Firefox 107 cho phép hỗ trợ phông chữ COLRv1, tham gia Chrome để hỗ trợ công nghệ phông chữ này. Ngoài ra, về phông chữ, Chrome 108 hỗ trợ thêm các hàm font-tech() và font-format() để tính năng các truy vấn bằng @supports.
Firefox cũng bổ sung tính năng hỗ trợ contain-intrinsic-size, kết hợp 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 các bản sửa lỗi CSS bao gồm kích thước và chụp ảnh cuộn.
Một phần trong loạt video New to the web Series