Ngày xuất bản: 3 tháng 6 năm 2026
Chào mừng bạn đến với bản tóm tắt hằng tháng về Baseline. Vào tháng 5 năm 2026, một số tính năng CSS mới, thuộc tính sự kiện và nội dung bổ sung API đã trở thành Tính năng mới của Baseline, trong khi các đơn vị CSS, thuộc tính lượt tương tác của người dùng và lớp giả đã đạt đến Tính năng có sẵn rộng rãi của Baseline, cùng với các bản cập nhật quan trọng từ cộng đồng nhà phát triển.
Khảo sát về Trạng thái của CSS năm 2026
Đã đến lúc cộng đồng web kiểm tra tình hình hằng năm: khảo sát về Trạng thái của CSS năm 2026 hiện đã mở. Năm nay, các nhà tổ chức đã nỗ lực tinh chỉnh khảo sát, tập trung vào những tính năng quan trọng nhất đối với nhà phát triển trong thời đại lập trình có sự hỗ trợ của AI. Các nhà cung cấp trình duyệt theo dõi chặt chẽ những kết quả này để giúp ưu tiên lộ trình kỹ thuật và giải quyết những vấn đề mà nhà phát triển gặp phải. Hãy nhớ đóng góp ý kiến và chia sẻ trải nghiệm của bạn về bối cảnh CSS đang phát triển trước khi khảo sát kết thúc vào ngày 1 tháng 7.
Các tính năng mới của Baseline
Các tính năng trong phần này được hỗ trợ kể từ tháng 5 năm 2026 trong bộ trình duyệt cốt lõi và hiện là Tính năng mới của Baseline.
Truy vấn kiểu vùng chứa
Truy vấn vùng chứa không còn bị giới hạn về kích thước. Với truy vấn kiểu, giờ đây, bạn có thể áp dụng kiểu cho các phần tử dựa trên thuộc tính tuỳ chỉnh của vùng chứa mẹ. Điều này cho phép bạn xây dựng các thành phần có tính mô-đun cao, có thể điều chỉnh giao diện hoặc kiểu dựa trên vị trí theo ngữ cảnh mà không cần dựa vào cấu trúc lớp phức tạp.
Tìm hiểu thêm trong trang tham khảo MDN về @container.
Lớp giả :open
Trước đây, để tạo kiểu cho các phần tử có trạng thái mở và đóng (như <dialog> và <details>), bạn cần phải kiểm tra thuộc tính hoặc quản lý lớp. Lớp giả :open giúp đơn giản hoá việc này bằng cách chỉ khớp các phần tử này khi chúng đang ở trạng thái mở, cho phép sử dụng CSS rõ ràng và khai báo hơn.
Đọc về lớp giả này trong trang MDN về lớp giả :open.
ToggleEvent.source
Khi làm việc với API cửa sổ bật lên, việc phản ứng với các thay đổi về trạng thái là rất quan trọng. Thuộc tính source của giao diện ToggleEvent trả về phần tử điều khiển đã kích hoạt hành động bật/tắt cửa sổ bật lên. Điều này cho phép bạn xác định nguồn gốc của sự kiện và điều phối các lượt tương tác phức tạp trên giao diện người dùng.
Tìm hiểu thêm trong tài liệu MDN về ToggleEvent.source.
Thuộc tính image-rendering
Thuộc tính CSS image-rendering cho phép bạn kiểm soát thuật toán điều chỉnh tỷ lệ được dùng khi đổi kích thước hình ảnh. Điều này đặc biệt hữu ích đối với nghệ thuật điểm ảnh, hình ảnh có độ phân giải thấp hoặc mã QR, trong đó việc tránh nội suy mờ và giữ cho tỷ lệ sắc nét và có dạng pixel là rất quan trọng.
Tìm hiểu cách sử dụng thuộc tính này trên trang MDN về image-rendering.
text-decoration-skip-ink: all
Đường gạch chân đi qua các phần tử có phần đuôi kéo dài xuống dưới đường cơ sở đôi khi có thể trông lộn xộn. Mặc dù text-decoration-skip-ink: auto chỉ bỏ qua mực khi giao nhau, nhưng việc đặt thành all sẽ buộc đường gạch chân bỏ qua tất cả các ký tự, bất kể có giao nhau hay không, giúp bạn kiểm soát nhiều hơn về tính thẩm mỹ của kiểu chữ.
Đọc thông tin chi tiết trong hướng dẫn MDN về text-decoration-skip-ink.
SharedWorker
API SharedWorker cung cấp một trình chạy chuyên biệt trong nền mà bạn có thể truy cập từ nhiều ngữ cảnh duyệt web, chẳng hạn như các cửa sổ, thẻ hoặc iframe khác nhau trên cùng một nguồn gốc. Điều này rất hữu ích để chia sẻ trạng thái, quản lý kết nối hoặc điều phối các tác vụ trong nền trên các ranh giới thẻ.
Hãy xem tài liệu MDN về SharedWorker.
Các tính năng có sẵn rộng rãi của Baseline
Các tính năng sau đây đã trở thành Tính năng có sẵn rộng rãi của Baseline, nghĩa là các tính năng này hiện có khả năng tương thích rộng rãi và có thể sử dụng trong các dự án của bạn.
Đơn vị độ dài lh
Đơn vị tương đối lh tương ứng với chiều cao dòng được tính toán của phần tử mà đơn vị này được sử dụng. Điều này giúp bạn dễ dàng định kích thước các phần tử (chẳng hạn như huy hiệu biểu tượng hoặc điểm nổi bật trên nền) để khớp hoàn hảo với chiều cao của một dòng văn bản.
Tìm hiểu thêm trong tài liệu tham khảo MDN về đơn vị độ dài.
Đơn vị độ dài rlh
Tương tự như lh, đơn vị rlh biểu thị chiều cao dòng, nhưng cụ thể là của phần tử gốc (<html>). Điều này cho phép bạn thiết lập nhịp điệu dọc nhất quán trên toàn bộ trang, bất kể kích thước phông chữ cục bộ hoặc ghi đè chiều cao dòng.
Đọc thêm trong tài liệu tham khảo MDN về đơn vị độ dài.
Navigator.userActivation
Nhiều API web (chẳng hạn như phát video, cửa sổ bật lên hoặc quyền truy cập vào bảng nhớ tạm) yêu cầu lượt tương tác của người dùng trước khi có thể kích hoạt. Thuộc tính Navigator.userActivation trả về một đối tượng chứa thông tin về trạng thái kích hoạt hiện tại và trước đây của người dùng trên cửa sổ, cho phép tập lệnh xác minh xem cử chỉ của người dùng đã xảy ra hay chưa.
Tìm hiểu cách sử dụng thuộc tính này trên trang MDN về Navigator.userActivation.
clip-path
Thuộc tính CSS clip-path cho phép bạn tạo một vùng cắt xác định phần nào của phần tử sẽ hiển thị. Bằng cách sử dụng các hình dạng cơ bản (như hình tròn, hình elip hoặc đa giác) hoặc đường dẫn SVG, bạn có thể tạo các thiết kế và hiệu ứng chuyển đổi bố cục hấp dẫn mà không cần ẩn nội dung tràn.
Hãy xem thông tin chi tiết về cách triển khai trên trang MDN về clip-path.
Lớp giả :user-invalid
Không giống như :invalid, lớp giả này áp dụng kiểu ngay khi trang tải (thường dẫn đến trải nghiệm người dùng kém), lớp giả :user-invalid chỉ khớp với các phần tử biểu mẫu không hợp lệ sau khi người dùng tương tác với chúng. Điều này có nghĩa là bạn có thể hiển thị ý kiến phản hồi về quá trình xác thực biểu mẫu sau khi người dùng rời khỏi trường.
Tìm hiểu cách hoạt động của lớp giả này trong tài liệu MDN về :user-invalid.
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ỳ nội dung nào liên quan đến Baseline và chúng tôi sẽ đảm bảo nội dung đó được ghi lại trong phiên bản sau! Nếu bạn có câu hỏi hoặc muốn cung cấp ý kiến phản hồi về Baseline, bạn có thể gửi vấn đề trong công cụ theo dõi lỗi của chúng tôi.