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

Adriana Jara

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

Tôi là Adriana Jara. Hãy cùng tìm hiểu xem có tính năng mới nào dành cho nhà phát triển trong Chrome 112.

Hỗ trợ CSS để lồng nhau.

Một trong những tính năng của bộ tiền xử lý CSS mà chúng tôi yêu thích hiện được tích hợp vào ngôn ngữ: quy tắc về kiểu lồng.

Trước khi lồng nhau, bạn cần khai báo rõ ràng mọi bộ chọn, tách biệt với nhau. Điều này dẫn đến tình trạng lặp lại, hàng loạt biểu định kiểu và việc soạn thảo rải rác của bạn.

Trước
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Sau khi lồng nhau, bộ chọn có thể là quy tắc kiểu liên quan và có liên quan đến đoạn mã đó có thể được nhóm lại.

Sau
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Tính năng lồng nhau giúp nhà phát triển giảm bớt nhu cầu lặp lại bộ chọn, đồng thời xác định vị trí đồng thời của các quy tắc kiểu cho các phần tử có liên quan. Mã này cũng có thể giúp các kiểu khớp với HTML mà chúng nhắm mục tiêu.

Nếu thành phần .nesting trong ví dụ đã bị xoá khỏi dự án, bạn có thể xoá toàn bộ nhóm thay vì tìm tệp cho các thực thể bộ chọn có liên quan.

Việc lồng nhau có thể giúp:

  • Sắp xếp.
  • Giảm kích thước tệp.
  • Tái cấu trúc.

Hãy xem bài viết này để biết các mẹo khai thác tối đa tính năng lồng ghép CSS và bạn có thể tìm thấy sự hỗ trợ về tính năng lồng nhau trong công cụ cho nhà phát triển tại đây.

Cập nhật thuật toán cho tiêu điểm ban đầu của <dialog>.

Phần tử HTML <dialog> là cách chuẩn hoá để trình bày một hộp thoại hoặc thành phần tương tác khác, chẳng hạn như một cảnh báo có thể đóng hoặc một cửa sổ phụ, cần được hiển thị trên đầu mọi nội dung khác trong một trang web.

Bạn nên sử dụng phần tử HTML này để tạo nội dung như vậy vì các tính năng của phần tử này được xây dựng để mang lại khả năng sử dụng và tiếp cận tốt hơn và nhất quán hơn.

Một trong những tính năng đó là xử lý phần tử nào được lấy tiêu điểm khi hộp thoại mở. Trong phiên bản này, thuật toán chọn phần tử đó đã được cập nhật.

Từ bây giờ trở đi:

Các bước lấy tiêu điểm của hộp thoại xem xét những phần tử có thể làm tâm điểm bằng bàn phím thay vì bất kỳ phần tử nào có thể làm tâm điểm Phần tử <dialog> sẽ được lấy tiêu điểm nếu đã đặt thuộc tính tự động lấy nét

Phần tử <dialog> tự lấy tiêu điểm làm tiêu điểm dự phòng thay vì tiêu điểm là "đặt lại" vào phần tử <body>.

Hãy đọc tài liệu này để biết thêm thông tin chi tiết về phần tử <dialog>.

Bỏ qua các trình xử lý tìm nạp không hoạt động của trình chạy dịch vụ.

Từ Chrome 112, trình chạy dịch vụ sẽ bắt đầu và hoạt động điều phối trình nghe từ đường dẫn quan trọng điều hướng sẽ bị bỏ qua, nếu tác nhân người dùng xác định rằng tất cả trình nghe tìm nạp của trình chạy dịch vụ đều không hoạt động.

Tính năng này giúp bạn di chuyển trên các trang đó nhanh hơn.

Việc có trình xử lý tìm nạp là một trong những yêu cầu của PWA để có thể cài đặt một ứng dụng web. Chúng tôi nghi ngờ rằng về cơ bản, đó có thể là lý do khiến một số trang web có trình xử lý tìm nạp trống. Tuy nhiên, việc bắt đầu một trình chạy dịch vụ và thực thi một trình nghe không hoạt động chỉ gây hao tổn mà không mang lại bất kỳ lợi ích nào có thể triển khai bằng trình chạy dịch vụ phù hợp, chẳng hạn như khả năng lưu vào bộ nhớ đệm hoặc khả năng ngoại tuyến. Vì vậy, Chrome hiện bỏ qua chúng để cải thiện khả năng điều hướng.

Trong thay đổi này, Chrome sẽ hiển thị các cảnh báo trên bảng điều khiển nếu tất cả trình nghe tìm nạp của trình chạy dịch vụ đều không hoạt động, đồng thời khuyến khích nhà phát triển loại bỏ những trình nghe tìm nạp đó.

Cảnh báo trong Công cụ cho nhà phát triển về các trình xử lý tìm nạp trình chạy dịch vụ trống.

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

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

  • Phương thức setter cho document.domain hiện không còn được dùng nữa.
  • Có một bản dùng thử theo nguyên gốc cho việc ngừng sử dụng X-Requested-With header trong WebView
  • Trình ghi trong công cụ cho nhà phát triển hiện có thể ghi bằng bộ chọn lỗ hổng.

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

Trên đây chỉ là 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 dưới đây các thay đổi bổ sung trong Chrome 112.

Đăng ký

Để cập nhật thông tin, hãy đăng ký Kênh YouTube dành cho nhà phát triển Chrome, và 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à Adriana Jara. Ngay sau khi Chrome 113 được phát hành, tôi sẽ ở đây để cho bạn biết các tính năng mới của Chrome!