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

Rachel Andrew

Dưới đây là những gì bạn cần phải biết:

Hàm attr() nâng cao của CSS

Tính năng này bổ sung cho hàm attr() hiện có, các tính năng được chỉ định trong CSS cấp 5. Điều này cho phép các loại ngoài <string> và sử dụng trong tất cả các thuộc tính CSS (ngoài việc hỗ trợ hiện có cho nội dung của phần tử giả).

Trong ví dụ sau, giá trị của thuộc tính color cho div sử dụng giá trị từ thuộc tính data-color. Giá trị thuộc tính này được phân tích cú pháp thành <color> bằng cách sử dụng attr() và type(). Giá trị dự phòng được đặt thành red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Tìm hiểu thêm trong bài viết CSS attr() được nâng cấp.

Truy vấn vùng chứa trạng thái cuộn CSS

Sử dụng truy vấn vùng chứa để tạo kiểu cho các thành phần con của vùng chứa dựa trên trạng thái cuộn của chúng.

Vùng chứa truy vấn là vùng chứa có thể cuộn hoặc là phần tử chịu ảnh hưởng của vị trí cuộn của vùng chứa có thể cuộn. Bạn có thể truy vấn các trạng thái sau:

  • stuck: Vùng chứa được đặt ở vị trí cố định sẽ nằm cố định ở một trong các cạnh của hộp cuộn.
  • snapped: Một vùng chứa được căn chỉnh theo chế độ chụp nhanh khi di chuyển hiện đang được chụp nhanh theo chiều ngang hoặc chiều dọc.
  • scrollable: Liệu có thể di chuyển vùng chứa có thể di chuyển theo hướng được truy vấn hay không.

Một loại vùng chứa mới: scroll-state cho phép truy vấn các vùng chứa. Ví dụ:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Tìm hiểu thêm và xem một số bản minh hoạ trong truy vấn trạng thái cuộn CSS.

CSS text-box, text-box-trim và text-box-edge

Thuộc tính text-box-trim chỉ định các cạnh cần cắt, ở trên hoặc ở dưới, còn thuộc tính text-box-edge chỉ định cách cắt cạnh.

Các thuộc tính này cho phép bạn kiểm soát chính xác khoảng cách dọc bằng cách sử dụng các chỉ số phông chữ.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Tìm hiểu cách sử dụng các thuộc tính mới này trong CSS text-box-trim.

Và nhiều tính năng khác!

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

  • Animation.overallProgressmang đến cho bạn một cách biểu diễn thuận tiện và nhất quán về mức độ tiến triển của một ảnh động trong các lần lặp lại và bất kể bản chất của dòng thời gian.
  • Node.prototype.moveBefore cho phép bạn di chuyển các phần tử trong cây DOM mà không cần đặt lại trạng thái của phần tử.
  • Giao diện FileSystemObserver sẽ thông báo cho các trang web về những thay đổi đối với hệ thống tệp.
  • Phương thức PublicKeyCredential getClientCapabilities() cho phép bạn xác định những tính năng WebAuthn mà ứng dụng của người dùng hỗ trợ.

Xem ghi chú phát hành đầy đủ của Chrome 133 để biết thông tin chi tiết về những tính năng này và nhiều tính năng khác có trong Chrome phiên bản mới!

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 sau để biết thêm các thay đổi trong Chrome 133.

Đăng ký

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

Ngay khi Chrome 133 được phát hành, chúng tôi sẽ có mặt tại đây để cho bạn biết những điểm mới trong Chrome!