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

Khám phá một số tính năng thú vị đã xuất hiện trong các trình duyệt web ổn định và beta trong tháng 5 năm 2026.

Rachel Andrew

Xuất bản: Ngày 29 tháng 5 năm 2026

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

Chrome 148, Firefox 151 và Safari 26.5 được phát hành cho phiên bản ổn định trong tháng 5. Bài đăng này sẽ xem xét nhiều tính năng mới trong tháng này.

Pseudo class :open CSS trở thành Cơ sở

Safari 26.5 chủ yếu là bản phát hành các bản sửa lỗi cho các tính năng hiện có. Tuy nhiên, bản cập nhật này cũng hỗ trợ giả lớp :open, giúp tính năng này có trong Baseline mới phát hành.

Lớp giả :open cho phép bạn tạo kiểu cho các phần tử có trạng thái "mở" và "đóng" khi chúng đang mở. Điều này áp dụng cho các phần tử như <details> và <dialog> khi chúng đang mở, cũng như các phần tử <select> và <input> (chẳng hạn như bộ chọn màu hoặc bộ chọn ngày) khi giao diện bộ chọn của chúng đang hiển thị. Điều này mang đến một giải pháp thay thế rõ ràng và ngữ nghĩa hơn cho việc tạo kiểu bằng cách sử dụng các thuộc tính như details[open].

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 136.
  • Safari: 26.5.

Source

Các truy vấn vùng chứa chỉ có tên CSS sẽ trở thành Baseline

Với Chrome 148 được phát hành trong tháng này, các truy vấn chỉ chứa tên hiện đã có trong Baseline Newly available.

Trước đây, khi viết một truy vấn vùng chứa, bạn phải chỉ định điều kiện truy vấn về kích thước hoặc kiểu cùng với tên vùng chứa và thiết lập loại vùng chứa bằng thuộc tính container-type. Giờ đây, bạn chỉ cần truy vấn sự hiện diện của một vùng chứa có tên theo tên của vùng chứa đó mà không cần thêm bất kỳ điều kiện nào khác. Hơn nữa, bạn không cần đặt container-type trên đối tượng cấp trên nếu chỉ truy vấn theo tên:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 149.
  • Safari: 26.4.

Các truy vấn về kiểu vùng chứa cho các thuộc tính tuỳ chỉnh sẽ trở thành Baseline

Firefox 151 hỗ trợ các truy vấn style() trên @container, giúp các truy vấn về kiểu vùng chứa cho các thuộc tính tuỳ chỉnh Mới có sẵn trong Baseline.

Truy vấn kiểu vùng chứa cho phép bạn áp dụng kiểu cho các phần tử dựa trên thuộc tính CSS của vùng chứa mẹ. Mặc dù truy vấn kích thước rất mạnh mẽ, nhưng truy vấn kiểu cho phép bạn truy vấn các tính năng không liên quan đến kích thước. Cụ thể, bản phát hành này hỗ trợ đầy đủ trên nhiều trình duyệt để truy vấn các thuộc tính tuỳ chỉnh. Ví dụ: bạn có thể kiểm tra xem một thuộc tính tuỳ chỉnh --theme có được đặt thành dark trên một vùng chứa mẹ hay không:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Tính năng tải từng phần cho các phần tử video và âm thanh

Chrome 148 giới thiệu tính năng tải từng phần gốc cho các phần tử <video> và <audio> có thuộc tính loading="lazy".

Giống như các phần tử <img> và <iframe>, giờ đây, bạn có thể hướng dẫn trình duyệt trì hoãn việc tải các tài nguyên đa phương tiện cho đến khi chúng gần với khung nhìn. Điều này giúp cải thiện hiệu suất tải trang, tiết kiệm băng thông và giảm mức sử dụng dữ liệu cho người dùng. Tìm hiểu thêm từ nhóm đã triển khai tính năng này trong bài viết Cách sử dụng tính năng tải trì hoãn video và âm thanh HTML tiêu chuẩn trên web ngay hôm nay.

Browser Support

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

Source

API Chế độ hình trong hình cho tài liệu

Firefox 151 hỗ trợ Document Picture-in-Picture API trên các nền tảng máy tính.

Không giống như API Hình trong hình tiêu chuẩn cho phép bạn xem một phần tử <video> trong cửa sổ luôn ở trên cùng, API Hình trong hình của tài liệu cho phép bạn mở một cửa sổ luôn ở trên cùng chứa nội dung HTML tuỳ ý. Điều này cho phép các lớp phủ tương tác đa dạng như lưới người tham gia hội nghị truyền hình, bảng giá chứng khoán tương tác hoặc bộ hẹn giờ vẫn tồn tại ngay cả khi bạn rời khỏi trang.

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: 151.
  • Safari: not supported.

Source

Web Serial API mở rộng khả năng hỗ trợ nền tảng

Firefox 151 bổ sung tính năng hỗ trợ Web Serial API trên các nền tảng máy tính và Chrome 148 bổ sung tính năng hỗ trợ API này trên Android.

Web Serial API cung cấp cho các trang web một cách để đọc và ghi vào các thiết bị nối tiếp, chẳng hạn như bộ vi điều khiển, máy in 3D, bảng phát triển và phần cứng ngoại vi. Trong Firefox, để sử dụng Web Serial API, người dùng phải cài đặt một tiện ích bổ sung quyền đối với trang web được tạo theo cách tổng hợp, đảm bảo một cơ chế an toàn và có kiểm soát để quản lý quyền truy cập.

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 151.
  • Safari: not supported.

Source

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

Phiên bản trình duyệt beta cho phép bạn xem trước các tính năng 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 để kiểm thử các tính năng mới hoặc việc xoá các 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 triển khai trên toàn thế giới. Các phiên bản beta mới trong tháng này là Chrome 149 và Firefox 152. Không có phiên bản Safari beta nào trong tháng này.

Chrome 149 beta có các bản cập nhật CSS thú vị như khoảng trống trang trí CSS, cho phép bạn tạo kiểu cho khoảng trắng (khoảng trống) giữa các mục linh hoạt và lưới. Nền tảng này cũng hỗ trợ path() và shape() cũng như các hàm hình dạng cơ bản rect() và xywh() trong thuộc tính shape-outside, đồng thời hỗ trợ path-length dưới dạng một thuộc tính CSS. Về phía API, các phương thức cuộn theo chương trình như scrollTo(), scrollBy() và scrollIntoView() hiện trả về Lời hứa phân giải khi quá trình cuộn mượt hoàn tất và các trang có kết nối WebSocket đang hoạt động hiện có thể đủ điều kiện để lưu vào bộ nhớ đệm lui/tới (BFCache).

Firefox 152 beta giới thiệu tính năng hỗ trợ đầy đủ cho thuộc tính field-sizing, cho phép các chế độ kiểm soát biểu mẫu tự động điều chỉnh kích thước cho phù hợp với nội dung của chúng. Thao tác này cũng thêm các thuộc tính actions và maxActions vào giao diện Notification, đồng thời hỗ trợ options.pseudoElement trong Element.getAnimations().