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

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 những tính năng mới dành cho nhà phát triển trong Chrome 117.

Các tính năng CSS mới cho ảnh động nhập và thoát.

Ba tính năng CSS mới này hoàn thiện bộ thiết lập để dễ dàng thêm ảnh động vào và thoát, đồng thời tạo hiệu ứng chuyển động mượt mà cho và từ phần tử có thể đóng ở lớp trên cùng, chẳng hạn như hộp thoại và cửa sổ bật lên.

Tính năng đầu tiên là transition-behavior. Để chuyển đổi các thuộc tính riêng biệt, chẳng hạn như display, hãy sử dụng giá trị allow-discrete cho transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Sau đó, quy tắc @starting-style được dùng để tạo hiệu ứng chuyển cảnh từ display: none và tạo hiệu ứng cho lớp trên cùng. Sử dụng @starting-style để áp dụng kiểu mà trình duyệt có thể tra cứu trước khi phần tử mở ra trên trang.

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Cuối cùng, để làm mờ popover hoặc dialog khỏi lớp trên cùng, hãy thêm thuộc tính overlay vào danh sách hiệu ứng chuyển đổi. Đưa lớp phủ vào hiệu ứng chuyển đổi hoặc ảnh động để tạo lớp phủ dạng ảnh động cùng với các đối tượng còn lại và đảm bảo lớp phủ đó nằm ở lớp trên cùng khi tạo ảnh động. Giao diện này sẽ trông mượt mà hơn nhiều.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Hãy xem Bốn tính năng CSS mới giúp hoạt ảnh vào và thoát mượt mà để biết chi tiết về cách sử dụng các tính năng này nhằm cải thiện trải nghiệm người dùng bằng chuyển động.

Nhóm mảng

Trong lập trình, việc nhóm mảng là một thao tác cực kỳ phổ biến, thường thấy nhất khi chúng ta sử dụng mệnh đề GROUP BY của SQL và lập trình Map Giảm (được coi là giảm nhóm bản đồ).

Khả năng kết hợp dữ liệu thành các nhóm cho phép các nhà phát triển tính toán các tập dữ liệu có thứ tự cao hơn. Ví dụ: độ tuổi trung bình của một nhóm thuần tập hoặc giá trị LCP hằng ngày của một trang web.

Việc nhóm mảng cho phép các trường hợp này bằng cách thêm các phương thức tĩnh Object.groupBy và Map.groupBy.

groupBy gọi hàm callback đã cung cấp một lần cho mỗi phần tử trong một đối tượng có thể lặp lại. Hàm callback phải trả về một chuỗi hoặc ký hiệu cho biết nhóm của phần tử liên kết.

Trong ví dụ sau, trong tài liệu MN, hệ thống cho thấy một mảng các sản phẩm có phương thức groupBy được dùng để trả về các sản phẩm được nhóm theo loại.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Để biết thêm thông tin, hãy xem tài liệu về groupBy.

Cơ chế ghi đè cục bộ được tinh giản trong Công cụ cho nhà phát triển.

Tính năng ghi đè cục bộ hiện đã được tinh giản để bạn có thể dễ dàng mô phỏng tiêu đề phản hồi và nội dung web của các tài nguyên từ xa từ bảng điều khiển Mạng mà không cần truy cập vào các tài nguyên đó.

Để ghi đè nội dung trên web, hãy mở bảng điều khiển Mạng, nhấp chuột phải vào một yêu cầu rồi chọn Ghi đè nội dung.

Các tuỳ chọn ghi đè trong trình đơn thả xuống của yêu cầu.

Nếu bạn đã thiết lập chế độ ghi đè cục bộ nhưng bị tắt, thì Công cụ cho nhà phát triển sẽ bật các chế độ đó. Nếu bạn chưa thiết lập Công cụ cho nhà phát triển, Công cụ cho nhà phát triển sẽ nhắc bạn trong thanh thao tác ở trên cùng. Chọn một thư mục để lưu trữ các chế độ ghi đè và cho phép Công cụ cho nhà phát triển truy cập vào thư mục đó.

Chọn một thư mục rồi cấp quyền truy cập vào thư mục đó trong thanh thao tác ở trên cùng.

Sau khi thiết lập chế độ ghi đè, Công cụ cho nhà phát triển sẽ đưa bạn đến Nguồn > Ghi đè > Trình chỉnh sửa để cho phép bạn ghi đè nội dung web.

Lưu ý rằng các tài nguyên bị ghi đè được biểu thị bằng Đã lưu. trong bảng điều khiển Network (Mạng). Di chuột qua biểu tượng này để xem nội dung nào bị ghi đè.

Biểu tượng ghi đè bên cạnh yêu cầu trong bảng điều khiển Mạng.

Xem tính năng mới trong Công cụ cho nhà phát triển để biết toàn bộ thông tin chi tiết và thông tin khác về Công cụ cho nhà phát triển trong Chrome 117.

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

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

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 những thay đổi khác trong Chrome 117.

Đă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.

Chào Adriana Jara! Ngay sau khi Chrome 117 đượ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!