Tính năng mới trong Chrome 99

Pete LePage

Dưới đây là những gì bạn cần phải biết:

  • Chỉ còn vài tuần nữa là Chrome và Firefox sẽ ra mắt phiên bản 100.
  • Lớp phân tầng CSS cho phép bạn kiểm soát CSS của mình tốt hơn và giúp ngăn chặn xung đột về kiểu cụ thể.
  • Phương thức showPicker() cho phép bạn hiển thị bộ chọn trình duyệt theo phương thức lập trình cho các phần tử <input> như date, color và datalist.
  • Và còn nhiều tính năng khác.

Tôi là Pete LePage. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 99.

Chrome 100 và Firefox 100

Chrome 100 được phát hành vào cuối tháng 3 (2022) và Firefox 100 được phát hành ngay sau đó vào đầu tháng 5. Cả hai đều là cột mốc quan trọng về số phiên bản và chuyển sang ba chữ số. Tuy nhiên, nếu mã của bạn dự kiến sẽ có hai chữ số, thì số phiên bản mới có thể gây ra sự cố cho bạn.

Bạn nên kiểm tra mọi mã kiểm tra số phiên bản hoặc phân tích cú pháp chuỗi tác nhân người dùng để đảm bảo mã đó không gặp vấn đề nào.

Trang cờ Chrome làm nổi bật tuỳ chọn #force-major-version-to-100 mới

Trong Chrome, cờ #force-major-version-to-100 sẽ thay đổi số phiên bản hiện tại thành 100.

Ngoài ra, trong trình đơn Cài đặt của Firefox Nightly, bạn có thể bật tuỳ chọn "Chuỗi tác nhân người dùng Firefox 100". Bạn nên kiểm thử trang web để đảm bảo mọi thứ hoạt động như mong đợi.

Hãy xem bài viết Chrome và Firefox sắp đạt đến phiên bản chính 100 để biết thông tin chi tiết đầy đủ.

Lớp tầng CSS

Hỗ trợ cho Lớp CSS dạng thác nước và quy tắc @layer CSS sẽ ra mắt trong Chrome 99. Các lớp này cung cấp quyền kiểm soát rõ ràng hơn đối với các tệp CSS để ngăn chặn các xung đột về tính chất cụ thể của kiểu. Điều này đặc biệt hữu ích cho các cơ sở mã lớn, hệ thống thiết kế và khi quản lý các kiểu của bên thứ ba trong ứng dụng.

Chúng giới thiệu một lớp mới cho phân tầng CSS. Với các kiểu phân lớp, ưu tiên của một lớp luôn vượt qua mức độ cụ thể của bộ chọn.

Hình minh hoạ từ bản minh hoạ dự án về giao diện người dùng chia nhỏ

Nếu đang cố định kiểu cho một đường liên kết, bên trong .card, trong .post, bạn sẽ thấy rằng bộ chọn cụ thể hơn sẽ được áp dụng. Bằng cách sử dụng quy tắc @layer, bạn có thể nêu rõ hơn về đặc điểm của từng kiểu và đảm bảo rằng kiểu đường liên kết trong thẻ sẽ ghi đè kiểu đường liên kết trong bài đăng.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Điều này là do thứ tự ưu tiên của thác nước. Kiểu phân lớp tạo ra các mặt phẳng cascade mới.

Các lớp xếp chồng sử dụng quy tắc @layer CSS được hỗ trợ trong Chrome 99, Firefox 97 và Safari 15.4 Beta. Hãy tham khảo Các lớp Cascade sắp ra mắt trên trình duyệt của bạn để biết thêm thông tin.

showPicker() cho các phần tử đầu vào

Trong một thời gian dài, chúng ta đã phải sử dụng các thư viện tiện ích tuỳ chỉnh hoặc các thủ thuật để hiển thị bộ chọn ngày. Có phương thức showPicker() mới trên HTML InputElements. Đây là cách chính tắc để hiển thị bộ chọn trình duyệt, không chỉ cho date mà còn cho các phần tử time, color và <input> khác có bộ chọn.

Ảnh chụp màn hình bộ chọn của trình duyệt
Bộ chọn ngày của trình duyệt trong Chrome dành cho máy tính, Chrome dành cho thiết bị di động, Safari dành cho máy tính, Safari dành cho thiết bị di động và Firefox dành cho máy tính (tháng 7 năm 2021).

Để sử dụng, hãy gọi showPicker() trên phần tử <input>. Trong ví dụ này, tôi đã gói nó trong một khối try…catch. Điều đó cho phép tôi cung cấp phương án dự phòng, nếu trình duyệt không hỗ trợ API hoặc không thể hiển thị bộ chọn. Nhờ đó, đảm bảo người dùng vẫn có được trải nghiệm tốt.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Hãy xem phần Hiển thị bộ chọn trình duyệt cho ngày, giờ, màu và tệp để biết thông tin chi tiết đầy đủ và tất cả các loại <input> mà bạn có thể sử dụng showPicker().

Và nhiều tính năng khác!

Tất nhiên còn nhiều tính năng khác.

Canvas2D API đã được cập nhật, thêm chức năng mới, bao gồm:

  • Hai sự kiện mới cho ContextLost và ContextRestored
  • Tuỳ chọn willReadFrequently
  • Hỗ trợ thêm đối tượng sửa đổi văn bản CSS
  • Và hơn thế nữa.

Chúng tôi có một thử nghiệm mới về nguồn gốc để cho phép PWA cung cấp màu thay thế trong tệp kê khai ứng dụng web cho chế độ tối.

Và API nhận dạng chữ viết tay hiện đã ra mắt.

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm các thay đổi trong Chrome 99.

Đăng ký

Để nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage. Ngay khi Chrome 100 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!