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 khám phá những điểm 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 xuất hiện và biến mất.

3 tính năng CSS mới này hoàn thiện bộ tính năng giúp bạn dễ dàng thêm ảnh động xuất hiện và biến mất, đồng thời tạo ảnh động mượt mà cho các phần tử có thể loại bỏ ở 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 rời rạc, chẳng hạn như display, hãy 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 ảnh động cho hiệu ứng vào từ display: none và vào lớp trên cùng. Sử dụng @starting-style để áp dụng một kiểu mà trình duyệt có thể tra cứu trước khi phần tử được mở trên trang.

/*  0. 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;
}

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

/*  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ờ một 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 ảnh động cho lớp phủ cùng với các tính nă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. Điều này sẽ giúp video 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ài viết Bốn tính năng CSS mới cho ảnh động mượt mà khi vào và thoát để biết thông tin 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 MapReduce (thường được coi là map-group-reduce).

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

Tính năng 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 một hàm callback được 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 biểu tượng cho biết nhóm của phần tử được liên kết.

Trong ví dụ sau đây, từ tài liệu MDN, có một mảng sản phẩm với 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 chi tiết, hãy xem tài liệu về groupBy.

Tính năng 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, vì vậy, bạn có thể dễ dàng mô phỏng tiêu đề phản hồi và nội dung trên web của các tài nguyên từ xa trong bảng 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 lựa chọn ghi đè trong trình đơn thả xuống của một yêu cầu.

Nếu bạn đã thiết lập nhưng tắt chế độ ghi đè cục bộ, thì Công cụ cho nhà phát triển sẽ bật chế độ này. Nếu bạn chưa thiết lập, thì 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 tệp 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 bạn thiết lập các chế độ ghi đè, DevTools sẽ chuyển bạn đến phần Nguồn > Ghi đè > Trình chỉnh sửa để cho phép bạn ghi đè nội dung trên web.

Xin 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 Mạng. Di chuột qua biểu tượng để xem những gì bị ghi đè.

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

Hãy xem các tính năng mới trong Công cụ cho nhà phát triển để biết tất cả 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 tính năng khác!

Tất nhiên là còn nhiều điều khác nữa.

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

Đây chỉ là 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 những thay đổi trong Chrome 117.

Đăng ký

Để luôn nắm bắt thông tin mới nhất, hãy đăng ký theo dõi kênh YouTube của Chrome Developers. 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 khi Chrome 117 được phát hành, tôi sẽ có mặt ở đây để giới thiệu các tính năng mới trong Chrome!