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 vào 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 khác ngoài <string> và sử dụng trong tất cả các thuộc tính CSS (ngoài tính năng hỗ trợ hiện có cho nội dung 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 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 Nâng cấp CSS attr().

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 phần tử 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 cuộn hoặc một phần tử chịu ảnh hưởng của vị trí cuộn của vùng chứa cuộn. Bạn có thể truy vấn các trạng thái sau:

  • stuck: Vùng chứa được định vị cố định được gắn vào một trong các cạnh của hộp cuộn.
  • snapped: Vùng chứa được căn chỉnh tính năng cuộn nhanh hiện đang được chụp nhanh theo chiều ngang hoặc dọc.
  • scrollable: Liệu có thể cuộn vùng chứa cuộn theo hướng đã 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 phần Truy vấn trạng thái cuộn CSS.

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

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

Các thuộc tính này cho phép bạn kiểm soát khoảng cách theo chiều dọc một cách chính xá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 còn rất nhiều tính năng khác.

  • Animation.overallProgress cung cấp cho bạn thông tin trình bày thuận tiện và nhất quán về mức độ tiến triển của ảnh động trong các lần lặp lại, bất kể bản chất của tiến trình đó.
  • Node.prototype.moveBefore cho phép bạn di chuyển các phần tử xung quanh cây DOM mà không cần đặt lại trạng thái của phần tử.
  • Giao diện FileSystemObserver 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ợ.

Hãy xem ghi chú phát hành đầy đủ của Chrome 133 để biết thông tin chi tiết về các tính năng này và nhiều tính năng mới khác trong Chrome!

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

Nội dung này chỉ đề cập đến 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ý

Để luôn 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.

Ngay khi Chrome 133 được phát hành, chúng tôi sẽ thông báo cho bạn về các tính năng mới trong Chrome!