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

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 beta trong tháng 3 năm 2022.

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

Vào tháng 3, Chrome 99, Chrome 100, Firefox 98Safari 15.4 đã trở nên ổn định. Điều này đã mang lại một loạt tính năng mới cho nền tảng và nhiều tính năng bổ sung này có nghĩa là tính năng này đã có trong cả ba công cụ trình duyệt. Trong bài đăng này, tôi đã tập trung vào những nội dung bổ sung giúp chúng ta có khả năng tương tác trên nhiều trình duyệt, nhưng hãy xem ghi chú phát hành để biết tất cả các tính năng được thêm vào mỗi công cụ.

Chrome 99 và Safari 15.4 có Lớp xếp chồng. Quy tắc tại @layer xác định một lớp dạng thác nước, giúp bạn kiểm soát mức độ cụ thể. Các trình duyệt này đã tham gia Firefox, vì vậy, Lớp xếp chồng hiện có trong cả ba công cụ trình duyệt. Tìm hiểu thêm về Lớp xếp chồng trong bài viết Lớp xếp chồng sắp ra mắt trên trình duyệt.

Hỗ trợ trình duyệt

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Nguồn

Chrome 100 bao gồm giá trị mới là plus-lighter cho thuộc tính mix-blend-mode của CSS. Giá trị này hữu ích khi làm hiệu ứng khuếch tán hai phần tử khi tất cả hoặc một tập hợp con các pixel có cùng giá trị. Bạn có thể đọc thêm về vấn đề mà giải pháp này giải quyết trong bài viết Hiện không thể làm mờ hai phần tử DOM bất kỳ.

Hỗ trợ trình duyệt

  • Chrome: 100.
  • Edge: 100.
  • Firefox: 99.
  • Safari: 9.1.

Safari 15.4 bao gồm thuộc tính contain, cho phép chứa CSS.

Hỗ trợ trình duyệt

  • Chrome: 52.
  • Edge: 79.
  • Firefox: 69.
  • Safari: 15.4.

Nguồn

Ngoài ra, trong Safari 15.4 còn có accent-color, giúp kiểm soát màu nhấn được sử dụng trên một số thành phần điều khiển biểu mẫu.

Hỗ trợ trình duyệt

  • Chrome: 93.
  • Edge: 93.
  • Firefox: 92.
  • Safari: 15.4.

Nguồn

Firefox 98 và Safari 15.4 đã ra mắt phần tử <dialog>, đại diện cho một hộp thoại.

Hỗ trợ trình duyệt

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

Nguồn

Safari 15.4 cũng hoàn tất việc hỗ trợ lớp giả lập :focus-visible. Công việc triển khai này do Igalia thực hiện.

Hỗ trợ trình duyệt

  • Chrome: 86.
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4.

Nguồn

Bản phát hành trình duyệt thử nghiệm

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 phiên bản thử nghiệm mới trong tháng 3 là Chrome 101Firefox 99.

Chrome 101 beta có ký hiệu màu hwb. Thao tác này chỉ định màu theo sắc độ, độ trắng và độ đen của màu. Giống như các ký hiệu màu khác, thành phần alpha không bắt buộc chỉ định độ mờ.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Hỗ trợ trình duyệt

  • Chrome: 101.
  • Edge: 101.
  • Firefox: 96.
  • Safari: 15.

Nguồn

Firefox 99 bao gồm thuộc tính pdfViewerEnabled của giao diện Trình điều hướng. Thuộc tính này cho biết trình duyệt có hỗ trợ hiển thị nội tuyến tệp PDF hay không.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

Hỗ trợ trình duyệt

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 99.
  • Safari: 16.4.

Nguồ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