Xuất bản: Ngày 17 tháng 7 năm 2026
Chào mừng bạn đến với bản tin hằng tháng của Baseline. Vào tháng 6 năm 2026, field-sizingđã trở thành Baseline Newly available, cho phép các chế độ kiểm soát biểu mẫu tự động điều chỉnh theo nội dung của chúng. Trong khi đó, nhiều tính năng CSS, HTML và Web API đã đạt được trạng thái Baseline Widely available (Được hỗ trợ rộng rãi), cùng với các thông tin cập nhật quan trọng từ cộng đồng nhà phát triển.
Cảnh báo theo đường cơ sở trên trang Trạng thái nền tảng web
Giờ đây, bạn có thể dễ dàng theo dõi thời điểm các tính năng trên web trở nên có thể tương tác với nhau nhờ Thông báo về đường cơ sở trên trang tổng quan Trạng thái nền tảng web. Khi đăng nhập bằng GitHub, bạn có thể đăng ký nhận thông báo về các tính năng khi chúng trở thành Baseline Newly available (Mới có sẵn trong đường cơ sở), Widely available (Có sẵn trên diện rộng) hoặc nhận được các bản triển khai trình duyệt mới. Bạn có thể định cấu hình chế độ nhận thông tin cập nhật qua email hoặc nguồn cấp dữ liệu RSS tuỳ chỉnh theo lịch hằng tháng, hằng tuần hoặc ngay lập tức. Bạn có thể đặt phạm vi cảnh báo cho các cụm từ tìm kiếm đã lưu (chẳng hạn như tất cả các tính năng HTML), tạo bản tin tuỳ chỉnh, tạo danh sách tính năng có thể chia sẻ hoặc định cấu hình webhook Slack để thông báo cho nhóm kỹ thuật của bạn.
Tìm hiểu thêm trong bài viết Ra mắt Cảnh báo cơ sở.
Các tính năng cơ bản mới ra mắt
Các tính năng trong phần này được hỗ trợ kể từ tháng 6 năm 2026 trong bộ trình duyệt cốt lõi và hiện đã có trong Baseline Newly.
field-sizing
Thuộc tính CSS field-sizing giúp kiểm soát hành vi định cỡ của các phần tử biểu mẫu (chẳng hạn như <textarea>, <input> và <select>) thường có kích thước cố định mặc định. Với các chế độ kiểm soát biểu mẫu field-sizing: content, các chế độ này sẽ tự động mở rộng hoặc thu nhỏ để phù hợp với nội dung của chúng, giảm nhu cầu sử dụng các tập lệnh tuỳ chỉnh tự động đổi kích thước bằng JavaScript.
Tìm hiểu thêm trong trang tham khảo MDN về field-sizing.
Các tính năng cơ bản được cung cấp rộng rãi
Các tính năng sau đây đã trở thành Baseline Widely available (Được cung cấp rộng rãi), tức là hiện có khả năng tương thích và sử dụng rộng rãi trong các dự án của bạn.
:has() lớp giả
Bộ chọn phần tử mẹ :has() CSS cho phép bạn tạo kiểu cho một phần tử dựa trên các phần tử con hoặc các phần tử anh chị em tiếp theo. Lớp giả chức năng này cho phép các mẫu bố cục có điều kiện ngay trong CSS mà không cần JavaScript để kiểm tra cấu trúc DOM.
Đọc thêm trong trang MDN cho lớp giả :has.
HTMLIFrameElement.loading
Thuộc tính loading trên các phần tử <iframe> cho phép tải từng phần cho các khung được nhúng. Bằng cách chỉ định loading="lazy", các trình duyệt sẽ hoãn tải iframe ngoài màn hình cho đến khi chúng được cuộn gần khung nhìn, giúp tiết kiệm băng thông mạng và chi phí tải trang ban đầu.
Xem thông tin chi tiết trên tài liệu tham khảo MDN cho HTMLIFrameElement.loading.
CanvasRenderingContext2D.reset()
Phương thức reset() trên ngữ cảnh canvas 2D sẽ xoá trạng thái ngữ cảnh vẽ, đặt lại các thuộc tính như biến đổi, đường cắt, kiểu đường kẻ và kiểu tô về giá trị mặc định. Điều này cho phép sử dụng lại một ngữ cảnh canvas một cách rõ ràng mà không cần dọn dẹp thuộc tính theo cách thủ công.
Tìm hiểu thêm trên tài liệu MDN cho CanvasRenderingContext2D.reset.
Đơn vị chiều dài cap
Đơn vị tương đối với phông chữ cap tương ứng với chiều cao chữ hoa danh nghĩa của phông chữ của phần tử. Đường cơ sở này cho phép bạn căn chỉnh và định cỡ các phần tử tương ứng với chiều cao của chữ cái viết hoa, giúp bạn có được bố cục kiểu chữ chính xác.
Tìm hiểu thêm trong tài liệu tham khảo MDN về các đơn vị chiều dài.
Tài sản counter-set
Thuộc tính CSS counter-set đặt một bộ đếm CSS thành một giá trị cụ thể, bổ sung cho counter-reset và counter-increment. Tính năng này giúp bạn kiểm soát khi thao tác với danh sách có đánh số, dàn ý tài liệu hoặc chuỗi bộ đếm tuỳ chỉnh.
Đọc thông tin chi tiết trên trang MDN cho counter-set.
createImageBitmap()
Phương thức tĩnh createImageBitmap() tạo một hình ảnh bitmap không đồng bộ từ nhiều nguồn hình ảnh, bao gồm <img>, <canvas>, Blob hoặc ImageData. Vì nó giải mã hình ảnh ở ngoài luồng chính, nên nó tránh chặn hiệu suất giao diện người dùng khi xử lý đồ hoạ canvas phức tạp.
Hãy xem thông tin chi tiết về cách triển khai trên tài liệu MDN cho createImageBitmap.
Loại dữ liệu <easing-function>
Kiểu dữ liệu CSS <easing-function> mô tả các đường cong tốc độ thay đổi toán học cho hiệu ứng chuyển đổi và ảnh động. Ngoài các từ khoá tiêu chuẩn như ease-in hoặc cubic-bezier(), thành phần này còn hỗ trợ các hàm như linear() để tạo hiệu ứng lò xo hoặc hiệu ứng nảy tuỳ chỉnh.
Tìm hiểu cách sử dụng tính năng này trên tài liệu tham khảo MDN cho easing-function.
Bộ chọn lồng &
Bộ chọn lồng & sẽ neo rõ ràng bộ chọn quy tắc con vào bộ chọn mẹ khi sử dụng tính năng lồng CSS tích hợp. Điều này đảm bảo tính rõ ràng và các quy tắc cụ thể chính xác khi xác định các trạng thái di chuột, tiêu điểm hoặc giả lớp lồng nhau.
Đọc thông tin chi tiết trên hướng dẫn của MDN về bộ chọn lồng nhau.
Tải trước thích ứng bằng rel="preload"
Thuộc tính media trên các phần tử <link rel="preload"> cho phép tải trước các thành phần chính một cách linh hoạt. Bằng cách kết hợp rel="preload" với các truy vấn nội dung nghe nhìn, trình duyệt chỉ tải xuống những tài sản phù hợp với chiều rộng khung nhìn hoặc đặc điểm hiển thị của người dùng trong giai đoạn đầu của vòng đời tải.
Tìm hiểu cách sử dụng thuộc tính này trong tài liệu MDN cho rel="preload".
HTMLMediaElement.preservesPitch
Thuộc tính preservesPitch trên các phần tử <audio> và <video> kiểm soát việc trình duyệt có điều chỉnh cao độ âm thanh khi thay đổi playbackRate hay không.
Khi bạn đặt thành false, âm thanh sẽ thay đổi khi bạn tăng hoặc giảm tốc độ phát nội dung nghe nhìn.
Xem thông tin chi tiết trên trang MDN cho HTMLMediaElement.preservesPitch.
:dir() lớp giả
Lớp giả :dir() CSS so khớp các phần tử dựa trên hướng văn bản (chẳng hạn như ltr hoặc rtl), hướng trùng khớp được kế thừa từ các thuộc tính HTML như dir hoặc ngữ cảnh văn bản được tính toán.
Tìm hiểu thêm trong trang MDN cho lớp giả :dir.
Hàm toán học pow()
Hàm pow() CSS tính toán các giá trị luỹ thừa trực tiếp trong các khai báo CSS, nâng một số cơ sở lên một số mũ (ví dụ: pow(2, 3)). Điều này giúp đơn giản hoá việc mở rộng quy mô thích ứng và các mối quan hệ lưới toán học.
Đọc thông tin chi tiết trên tài liệu tham khảo MDN cho hàm pow.
Thuộc tính mask của CSS
Thuộc tính viết tắt mask của CSS sẽ ẩn các phần của một phần tử bằng cách sử dụng hình ảnh hoặc độ dốc làm lớp cắt. Thành phần này kết hợp các thuộc tính phụ như mask-image, mask-position và mask-repeat để tạo các hiệu ứng che hình ảnh phức tạp.
Tìm hiểu thêm trên trang MDN cho thuộc tính mặt nạ.
@media (scripting)
Tính năng scripting media kiểm tra xem tập lệnh phía máy khách (chẳng hạn như JavaScript) có được bật và có sẵn trong ngữ cảnh trình duyệt hay không. Điều này cho phép các kiểu cải tiến tăng dần nhắm đến những môi trường có hoặc không có JavaScript đang hoạt động.
Tìm hiểu thêm trong tài liệu tham khảo MDN về tính năng tập lệnh đa phương tiện.
URL.canParse()
Phương thức tĩnh URL.canParse() kiểm tra xem một chuỗi nhất định có phải là URL hợp lệ, có thể phân tích cú pháp (với URL cơ sở không bắt buộc) hay không mà không phát sinh trường hợp ngoại lệ, đơn giản hoá quá trình xác thực URL trong thời gian chạy trước khi tạo thực thể các đối tượng URL.
Hãy xem thông tin chi tiết về cách triển khai trên tài liệu MDN cho URL.canParse.
Storage Access API
Storage Access API cung cấp một cơ chế để nội dung trên nhiều trang web được nhúng trong <iframe> của bên thứ ba yêu cầu quyền truy cập vào cookie và bộ nhớ chưa được phân vùng, cho phép xác thực và tương tác có trạng thái trên các ranh giới miền.
Đọc thông tin chi tiết trên trang MDN về Storage Access API.
Thế là hoàn tất
Hãy cho chúng tôi biết nếu chúng tôi bỏ lỡ bất kỳ thông tin nào liên quan đến Baseline. Chúng tôi sẽ đảm bảo thông tin đó được ghi lại trong phiên bản sau! Nếu có thắc mắc hoặc muốn gửi ý kiến phản hồi về Baseline, bạn có thể gửi vấn đề trong công cụ theo dõi vấn đề của chúng tôi.