Tính năng mới trong web

Rachel Andrew

Ngày xuất bản: 20 tháng 5 năm 2025

Tại Google I/O 2025, bài phát biểu quan trọng "Có gì mới trên web" đã chia sẻ tất cả thông báo về Baseline, cùng với một số tính năng đã trở thành một phần của Baseline trong năm nay. Đây là một năm tuyệt vời đối với web và đối với Baseline. Bài đăng này là một bản tóm tắt mọi thứ đã được đề cập, cùng với tất cả các đường liên kết để tìm hiểu thêm.

Trang tổng quan về nền tảng web và các tính năng web

Năm 2024, chúng tôi công bố đợt ra mắt đầu tiên của Trang tổng quan về nền tảng web. Trang tổng quan này sử dụng tập dữ liệu về các tính năng trên web, cho phép bạn khám phá tất cả các tính năng thuộc Baseline.

Dữ liệu về các tính năng trên web hiện đã hoàn tất, với tất cả các tính năng của nền tảng đều được ánh xạ. Khi các tính năng mới được thêm vào Baseline mỗi tháng, dữ liệu sẽ được cập nhật và tất cả dữ liệu này sẽ xuất hiện trên trang tổng quan.

Công cụ giúp bạn khám phá mục tiêu Cơ bản của riêng mình

Mặc dù bạn có thể dựa vào chính sách hỗ trợ trình duyệt của mình theo mục tiêu thay đổi của Baseline Widely available (Được cung cấp rộng rãi theo đường cơ sở) – chẳng hạn như công ty Clearleft ở Vương quốc Anh – bạn cũng có thể áp dụng mục tiêu cố định dựa trên năm cơ sở. Giờ đây, bạn có thể sử dụng dữ liệu người dùng của riêng mình cùng với dữ liệu về các tính năng trên web để xác định mục tiêu phù hợp nhất với bạn.

Năm ngoái tại I/O, chúng tôi đã thông báo rằng RUMvision sẽ triển khai Baseline vào sản phẩm của họ và quá trình tích hợp này hiện đã hoàn tất.

Vì sử dụng dữ liệu RUM của bạn, nên tính năng này giúp bạn xác định Năm cơ sở cần áp dụng dựa trên dữ liệu đó thay vì mức trung bình toàn cầu. Điều này cũng có thể giúp bạn biết liệu Baseline Widely available có phù hợp với bạn hay không.

Bạn cũng có thể sử dụng dữ liệu Google Analytics để biết rõ tỷ lệ phần trăm người dùng hỗ trợ từng mục tiêu của Baseline bằng Google Analytics Baseline Checker mới.

Đây chỉ là hai trong số những công cụ ngày càng gia tăng giúp bạn liên kết dữ liệu người dùng thực với Baseline.

Gần đây, Nhóm cộng đồng về trải nghiệm người dùng trên web đã ra mắt một tiện ích cho Netlify. Tiện ích này hỗ trợ nhiều năm Baseline và có sẵn trên các trang web của bạn để giúp bạn quyết định mục tiêu trong các công cụ xây dựng. Chúng tôi sẽ sớm tích hợp với sản phẩm RUM của Observatory của Cloudflare và Contentsquare.

Tích hợp dữ liệu với các công cụ của riêng bạn

Dữ liệu về các tính năng trên web là dữ liệu mở và bạn có thể sử dụng để tích hợp. Chúng tôi đang cố gắng giúp bạn thực hiện việc đó dễ dàng hơn.

Sử dụng Web Platform Dashboard API hoặc sử dụng trực tiếp dữ liệu về các tính năng trên web từ gói npm.

Giờ đây, bạn có thể liên kết các phiên bản trình duyệt với một mục tiêu Cơ sở bằng cách sử dụng mô-đun baseline-browser-mapping của Nhóm cộng đồng WebDX thuộc W3C. Bạn có thể sử dụng mô-đun này trong môi trường JavaScript phía máy chủ hoặc bằng cách tải các tệp JSON hoặc CSV xuống. Các tệp này được làm mới hằng ngày từ kho lưu trữ.

