Điểm mới trên nền tảng web vào tháng 2

Khám phá một số tính năng thú vị đã ra mắt trong các trình duyệt web phiên bản ổn định và thử nghiệm vào tháng 2 năm 2025.

Rachel Andrew

Ngày xuất bản: 28 tháng 2 năm 2025

Bản phát hành trình duyệt ổn định

Vào tháng 2 năm 2025, Firefox 135 và Chrome 133 đã trở nên ổn định. Bài đăng này xem xét các tính năng mới được thêm vào nền tảng web.

Kiểm tra các chức năng WebAuthn

Firefox 135 và Chrome 133 đều hỗ trợ thêm phương thức tĩnh PublicKeyCredential.getClientCapabilities(). Điều này cho phép bạn kiểm tra xem trình duyệt có hỗ trợ các tính năng của API Xác thực web hay không mà không cần phải sử dụng tính năng đánh hơi trình duyệt.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 cũng bao gồm các tính năng từ tính năng phân tích cú pháp JSON với đề xuất nguồn – đối số context của tham số reviver JSON.parse, JSON.isRawJSON() và JSON.rawJSON().

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 135.
  • Safari: not supported.

Source

Giá trị gợi ý của thuộc tính cửa sổ bật lên

Chrome 133 thêm một giá trị thứ ba cho thuộc tính popover, đó là popover="hint". Gợi ý, thường được liên kết với các hành vi thuộc loại "chú giải công cụ", có hành vi hơi khác. Giờ đây, bạn có thể mở một cửa sổ bật lên gợi ý không liên quan trong khi ngăn xếp hiện có của các cửa sổ bật lên tự động vẫn mở.

Ví dụ chuẩn là bộ chọn <select> đang mở (popover="auto") và chú giải công cụ được kích hoạt bằng cách di chuột (popover="hint") sẽ hiển thị. Thao tác đó không đóng bộ chọn <select>.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Đọc thêm trong phần Cửa sổ bật lên = gợi ý.

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

Chrome 133 có một bộ sưu tập CSS bổ sung rất hữu ích. Bản phát hành Chrome này bao gồm phần mở rộng cho attr() được chỉ định trong CSS cấp 5, 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 tính năng hỗ trợ hiện có cho nội dung phần tử giả).

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

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

Ngoài ra, trong Chrome 133, hãy 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 đặt 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.

Ngoài ra, còn có một giá trị mới cho container-type: scroll-state cho phép truy vấn các vùng chứa.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Hãy đọc bài viết scroll-state() CSS để tìm hiểu thêm.

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

Ngoài ra, trong CSS cho Chrome 133 còn có các thuộc tính text-box-trim và text-box-edge, cùng với thuộc tính viết tắt text-box, giúp bạn kiểm soát tốt hơn việc căn chỉnh theo chiều dọc của văn bản.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Tìm hiểu thêm về cách hoạt động của thuộc tính hữu ích này trong CSS text-box-trim.

Di chuyển giữ nguyên trạng thái DOM

Chrome 133 thêm một phần tử DOM gốc (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ử.

Khi di chuyển thay vì xoá và chèn, trạng thái sau đây sẽ được giữ nguyên:

  • Các phần tử <iframe> vẫn được tải.
  • Phần tử đang hoạt động vẫn là tiêu điểm.
  • Cửa sổ bật lên, toàn màn hình và hộp thoại phương thức vẫn mở.
  • Hiệu ứng chuyển đổi và ảnh động CSS tiếp tục.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Giao diện FileSystemObserver

Giao diện FileSystemObserver được thêm vào Chrome 133 sẽ thông báo cho các trang web về những thay đổi đối với hệ thống tệp. Các trang web quan sát những thay đổi đối với các tệp và thư mục mà người dùng đã cấp quyền trước đó, trong thiết bị cục bộ của người dùng hoặc trong Hệ thống tệp bộ chứa (còn gọi là Hệ thống tệp riêng của nguồn gốc) và được thông báo về thông tin thay đổi cơ bản, chẳng hạn như loại thay đổi.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Bản phát hành trình duyệt beta

Các phiên bản trình duyệt beta cho bạn xem trước những tính năng sẽ có trong phiên bản ổn định tiếp theo của trình duyệt. Đây là thời điểm thích hợp để thử nghiệm các tính năng mới hoặc việc xoá những tính năng có thể ảnh hưởng đến trang web của bạn trước khi bản phát hành đó được cung cấp cho mọi người. Các bản thử nghiệm beta mới là Firefox 136, Safari 18.4 và Chrome 134. Các bản phát hành này mang đến nhiều tính năng tuyệt vời cho nền tảng. Hãy xem ghi chú phát hành để biết tất cả thông tin chi tiết. Sau đây là một số điểm nổi bật.

Bản Safari beta mới nhất mang đến một danh sách dài các tính năng bổ sung và cải tiến, bao gồm một số tính năng mà chúng tôi dự kiến sẽ trở thành tính năng mới trong Baseline sau khi trình duyệt này ổn định. Ví dụ: writing-mode: sideways-rl và writing-mode: sideways-lr, phương thức tĩnh supports() cho ClipboardItem và toàn bộ danh sách các mục từ đề xuất của Trình trợ giúp Iterator.

Cả Safari 18.4 beta và Firefox 136 đều có Cookie Store API. API này sẽ có trong Baseline New sau khi cả hai trình duyệt được phát hành.

Firefox 136 bao gồm các lớp giả :open và :has-slotted, lớp sau cũng có trong Chrome 134. Tệp này cũng bao gồm Intl.DurationFormat, sau đó sẽ là Baseline Newly available (Cơ sở mới có sẵn).

Chrome 134 bao gồm các phần tử <select> có thể tuỳ chỉnh, thuộc tính CSS dynamic-range-limit và chức năng đóng nhẹ cho các phần tử <dialog>.