Xuất bản: Ngày 2 tháng 3 năm 2026
Chào mừng bạn đến với bản tóm tắt Baseline tháng 1 năm 2026. Mỗi tháng, chúng tôi sẽ nêu bật những tính năng của nền tảng web đã đạt được các cột mốc mới trong Baseline, giúp bạn hiểu rõ những công cụ có thể sử dụng trong các dự án của mình ngay hôm nay.
Tháng 1 là một khởi đầu thú vị cho năm mới, với một số API và đơn vị CSS quan trọng chuyển sang danh mục Mới có sẵn, cùng với một điểm cải tiến lớn về bố cục trở thành Có sẵn rộng rãi.
Đường cơ sở Các tính năng mới ra mắt
Các tính năng web sau đây sẽ có trong Baseline từ tháng 1 năm 2026.
Chuyển đổi chế độ xem đang kích hoạt
Lớp giả CSS :active-view-transition hiện đã có trong Baseline Newly. Bộ chọn này cho phép nhà phát triển nhắm đến và tạo kiểu cụ thể cho phần tử gốc của một tài liệu trong khi quá trình chuyển đổi khung hiển thị đang diễn ra. Điều này đặc biệt hữu ích khi áp dụng các kiểu hoặc điều chỉnh chung chỉ nên tồn tại trong giai đoạn chuyển đổi, chẳng hạn như thay đổi màu nền của lớp phủ chuyển đổi hoặc điều chỉnh chỉ mục z của các lớp cụ thể để đảm bảo luồng hình ảnh mượt mà.
Các mô-đun JavaScript trong trình chạy dịch vụ
Giờ đây, các service worker hỗ trợ các mô-đun JavaScript trên tất cả các công cụ trình duyệt chính. Bằng cách đặt lựa chọn type: 'module' khi gọi navigator.serviceWorker.register(), bạn có thể sử dụng các câu lệnh import và export tiêu chuẩn trong tập lệnh trình chạy dịch vụ. Điều này giúp các worker dịch vụ phù hợp với các phương pháp phát triển JavaScript hiện đại, cho phép tổ chức mã tốt hơn, quản lý phần phụ thuộc dễ dàng hơn và khả năng chia sẻ mã giữa luồng chính và worker nền.
Navigation API
Navigation API cung cấp một giải pháp thay thế hiện đại, được xây dựng cho mục đích cụ thể cho History API cũ, được thiết kế đặc biệt cho nhu cầu của các ứng dụng một trang (SPA). API này cung cấp một cách tập trung để bắt đầu, chặn và quản lý tất cả các loại thao tác điều hướng, bao gồm cả những thao tác do nút quay lại và nút chuyển tiếp của trình duyệt kích hoạt. Với các sự kiện như Maps, nhà phát triển có thể triển khai hoạt động định tuyến phía máy khách mượt mà hơn với ít mã nguyên mẫu hơn. Để tìm hiểu sâu hơn về cách thay đổi này ảnh hưởng đến cách chúng ta xây dựng cho web, hãy xem bài đăng chuyên biệt trên blog của chúng tôi: Định tuyến phía máy khách hiện đại: Navigation API.
rcap đơn vị CSS
Đơn vị rcap là một đơn vị độ dài tương đối theo phông chữ gốc, bằng với "chiều cao chữ hoa" (chiều cao danh nghĩa của chữ cái viết hoa) của phông chữ của phần tử gốc. Điều này cho phép bố cục kiểu chữ chính xác có tỷ lệ tương ứng với kiểu chữ chính được dùng trên trang web, thay vì chỉ kích thước phông chữ.
rch đơn vị CSS
Tương tự như đơn vị ch nhưng tương ứng với phần tử gốc, đơn vị rch biểu thị chiều rộng (cụ thể hơn là khoảng cách giữa các ký tự) của glyph "0" (số 0) trong phông chữ của phần tử gốc. Đây là lựa chọn lý tưởng để tạo bố cục phụ thuộc vào chiều rộng ký tự, chẳng hạn như một vùng chứa phải vừa khít với một số lượng ký tự cụ thể trong phông chữ gốc.
rex đơn vị CSS
Đơn vị rex là phiên bản tương đối của ex, bằng với chiều cao x của phông chữ của phần tử gốc. Đơn vị này đặc biệt hữu ích cho việc căn chỉnh theo chiều dọc và định cỡ các phần tử tương ứng với chiều cao của chữ cái thường trong kiểu chữ chính của tài liệu.
ric đơn vị CSS
Đơn vị ric là đối tượng tương ứng tương đối với gốc của đơn vị ic. Giá trị này bằng với phép đo khoảng cách "chữ tượng hình" (thường là chiều rộng hoặc chiều cao của một chữ tượng hình CJK) của phông chữ của phần tử gốc. Đây là một công cụ quan trọng đối với các nhà phát triển xây dựng bố cục được quốc tế hoá, đặc biệt là những người sử dụng chữ viết tiếng Trung, tiếng Nhật hoặc tiếng Hàn.
Các tính năng cơ bản được cung cấp rộng rãi
Các tính năng web sau đây đã trở thành Baseline Widely available (Được hỗ trợ rộng rãi) vào tháng 1 năm 2026.
Thuộc tính display CSS có hai giá trị
Cú pháp nhiều từ khoá cho thuộc tính display hiện đã có sẵn trên Baseline. Bản cập nhật này cho phép bạn xác định rõ cả loại màn hình "bên ngoài" và "bên trong" của một hộp. Ví dụ: thay vì inline-flex được kết hợp trước, bạn có thể sử dụng display: inline flex. Điều này làm rõ liệu một phần tử có tham gia vào luồng khối hay luồng nội tuyến (loại bên ngoài) và cách bố trí các phần tử con của phần tử đó (loại bên trong, chẳng hạn như flex hoặc grid). Thay đổi này giúp công cụ bố cục CSS trở nên hợp lý và nhất quán hơn đối với nhà phát triển.
Thuộc tính animation-composition của CSS
Thuộc tính animation-composition xác định cách nhiều ảnh động tương tác khi chúng ảnh hưởng đồng thời đến cùng một thuộc tính. Bạn có thể chọn giữa replace, add hoặc accumulate, giúp bạn kiểm soát chính xác cách tính toán các ảnh động phức tạp, nhiều lớp.
Tạo mảng bằng cách sao chép
JavaScript hiện có các phương thức cho phép bạn chuyển đổi mảng mà không làm thay đổi dữ liệu gốc. Các phương thức như toReversed(), toSorted() và toSpliced() trả về một bản sao mới, đã sửa đổi của mảng, giúp thúc đẩy một kiểu lập trình chức năng và an toàn hơn.
Giúp chúng tôi cải tiến
Như thường lệ, hãy cho chúng tôi biết nếu chúng tôi bỏ lỡ thông tin nào liên quan đến Baseline. Chúng tôi sẽ đảm bảo thông tin đó được đề cập 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 lỗi của chúng tôi.