Dữ liệu này không chỉ bao gồm các bản đồ ánh xạ cho bộ trình duyệt Baseline cốt lõi mà còn cho các trình duyệt hạ nguồn như Samsung Internet, Opera, UC Browser và Android Webview.

Tìm hiểu xem các tính năng có được mục tiêu Cơ sở hỗ trợ hay không

Thông tin cơ bản hiện có trên phần lớn các trang của MDN và Can I Use, bạn cũng có thể tìm thấy thông tin này trên Trang tổng quan về nền tảng web, cũng như trên các bài viết trên web.dev và CSS Tricks. Tuy nhiên, tất cả những điều này đều đòi hỏi bạn phải tìm kiếm thông tin hỗ trợ. Sẽ hữu ích hơn nhiều nếu thông tin Baseline xuất hiện trong IDE khi bạn viết mã và là một phần của tất cả các công cụ khác mà bạn sử dụng.

Chúng tôi rất vui mừng thông báo rằng nhiều công cụ chính hiện đã được tích hợp sẵn hoặc dễ dàng tích hợp với Baseline.

browserslist-config-baseline

Nhiều công cụ như Babel và PostCSS sử dụng browserslist để xác định những trình duyệt cần hỗ trợ.

Cùng với WebDX CG và các thành viên trong cộng đồng, nhóm Chrome đã giúp phát hành một công cụ mới có tên là browserslist-config-baseline. Điều này cho phép bạn định cấu hình các mục tiêu browserslist theo các điều khoản của Baseline, chẳng hạn như được cung cấp rộng rãi hoặc các năm Baseline.

Nhờ đó, mọi công cụ lấy mục tiêu browserslist hiện có thể được thể hiện theo Baseline.

Tìm hiểu thêm trong phần Sử dụng Baseline với browserslist.

Đường cơ sở trong các công cụ tìm lỗi mã nguồn – ESLint và Stylelint

Gần đây, bạn có thể sử dụng Baseline với các trình kiểm tra cú pháp nhờ một số công cụ mới trong không gian trình kiểm tra cú pháp, bắt đầu bằng ESLint cho CSS.

ESLint cơ bản có quy tắc use-baseline. Bạn có thể đặt giá trị này thành mục tiêu Cơ sở mà bạn muốn và hệ thống sẽ cảnh báo bạn khi bạn sử dụng bất kỳ tính năng nào mới hơn mục tiêu của bạn. Bạn có thể chọn cách giải quyết những cảnh báo đó: bằng cách thay thế tính năng đó bằng các thành phần cơ bản hoặc bằng cách chặn cảnh báo của linter. Đây là một giải pháp hoàn toàn hợp lệ khi bạn biết mình đang sử dụng một tính năng tiên tiến một cách an toàn, chẳng hạn như nếu đó là một tính năng nâng cao từng bước.

Theo mặc định, ESLint sẽ không cảnh báo nếu các tính năng mới hơn được dùng trong các khối @supports, vì các trình duyệt không được hỗ trợ sẽ không đánh giá các tính năng đó.

Đối với nhu cầu linting HTML, cũng có một trình bổ trợ cộng đồng có tên là html-eslint.

Stylelint chính thức hỗ trợ một trình bổ trợ có tên là stylelint-plugin-use-baseline. Quy tắc này hoạt động giống như quy tắc ESLint cho CSS, nhưng chạy trên Stylelint.

Nhiều trình kiểm tra cũng có trình bổ trợ IDE, vì vậy, bạn có thể nhận được ý kiến phản hồi ngay lập tức về trạng thái Cơ sở trong khi viết mã bằng cách sử dụng các đường gạch chân lượn sóng.

Baseline trong VS Code và JetBrains WebStorm

Nhiều IDE đã hỗ trợ một cách để di chuột lên một tính năng trong trình chỉnh sửa và xem danh sách các phiên bản trình duyệt được hỗ trợ.

Nhưng bạn khó có thể biết được liệu tính năng đó có thực sự an toàn khi sử dụng hay không – bạn cần phải phân tích xem có trình duyệt chính nào bị thiếu trong danh sách đó hay không và phiên bản trình duyệt đó mới đến mức nào.

