Hãy khám phá một số tính năng thú vị trên trình duyệt web ổn định và phiên bản thử nghiệm 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 98 và Safari 15.4 đã trở nên ổn định. Điều này đã mang đến một loạt tính năng mới cho nền tảng và nhiều tính năng bổ sung trong số đó đồng nghĩa với việc tính năng này có thể hoạt động trên cả ba công cụ trình duyệt. Trong bài đăng này, tôi đã tập trung vào những phần bổ sung mang lại cho chúng ta khả năng tương tác trên nhiều trình duyệt, nhưng hãy kiểm tra ghi chú phát hành để xem 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 bao gồm Lớp phủ tầng. Quy tắc tại @layer xác định một lớp tầng, giúp bạn kiểm soát tính cụ thể. Họ gia nhập Firefox, vì vậy Lớp Cascade hiện có sẵn trong cả ba công cụ trình duyệt. Tìm hiểu thêm về Lớp phủ tầng trong Lớp phủ tầng có trên trình duyệt của bạn.
Chrome 100 bao gồm giá trị mới là plus-lighter cho thuộc tính mix-blend-mode CSS. Giá trị này rất hữu ích khi làm mờ chéo 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 đề giải quyết này trong phần Hiện không thể làm mờ chéo hai phần tử DOM bất kỳ.
Hỗ trợ trình duyệt
- 100
- 100
- 99
- 9.1
Safari 15.4 bao gồm thuộc tính contain, cho phép chứa CSS.
Ngoài ra, trong Safari 15.4 là accent-color, cho phép kiểm soát màu nhấn được sử dụng trên một số tuỳ chọn điều khiển biểu mẫu.
Firefox 98 và Safari 15.4 đã hạ thấp phần tử <dialog>, đại diện cho một hộp thoại.
Safari 15.4 cũng hoàn tất việc hỗ trợ lớp giả :focus-visible. Công việc triển khai này là của Igalia.
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 bản thử nghiệm mới trong tháng 3 là Chrome 101 và Firefox 99.
Chrome 101 beta bao gồm ký hiệu màu hwb. Điều này chỉ định màu theo màu, độ trắng và độ đen của màu đó. Giống như với các ký hiệu màu khác, thành phần alpha tuỳ chọn chỉ định độ mờ.
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
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ợ tính năng hiển thị tệp PDF cùng dòng hay không.
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
Các tính năng beta này sẽ sớm ra mắt trên các trình duyệt ổn định.
Một phần trong loạt video New to the web Series