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

Tôi là Pete LePage. Hãy cùng tìm hiểu sâu hơn và xem có gì mới dành cho nhà phát triển trong Chrome 99.

Chrome 100 và Firefox 100

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

Bạn phải 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 chuỗi đó không có vấn đề gì.

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

Và 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 của Firefox 100". Bạn nên kiểm tra trang web của mình để có thể đảm bảo mọi thứ hoạt động như mong đợi.

Hãy khám phá Chrome và Firefox sắp ra mắt phiên bản lớn 100 để biết đầy đủ thông tin chi tiết.

Lớp CSS tầng

Tính năng hỗ trợ Lớp tầng CSS và quy tắc @layer của CSS sắp ra mắt trong Chrome 99. Loại tệp này giúp kiểm soát rõ ràng hơn các tệp CSS của bạn để ngăn chặn xung đột về đặc điểm 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 các ứng dụng.

Họ giới thiệu một lớp mới cho thác CSS. Với các kiểu phân lớp, mức độ ưu tiên của lớp luôn đánh bại tính đặc trưng của bộ chọn.

Nếu đang cố gắng tạo kiểu cho một đường liên kết, thì bên trong .card, trong .post, bạn sẽ thấy 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ể hiểu rõ hơn về đặc trưng kiểu của từng kiểu và đảm bảo rằng kiểu liên kết trong thẻ sẽ ghi đè kiểu liên kết trong bài đăng của bạn.

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

  .link {
    color: blue;
  }
}

Điều này là do mức độ ưu tiên theo tầng. Các kiểu phân lớp sẽ tạo ra các mặt phẳng tầng mới.

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

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

Lâu nay, chúng tôi đã phải dùng đến thư viện tiện ích tuỳ chỉnh hoặc mẹo vặt để hiển thị bộ chọn ngày. Có một 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 của trình duyệt, không chỉ cho date mà còn cho time, color và các phần tử <input> khác bằng bộ chọn.

Bộ chọn ngày của trình duyệt ở trình duyệt Chrome 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 trên máy tính (tháng 7 năm 2021).

Để sử dụng lớp này, hãy gọi showPicker() trên phần tử <input>. Trong ví dụ này, tôi đã gói mã này trong một khối try…catch. Điều đó cho phép tôi cung cấp tính năng 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. Do đó, việc đả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 bộ chọn của trình duyệt cho ngày, giờ, màu sắc và tệp để biết đầy đủ thông tin chi tiết, cũng như tất cả các loại <input> mà bạn có thể dùng showPicker().

Và nhiều kiến thức khác!

Tất nhiên, vẫn còn nhiều lý do khác.

API Canvas2D đã được cập nhật và bổ sung chức năng mới, bao gồm:

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

Hiện đã có bản dùng thử theo nguyên gốc mới cho phép PWA cung cấp màu thay thế trong tệp kê khai ứng dụng web cho chế độ tối.

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

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

Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm các thay đổi khác trong Chrome 99.

• Tính năng mới trong Công cụ của Chrome cho nhà phát triển (99)
• Ngừng sử dụng và xoá Chrome 99
• Thông tin cập nhật về ChromeStatus.com cho Chrome 99
• Danh sách thay đổi kho lưu trữ nguồn Chromium
• Lịch phát hành Chrome

Đă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 sau khi Chrome 100 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!