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 sâu hơn và xem Chrome 112 có gì mới dành cho nhà phát triển.

Dịch vụ so sánh giá (CSS) hỗ trợ việc lồng ghép.

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

Trước khi lồng nhau, mọi bộ chọn cần được khai báo rõ ràng, 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à trải nghiệm biên soạn rải rác.

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

.nesting > .is {
  color: rebeccapurple;
}

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

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

Sau
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Việc lồng ghép giá trị lợi ích của các nhà phát triển bằng cách giảm nhu cầu lặp lại bộ chọn, đồng thời xác định cùng vị trí các quy tắc định kiểu cho các phần tử liên quan. Việc 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 thì bạn có thể xoá toàn bộ nhóm thay vì tìm kiếm các tệp để tìm các thực thể bộ chọn liên quan.

Tính năng lồng ghép 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 tận dụng tối đa việc lồng ghép CSS và bạn có thể xem hỗ trợ cho việc lồng ghép trong công cụ cho nhà phát triển tại đây.

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

Phần tử HTML <dialog> là một cách chuẩn hoá để biểu thị một hộp thoại hoặc thành phần tương tác khác, chẳng hạn như cảnh báo có thể đóng hoặc cửa sổ phụ. Cần hiển thị ở đầu tất cả nội dung khác trong 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 hữu dụng và khả năng tiếp cận tốt hơn và nhất quá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ở ra. 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 sẽ xem xét các phần tử có thể lấy tiêu đ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 Bản thân phần tử <dialog> được lấy tiêu điểm nếu bạn đặt thuộc tính tự động lấy nét

Bản thân phần tử <dialog> được lấy làm tâm điểm dưới dạng phương án dự phòng thay vì tâm điểm được "đặt lại" cho 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 Service worker.

Từ Chrome 112, trình chạy dịch vụ bắt đầu và điều phối trình nghe từ đường dẫn quan trọng của điều hướng sẽ bị bỏ qua, nếu một 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 trong 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 đó có thể là lý do khiến một số trang web về cơ bản 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 trình nghe không hoạt động chỉ làm phát sinh chi phí mà không mang lại bất kỳ lợi ích nào có thể triển khai với trình chạy dịch vụ phù hợp, chẳng hạn như các chức năng lưu vào bộ nhớ đệm hoặc ngoại tuyến. Vì vậy, Chrome giờ đây sẽ bỏ qua các bước này để cải thiện tính năng điều hướng.

Trong lần thay đổi này, Chrome sẽ hiển thị 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, Chrome sẽ khuyến khích nhà phát triển xoá các trình nghe tìm nạp đó.

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

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

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

  • Phương thức setter cho document.domain hiện không còn được dùng nữa.
  • Hiện chúng tôi có 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 lại bằng bộ chọn cộ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 112.

Đă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à Adriana Jara. Ngay sau khi Chrome 113 đượ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!