Để khắc phục vấn đề đó, chúng tôi đã hợp tác với VS Code (IDE phổ biến nhất mà hàng triệu nhà phát triển web sử dụng) để tích hợp dữ liệu Baseline trực tiếp vào các thẻ di chuột này.

Giờ đây, bạn có thể di chuột lên một tính năng và tính năng đó sẽ cho bạn biết liệu tính năng đó có được coi là Cơ sở và trong bao lâu hay không, hoặc liệu có trình duyệt chính nào chưa triển khai đầy đủ tính năng đó hay không.

Các tính năng được hỗ trợ bao gồm thuộc tính CSS, phần tử HTML và thuộc tính HTML. Tìm hiểu thêm trong bài viết Visual Studio Code hiện hỗ trợ Baseline.

Việc tích hợp này có nghĩa là mọi IDE dựa trên VS Code cũng sẽ được hưởng lợi từ các thẻ thông tin khi di chuột này.

Ngoài ra, chúng tôi cũng rất vui mừng thông báo rằng JetBrains đang triển khai thẻ thông tin khi di chuột vào IDE JavaScript và TypeScript WebStorm của họ.

Web đang cải thiện nhanh hơn bao giờ hết

Chúng tôi hy vọng Baseline sẽ giúp bạn tận dụng lợi thế của việc web có khả năng tương tác đang cải thiện nhanh hơn bao giờ hết.

Bạn có thể sử dụng Trang tổng quan về nền tảng web để xem tất cả các tính năng đã trở thành Baseline Newly available (Đường cơ sở mới có sẵn) trong 12 tháng qua – kể từ Google I/O 2024.

Ngoài ra, bạn có thể tin tưởng rằng một số tính năng sẽ sớm có trong Baseline Newly vì chúng được đưa vào dự án Interop 2025. Bạn có thể đọc về tất cả các tính năng có trong Interop 2025: một năm nữa cải tiến nền tảng web.

Chế độ viết dọc

Chúng tôi đã thấy một tính năng trở thành Baseline Newly available (Mới có sẵn cơ bản), đó là các giá trị sideways-rl và sideways-lr cho thuộc tính CSS writing-mode. Nếu bạn đang sử dụng chế độ viết dọc chỉ cho mục đích bố cục, thì các giá trị ngang có thể là những giá trị cần đạt được.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Vị trí điểm neo

Vị trí điểm neo được phát hành trong Chrome 125. Thành phần này cho phép bạn liên kết vị trí của một phần tử với một phần tử cố định, chẳng hạn như khi mở chú thích bằng một nút.

Giờ đây, tính năng này đã được đưa vào Interop 2025, vì vậy, chúng ta sẽ thấy tính năng này tham gia Baseline trong năm nay.

Các chỉ số quan trọng chính của trang web: LCP và INP

LCP API

Event Timing API (cho INP)

Các chỉ số quan trọng về trang web có thể giúp bạn định lượng trải nghiệm trên trang web của mình và xác định các cơ hội cải thiện. Sáng kiến Web Vitals nhằm đơn giản hoá bối cảnh và giúp các trang web tập trung vào những chỉ số quan trọng nhất, đó là Các chỉ số quan trọng về trang web.

Interop 2025 bao gồm các chỉ số Thời gian hiển thị nội dung lớn nhất (LCP) và Lượt tương tác đến nội dung hiển thị tiếp theo (INP) bằng cách triển khai API LargestContentfulPaint và Event Timing API trên các trình duyệt.

Các điểm cải tiến đối với phần tử <details>

Bản thân phần tử <details> đã có sẵn trong Baseline Widely. Đây là một trong những tính năng của Interop 2025 vì có một số tính năng giúp các tiện ích hiển thị thông tin bằng <details> trở nên hữu ích hơn.

Phần tử <details> chứa một phần tử <summary>. Đây là phần hiển thị trên trang khi phần tử <details> bị thu gọn. Bên ngoài <summary> là nội dung của phần tử <details>. Nội dung này sẽ bị ẩn cho đến khi người dùng nhấp vào phần tóm tắt.

