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

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 12 năm 2025.

Rachel Andrew

Xuất bản: Ngày 16 tháng 12 năm 2025

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

Chrome 143, Firefox 146 và Safari 26.2 được phát hành cho phiên bản ổn định trong tháng 12. Bài đăng này sẽ giới thiệu nhiều tính năng mới trong tháng này, trong đó có một số tính năng mới có trong Baseline.

Giờ đây, quy tắc @scope CSS là Baseline

Firefox 146 bao gồm quy tắc @scope CSS cho phép bạn chọn các phần tử trong các cây con DOM cụ thể. Xác định một phạm vi mà trong đó bộ chọn có thể nhắm đến các phần tử và bạn tránh được các bộ chọn quá cụ thể và dài. Ví dụ: CSS sau đây chỉ nhắm đến các phần tử <img> nếu chúng nằm trong một phần tử có lớp .card.

@scope (.card) {
    img {
        border-color: green;
    }
}

Với Firefox 146, quy tắc @ hữu ích này hiện đã có trong Baseline Newly. Tìm hiểu thêm về vấn đề này trong bài viết Giới hạn phạm vi của bộ chọn bằng quy tắc @scope @ của CSS.

Hàm contrast-color() của CSS

Ngoài ra, trong Firefox 146 còn có hàm contrast-color(). Hàm này lấy một giá trị màu và trả về một màu tương phản, nhằm đảm bảo độ tương phản tối thiểu theo tiêu chuẩn AA của WCAG.

Để xem thêm ví dụ, hãy xem bài viết Cách để trình duyệt chọn màu tương phản trong CSS trên blog WebKit.

Browser Support

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

Source

Firefox là trình duyệt đầu tiên cung cấp thuộc tính text-decoration-inset. Thuộc tính này cho phép bạn điều chỉnh điểm bắt đầu và điểm kết thúc của phần trang trí văn bản của một phần tử để có thể rút ngắn, kéo dài hoặc thay đổi vị trí của phần trang trí đó so với văn bản được kết xuất.

Thuộc tính CSS font-language-override

Chrome 143 bao gồm thuộc tính font-language-override. Điều này cho phép bạn ghi đè hành vi kiểu chữ cho một ngôn ngữ cụ thể. Điều này sẽ hữu ích nếu bạn đang sử dụng một kiểu chữ không hỗ trợ đúng cách cho một ngôn ngữ, bạn có thể chọn sử dụng các glyph từ một ngôn ngữ tương tự có khả năng hỗ trợ tốt hơn.

Browser Support

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

Source

Các truy vấn vùng chứa dự phòng được cố định của CSS

Chrome 143 giới thiệu @container anchored(fallback) để tạo kiểu cho các phần tử con của phần tử được định vị bằng neo dựa trên phần tử nào trong số position-try-fallbacks được áp dụng.

Bạn có thể dùng các truy vấn như vậy để tạo kiểu cho dây buộc của một phần tử được cố định hoặc các ảnh động của phần tử đó, dựa trên cách phần tử cố định và phần tử được cố định được định vị tương ứng với nhau.

Cú pháp tương đối theo cạnh cho background-position-x/y dạng đầy đủ

Ngoài ra, trong Chrome và hiện có trên tất cả các trình duyệt, bạn có thể xác định vị trí của hình nền so với một trong các cạnh của hình nền trong các thuộc tính dài cho background-position. Ví dụ:

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 49.
  • Safari: 15.4.

Thuộc tính overallProgress của ảnh động

Safari 26.2 có overallProgress. Thuộc tính chỉ đọc này của giao diện Animation trả về một số từ 0 đến 1 cho biết tiến trình tổng thể của ảnh động hướng đến trạng thái hoàn tất.

Tài sản này hiện là tài sản Mới có sẵn cơ bản.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 142.
  • Safari Technology Preview: supported.

Source

Hiện đã có LCP và INP trong Baseline Newly

Các chỉ số Nội dung lớn nhất hiển thị (LCP) và Lượt tương tác đến nội dung hiển thị tiếp theo (INP) hiện đã có trong Baseline Newly, với sự hỗ trợ trong Safari 26.2 cho Contentful Paint API và Event Timing API cần thiết để đo lường các chỉ số này.

Những tính năng này đã được đưa vào Interop 2025 và hiện bạn có thể đo lường các chỉ số này trong phiên bản mới nhất của tất cả các trình duyệt chính.

Largest Contentful Paint API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

Source

CHIPS đạt đến trạng thái Baseline Newly available (Mới có trong Baseline)

Safari 26.2 cũng bao gồm CHIPS (Cookie có trạng thái được phân vùng độc lập), cho phép bạn chọn sử dụng cookie trong bộ nhớ được phân vùng, với một hũ cookie riêng cho mỗi trang web cấp cao nhất.

Browser Support

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

Source

hidden="until-found"

Safari 26.2 hỗ trợ hidden="until-found", hiện đã có trong Baseline.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 139.
  • Safari Technology Preview: supported.

Source

Các thuộc tính command và commandfor

Ngoài ra, đối với HTML trong Safari 26.2, chúng tôi hỗ trợ command và commandfor trên các nút. Điều này cung cấp một cách thức khai báo để kiểm soát cửa sổ bật lên và hộp thoại.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

Source

Tìm hiểu thêm trong bài viết Giới thiệu về command và commandfor.

Sự kiện scrollend

Một tính năng khác mới có trong Baseline với Safari 26.2 là sự kiện scrollend. Sự kiện này sẽ kích hoạt khi quá trình cuộn hoàn tất. Hãy tìm hiểu thêm về sự kiện này trong bài viết Scrollend, một sự kiện JavaScript mới.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

Thuộc tính scrollbar-color

Thuộc tính scrollbar-color cho phép bạn thay đổi màu của thanh cuộn và đường dẫn thanh cuộn. Với Safari 26.2, tính năng này cũng trở thành Cơ sở mới có sẵn.

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: not supported.

Source

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

Phiên bản trình duyệt beta giúp 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 để 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 đó ra mắt trên toàn thế giới. Các phiên bản beta mới trong tháng này là Firefox 147 và Chrome 144.

Chrome 144 bao gồm phần tử giả ::search-text để tạo kiểu cho kết quả tìm kiếm trong trang và hỗ trợ scrolled cho @scroll-state, cho phép bạn tạo kiểu cho các phần tử con của vùng chứa dựa trên hướng di chuyển gần đây nhất. Ngoài ra, còn có Temporal API, với các đối tượng và hàm tiêu chuẩn để xử lý ngày và giờ.

Firefox 147 là một bản phát hành thú vị, bao gồm tính năng định vị phần tử neo CSS, các loại hiệu ứng chuyển đổi khung hiển thị và Navigation API.

Để biết thêm thông tin về các tính năng thú vị của CSS và giao diện người dùng đã ra mắt trong năm nay, hãy xem CSS Wrapped 2025.