Xuất bản: Ngày 7 tháng 5 năm 2025, Lần cập nhật gần đây nhất: Ngày 17 tháng 9 năm 2025
Browserslist là một trong những công cụ phổ biến nhất để định cấu hình các phiên bản trình duyệt tối thiểu được hỗ trợ trong cơ sở mã giao diện người dùng. Nhà phát triển thêm truy vấn browserslist vào tệp package.json (hoặc điểm cấu hình khác cho Browserslist, chẳng hạn như tệp .browserslistrc) và Browserslist sẽ hiển thị danh sách các trình duyệt tối thiểu được hỗ trợ. Bạn có thể sử dụng Browserslist với nhiều công cụ đóng gói, polyfill và linting phổ biến, bao gồm:
- Autoprefixer
- Babel sử dụng
@babel/preset-env - PostCSS sử dụng
postcss-preset-env - ESLint sử dụng
eslint-plugin-compat - Stylelint sử dụng
stylelint-no-unsupported-browser-features - webpack
Mục tiêu cơ sở
Khi quyết định sử dụng Baseline, bạn nên cân nhắc cơ sở người dùng và quyết định nhắm đến bộ tính năng Baseline nào:
- Baseline Widely available (Được hỗ trợ rộng rãi theo Baseline) bao gồm tất cả các tính năng trên web được nhóm trình duyệt cốt lõi Baseline hỗ trợ đầy đủ trong 30 tháng qua hoặc lâu hơn.
- Các bộ tính năng của năm cơ sở, chẳng hạn như Cơ sở năm 2020, bao gồm tất cả các tính năng Mới ra mắt vào cuối năm được chỉ định.
Tuỳ thuộc vào cơ sở người dùng của bạn, bạn có thể nhắm đến Baseline Widely available (Được cung cấp rộng rãi) hoặc bạn có thể cần nhắm đến một năm Baseline cũ hơn. Tham khảo số liệu phân tích hoặc công cụ RUM để biết người dùng của bạn đang sử dụng phiên bản trình duyệt nào.
Cách nhắm đến Baseline Newly hoặc Widely available
Hỗ trợ cho Baseline được tích hợp vào Browserslist thông qua một số truy vấn. Nếu bạn muốn nhắm đến các trình duyệt mới có sẵn trong Baseline, hãy thử chỉ định baseline newly available trong cấu hình Browserslist:
{
...
"browserslist": [
"baseline newly available"
]
...
}
Bạn cũng có thể chỉ định baseline widely available làm truy vấn:
{
...
"browserslist": [
"baseline widely available"
]
...
}
Cách nhắm đến các năm cơ sở
Nếu muốn nhắm đến một nhóm tính năng của năm cơ sở, bạn hãy chỉ định năm trong một truy vấn, chẳng hạn như baseline 2024 nếu bạn muốn nhắm đến nhóm tính năng năm 2024:
"browserslist": "baseline 2024"
Bạn có thể chỉ định năm từ baseline 2015 đến năm hiện tại.
Cách chỉ định các trình duyệt hạ lưu
Nhóm trình duyệt cốt lõi Baseline bao gồm Chrome, Edge, Firefox và Safari. Các trình duyệt khác dựa trên cùng một mã nguồn mở như Chrome và Edge (Chromium) và sẽ hỗ trợ cùng một bộ tính năng như bất kỳ phiên bản Chromium nào mà chúng triển khai. Để đưa các trình duyệt này vào cấu hình Baseline, hãy thêm with downstream sau truy vấn Baseline. Ví dụ: để nhắm đến các trình duyệt hạ nguồn trong phần Cơ sở được cung cấp rộng rãi, hãy chỉ định baseline widely available with downstream:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream cũng là một truy vấn hợp lệ, cũng như việc thêm with downstream vào mục tiêu hằng năm:
"browserslist": "baseline 2024 with downstream"
Ví dụ về cách hoạt động của truy vấn cơ sở
Trong công cụ đóng gói
Việc sử dụng các truy vấn Cơ sở do Browserslist cung cấp trong dự án của bạn có thể mang lại hiệu quả tức thì. Babel là một công cụ tạo bản dựng phổ biến để đóng gói Javascript. Nếu bạn sử dụng các giá trị mặc định của gói @babel/preset-env, nhiều API và phương thức JavaScript hiện đại sẽ được thay thế bằng cú pháp chi tiết hơn mà các trình duyệt cũ yêu cầu:
Tuy nhiên, việc sử dụng một truy vấn baseline 2020 để nhắm đến bộ tính năng năm 2020 trên cùng một dự án ví dụ sẽ giảm đáng kể kích thước đầu ra của Javascript này, vì cần ít lượt chuyển đổi cú pháp hơn:
Hãy tự mình thử bằng cách sử dụng mã ví dụ trong kho lưu trữ baseline-demos của Google Chrome Labs.
Trong các trình kiểm tra
Một số trình kiểm tra mã nguồn tĩnh đã hoạt động với Browserslist hoặc có thể hoạt động với Browserslist bằng cách sử dụng một mô-đun tương thích. Ví dụ: stylelint có thể sử dụng cấu hình browserslist bằng mô-đun stylelint-browser-compat. Đặt tệp stylelint.config.js để sử dụng truy vấn Cơ sở mà bạn chọn:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
Giờ đây, Stylelint sẽ gắn cờ CSS hiện không thuộc Baseline Widely available (Đường cơ sở có sẵn trên diện rộng):
Stylelint cũng cung cấp một trình bổ trợ cho phép bạn đặt các quy tắc Cơ sở trực tiếp, nhưng nếu bạn đã sử dụng Browserslist để xử lý cấu hình, thì việc sử dụng các truy vấn Cơ sở tích hợp mà Browserslist cung cấp là một giải pháp khả thi.