Một trong những điều cần có khả năng tương tác trong Interop 2025 là ẩn nội dung bằng cách sử dụng content-visibility thay vì display, tức là nếu không được mở rộng, nội dung sẽ không được kết xuất.

Ngoài ra, một phần trong dự án Interop 2025 là phần tử giả ::marker. Phần tử giả ::marker cho phép bạn tạo kiểu cho tam giác hiển thị của phần tử <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Sau đó, một phần tử giả khác – ::details-content.

::details-content đại diện cho nội dung – phần của phần tử chi tiết mở rộng và thu gọn, đồng thời cho phép bạn tạo kiểu cho phần tử đó.

[open]::details-content {
  border: 5px dashed hotpink;
}

Ngoài ra, còn có một số điểm cải tiến đáng chú ý như tự động mở rộng phần tử <details> với các kết quả trùng khớp khi tìm kiếm trên trang và đưa giá trị until-found của thuộc tính HTML hidden vào Baseline Newly available. Thao tác này sẽ ẩn một phần tử cho đến khi phần tử đó được tìm thấy bằng tính năng tìm kiếm trong trang của trình duyệt hoặc được chuyển hướng trực tiếp bằng cách làm theo một đoạn URL.

CSS @scope

Quy tắc @scope của CSS cho phép bạn giới hạn phạm vi tiếp cận của bộ chọn. Bằng cách thiết lập một gốc phạm vi bằng @scope, mọi quy tắc về kiểu được lồng bên trong quy tắc @ chỉ áp dụng cho cây DOM đó.

Ví dụ: nếu bạn chỉ muốn nhắm đến các phần tử <img> bên trong một phần tử có lớp .card, thì .card sẽ trở thành gốc phạm vi.

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

Tìm hiểu thêm trong bài viết Giới hạn phạm vi của bộ chọn bằng quy tắc @scope CSS.

scrollend

scrollend là một tính năng khác giúp giảm độ phức tạp và cải thiện giao diện cuộn. Nếu không có sự kiện scrollend, thì không có cách nào đáng tin cậy để phát hiện rằng thao tác cuộn đã hoàn tất.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Với sự kiện scrollend, trình duyệt sẽ thực hiện tất cả quy trình đánh giá khó khăn này cho bạn.

document.onscrollend = event => {…}

Xem thêm ví dụ trong Scrollend, một sự kiện JavaScript mới.

Chuyển đổi chế độ xem trong cùng một tài liệu

Cuối cùng nhưng không kém phần quan trọng, hiệu ứng chuyển đổi khung hiển thị là một phần của Interop 2025. Công việc này liên quan đến các hiệu ứng chuyển đổi khung hiển thị trong cùng một tài liệu, vì vậy, những hiệu ứng này dành cho các ứng dụng một trang và cả các lớp hiệu ứng chuyển đổi khung hiển thị.

Hãy theo dõi trang tổng quan Interop 2025 để xem tiến độ của dự án trong năm.

Các tính năng có trong Interop 2025 không phải là những tính năng duy nhất trở thành một phần của Baseline trong năm nay, nhưng việc đưa các tính năng này vào các dự án cho chúng ta thấy một dấu hiệu khá rõ ràng rằng chúng được ưu tiên và sắp ra mắt.

Chúng tôi vừa mới bắt đầu

Năm vừa qua là một năm đầy hứng khởi đối với Baseline và chúng tôi đã tiến bộ rất nhiều so với những thông báo của mình vào năm ngoái. Hiện tại, chúng tôi đã hoàn tất việc bổ sung dữ liệu về các tính năng trên web. Điều này đã mở ra cơ hội và cho phép tạo các công cụ dành cho nhà phát triển. Chúng tôi mới chỉ bắt đầu và nếu bạn có một sản phẩm hoặc công cụ nguồn mở có thể hưởng lợi từ việc đưa dữ liệu này vào, chúng tôi rất mong nhận được thông tin từ bạn.

Hãy theo dõi web.dev vì chúng tôi sẽ tiếp tục đăng thông báo về các công cụ mới cùng với hướng dẫn để giúp bạn tận dụng mọi thứ mà web mang lại.