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

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 6 năm 2026.

Rachel Andrew

Ngày xuất bản: 30 tháng 6 năm 2026

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

Chrome 149, Chrome 150 và Firefox 152 được phát hành cho phiên bản ổn định trong tháng 6. Tháng này không có bản phát hành ổn định nào của Safari. Bài đăng này sẽ giới thiệu các tính năng mới sắp ra mắt trên trình duyệt web.

Việc điều chỉnh kích thước các thành phần kiểm soát biểu mẫu bằng field-sizing sẽ trở thành Đường cơ sở

Firefox 152 hỗ trợ thuộc tính CSS field-sizing, giúp kích thước của chế độ kiểm soát biểu mẫu tự động có sẵn trên tất cả các công cụ trình duyệt chính.

Thuộc tính field-sizing cho phép các chế độ kiểm soát biểu mẫu như <textarea>, <input> và <select> thu nhỏ hoặc tăng kích thước linh hoạt để phù hợp với nội dung của chúng (field-sizing: content) thay vì giữ nguyên ở kích thước mặc định (field-sizing: fixed). Điều này giúp loại bỏ nhu cầu về các giải pháp thay thế JavaScript khi tạo các đầu vào văn bản hoặc vùng văn bản có thể đổi kích thước khi người dùng nhập.

textarea {
  field-sizing: content;
}

Các hình dạng cơ bản rect() và xywh() trong shape-outside trở thành Baseline

Với sự hỗ trợ của Chrome 149 cho các hàm hình dạng rect() và xywh() trong thuộc tính shape-outside, các hình dạng cơ bản này hiện đã có trong Baseline Mới trên các trình duyệt chính.

Hàm rect() và xywh() cho phép bạn xác định các vùng loại trừ hình chữ nhật bằng cách sử dụng toạ độ lồng ghép chính xác hoặc cú pháp gốc và kích thước. Điều này mang đến một cú pháp đơn giản và dễ đọc hơn so với việc sử dụng polygon() cho các hình dạng bao bọc số thực hình chữ nhật.

Tự động điều chỉnh tỷ lệ phông chữ bằng CSS text-fit

Chrome 150 giới thiệu thuộc tính CSS text-fit, cho phép nhà phát triển tự động điều chỉnh kích thước phông chữ cho phù hợp với chiều rộng của hộp chứa.

.headline {
  text-fit: grow;
}

Khoảng trống trang trí CSS

Chrome 149 bổ sung tính năng hỗ trợ cho các thành phần trang trí khoảng trống CSS trong bố cục lưới và flexbox. Khoảng trống trang trí cho phép bạn thêm các đường kẻ và kiểu trực tiếp vào khoảng cách giữa các mục lưới và mục linh hoạt, tương tự như column-rule trong bố cục nhiều cột.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Tìm hiểu thêm trong bài viết Gap decorations: Now in Chromium (Khoảng trống trang trí: Hiện có trong Chromium).

CSS background-clip: border-area

Chrome 150 bổ sung tính năng hỗ trợ cho background-clip: border-area từ Nền CSS cấp 4.

Giá trị này cắt nền của phần tử một cách cụ thể theo vùng viền, cho phép bạn tạo viền chuyển màu tuỳ chỉnh, các cạnh khung trang trí và hiệu ứng viền động mà không cần thêm các phần tử bao bọc hoặc phần tử giả.

Lời hứa cuộn có lập trình

Chrome 150 cập nhật các phương thức cuộn có lập trình (scrollTo(), scrollBy() và scrollIntoView()) để trả về một Promise.

Promise được trả về sẽ phân giải khi ảnh động cuộn mượt mà kết thúc, cung cấp tín hiệu đáng tin cậy để kích hoạt các hành động tiếp theo sau khi quá trình cuộn kết thúc.

Điều hướng bằng bàn phím khai báo bằng focusgroup

Chrome 150 bổ sung tính năng hỗ trợ cho thuộc tính focusgroup.

Thuộc tính focusgroup cho phép nhà phát triển quản lý một cách khai báo chế độ điều hướng bằng phím mũi tên trên các thành phần giao diện người dùng kết hợp (chẳng hạn như thanh công cụ, danh sách thẻ và trình đơn) mà không cần viết trình nghe sự kiện bàn phím theo cách thủ công.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Tìm hiểu thêm qua Thông tin giải thích về nhóm tập trung.

WebSockets được hỗ trợ trong bộ nhớ đệm cho thao tác tiến/lùi (bfcache)

Trong Chrome 149, những trang có kết nối WebSocket đang hoạt động hiện có thể chuyển sang Bộ nhớ đệm cho thao tác tiến/lùi (bfcache).

Trước đây, một kết nối WebSocket đang mở khiến trang không đủ điều kiện dùng bộ nhớ đệm cho thao tác tiến/lùi. Giờ đây, trình duyệt sẽ tự động đóng các kết nối WebSocket đang hoạt động khi nhập bfcache, cho phép trang được lưu vào bộ nhớ đệm và khôi phục ngay lập tức khi được điều hướng quay lại.

Thời gian phản hồi tiêu đề và tạm thời trong Resource Timing

Firefox 152 bổ sung tính năng hỗ trợ cho firstInterimResponseStart và finalResponseHeadersStart trên giao diện PerformanceResourceTiming.

Bạn có thể dùng các chỉ số này để đo thời gian cần thiết để trình duyệt nhận được các phản hồi HTTP tạm thời và phản hồi HTTP cuối cùng sau khi gửi yêu cầu.

Các nút hành động cho Thông báo

Firefox 152 bổ sung tính năng hỗ trợ các nút hành động trong thông báo bằng cách sử dụng thuộc tính actions trên Notification và các lựa chọn trong ServiceWorkerRegistration.showNotification().

Giờ đây, bạn có thể thêm các nút thao tác vào thông báo của hệ điều hành và theo dõi các lượt tương tác của người dùng khi họ nhấn vào các nút.

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 chương trình thử nghiệm mới trong tháng này là Firefox 153 và Safari 27.

Firefox 153 beta hỗ trợ Error.stackTraceLimit để định cấu hình độ sâu tối đa của dấu vết ngăn xếp đã ghi lại, IDBObjectStore.getAllRecords() và IDBIndex.getAllRecords() để truy xuất các bản ghi được lập chỉ mục và RTCDtlsTransport.getRemoteCertificates() để kiểm tra bảo mật WebRTC. Nhà phát triển tiện ích bổ sung cũng có được một API publicSuffix mới và phương thức userScripts.execute() để chèn tập lệnh theo yêu cầu.

Safari 27 beta giới thiệu tính năng định vị phần tử neo có nhận biết biến đổi, :headinggiả lớp để so khớp các phần tử tiêu đề, từ khoá revert-rule để quay lại các lớp xếp tầng, hỗ trợ từ khoá stretch trong tính năng định cỡ hộp và bộ chọn :host:has() phức hợp.