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 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 nhập và thoát.

Ba tính năng mới này của CSS hoàn thiện bộ thiết lập để dễ dàng thêm hoạt ảnh mục nhập và thoát, và tạo hiệu ứng mượt mà cho và từ các phần tử có thể đóng lớp trên cùng 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 ảnh động cho mục nhập từ display: none và vào lớp trên cùng. 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ử này 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ờ popover hoặc dialog ở lớp trên cùng, hãy thêm thuộc tính overlay vào danh sách các hiệu ứng chuyển đổi. Đưa lớp phủ vào hiệu ứng chuyển đổi hoặc ảnh động để tạo hiệu ứng độ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. Việc 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 thao tác vào và thoát hoạt ảnh 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 MapReduce (tốt hơn là nên 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 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 (Nội dung lớn nhất hiển thị) 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 gọi lại phải trả về một chuỗi hoặc ký hiệu cho biết nhóm của phần tử được liên kết.

Trong ví dụ sau, từ tài liệu MDN, có một mảng sản phẩm với phương thức groupBy 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 sắp xếp hợp lý 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 web của tài nguyên từ xa từ bảng điều khiển Network (Mạng) mà không cần truy cập vào chúng.

Để 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 yêu cầu.

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

Sau khi thiết lập cơ chế ghi đè, Công cụ cho nhà phát triển sẽ chuyển bạn đến Nguồn > Ghi đè > Trình chỉnh sửa để cho phép bạn ghi đè nội dung 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 nội dung 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 các tính năng mới trong Công cụ cho nhà phát triển để biết toàn bộ 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 tính năng khác nữa.

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

Bài viết này chỉ đề cập đến 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 117.

Đă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 khi Chrome 117 được phát hành, tôi sẽ ở đây để giới thiệu cho bạn những tính năng mới trong Chrome!