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

Các tính năng mới của CSS dành 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 rời rạc, 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. 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 ở 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, 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 (hay còn được gọi là map-group-reduce).

Khả năng kết hợp dữ liệu thành 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 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 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ử liên kết.

Trong ví dụ sau, trong tài liệu MDN, có một dãy các sản phẩm sử dụng phương thức groupBy để 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 tính năng ghi đè cục bộ nhưng bị tắt, 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 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.

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). Hãy di chuột qua biểu tượng này để 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

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

Xin chào Adriana Jara! Ngay sau khi Chrome 117 được phát hành, tôi sẽ cho bạn biết các tính năng mới trong Chrome!