Ngày xuất bản: 12 tháng 11 năm 2026
Yêu cầu một tác nhân lập trình AI tạo chú thích hoặc hộp thoại phụ, rồi xem kỹ mã mà tác nhân đó viết. Trong hầu hết các trường hợp, tác nhân sẽ lấy JavaScript để tạo lại các tính năng được tích hợp sẵn trong trình duyệt. Nếu bạn yêu cầu tác nhân sử dụng các tính năng CSS hoặc HTML mới hơn, thì tác nhân thường bỏ qua tính năng phát hiện và dự phòng. Việc bỏ qua này khiến người dùng trên các trình duyệt không được hỗ trợ gặp phải trang bị hỏng.
Modern Web Guidance tích hợp khả năng tương thích với trình duyệt vào mọi đề xuất. Mỗi hướng dẫn đều kết hợp các tính năng web hiện đại với dữ liệu hỗ trợ Baseline và các mẫu dự phòng đã được xác minh. Bài đăng này xem xét cách tác nhân sử dụng dữ liệu đó để viết mã hiện đại, đa trình duyệt.
Tại sao tác nhân lập trình hỗ trợ trình duyệt không chính xác nếu không có hướng dẫn
Nếu không có hướng dẫn, các tác nhân lập trình hiếm khi kiểm tra xem dự án của bạn cần hỗ trợ những trình duyệt nào trước khi viết mã. Thay vào đó, họ có xu hướng rơi vào một trong hai thái cực:
- Mặc định sử dụng mã cũ: Dữ liệu huấn luyện mô hình chứa đầy các mẫu cũ và kết quả đánh giá của Modern Web Guidance cho thấy các mô hình vẫn đề xuất nhiều mẫu trong số này. Các tác nhân thường viết JavaScript phức tạp hoặc thêm thư viện bên ngoài khi một tính năng HTML hoặc CSS tích hợp sẵn có thể thực hiện công việc này.
- Sử dụng các tính năng mới mà không có biện pháp an toàn: Khi bạn yêu cầu một tác nhân sử dụng một tính năng web mới hơn, tác nhân đó thường viết mã cho các trình duyệt hỗ trợ và dừng lại ở đó. Đoạn mã này bỏ qua tính năng phát hiện và không có phương án dự phòng, khiến trang bị lỗi trong các trình duyệt không hỗ trợ tính năng này.
Dữ liệu từ bộ đánh giá Modern Web Guidance cho thấy mức độ phổ biến của khoảng trống này. Đối với những tính năng chưa hoạt động trên tất cả các trình duyệt chính, bộ đánh giá sẽ kiểm tra khả năng phát hiện tính năng, quy tắc @supports, phương án dự phòng hoặc polyfill có điều kiện. Các mô hình không được hướng dẫn chỉ vượt qua các quy trình kiểm tra này 43% số lần. Khi bật tính năng Hướng dẫn về web hiện đại, tỷ lệ vượt qua tăng lên 87%.
Cách dữ liệu cơ sở định hướng cho mọi đề xuất
Để quyết định thời điểm một tính năng web cần có phương án dự phòng, Modern Web Guidance dựa vào Baseline. Baseline theo dõi khả năng hỗ trợ trên bộ trình duyệt chính (Chrome, Edge, Firefox và Safari trên máy tính và thiết bị di động) với ba trạng thái:
- Baseline Widely available: Tính năng này đã hoạt động trên tất cả các trình duyệt chính trong ít nhất 30 tháng.
- Mới có trong Baseline: Tính năng này hoạt động trên tất cả các trình duyệt chính, kể từ ngày trình duyệt cuối cùng thêm tính năng hỗ trợ.
- Phạm vi cung cấp hạn chế: Tính năng này chưa được hỗ trợ trên tất cả các trình duyệt chính.
Mỗi hướng dẫn trong Modern Web Guidance đều có sẵn trạng thái Baseline và dữ liệu về phiên bản trình duyệt từ gói web-features. Khi tác nhân lập trình tải một hướng dẫn, tác nhân đó sẽ nhận được trạng thái hỗ trợ chính xác, ngày phát hành và phiên bản trình duyệt của tính năng cùng với hướng dẫn triển khai. Ví dụ:
Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.
Theo mặc định, Modern Web Guidance tuân theo hai quy tắc dựa trên dữ liệu đó:
- Các tính năng Baseline được cung cấp rộng rãi: Tác nhân của bạn sử dụng trực tiếp các tính năng này mà không cần thêm mã dự phòng hoặc mã phát hiện tính năng. Quy tắc này giúp toàn bộ mã nguồn của bạn luôn gọn gàng và tránh được các giải pháp không cần thiết.
- Tính năng mới ra mắt và tính năng có lượng hàng có hạn trong Baseline: Hướng dẫn cho các tính năng này bao gồm một chiến lược dự phòng đã được xác minh. Tác nhân của bạn sử dụng tính năng hiện đại khi được hỗ trợ và cung cấp phương án dự phòng rõ ràng cho các trình duyệt khác.
Bốn mẫu dự phòng mà Modern Web Guidance sử dụng trong thực tế
Không phải tính năng web nào cũng cần cùng một loại phương án dự phòng. Modern Web Guidance liên kết mỗi tính năng với một trong bốn phương án dự phòng dựa trên cách tính năng đó hoạt động trong các trình duyệt không được hỗ trợ:
| Mẫu hình dự phòng | Trường hợp Modern Web Guidance sử dụng dữ liệu này |
|---|---|
| Cải tiến tăng dần mà không cần mã dự phòng | Các tính năng trang trí hoặc bổ sung mà các trình duyệt không được hỗ trợ có thể bỏ qua một cách an toàn mà không làm hỏng bố cục hoặc hành vi. |
Phát hiện tính năng CSS bằng quy tắc @supports |
Kiểu hình ảnh hoặc bố cục phụ thuộc vào một tính năng CSS mới hơn và có thể trông không ổn nếu chỉ áp dụng một phần. |
| JavaScript tuỳ chỉnh gọn nhẹ | Các thuộc tính hoặc API HTML tương tác cần có một tập lệnh nhỏ, không phụ thuộc để sao chép hành vi trong các trình duyệt cũ. |
| Polyfill được tải có điều kiện | Các tính năng CSS hoặc JavaScript lớn hơn yêu cầu polyfill đã được kiểm tra và tải động chỉ khi thiếu tính năng hỗ trợ gốc. |
Cải tiến tăng dần mà không cần mã dự phòng
Một số tính năng hiện đại giúp cải thiện kiểu chữ, ảnh động hoặc tốc độ tải trang mà không làm thay đổi cách hoạt động của trang. Nếu không nhận ra các tính năng này, trình duyệt sẽ bỏ qua và hiển thị phần còn lại của trang như bình thường.
Ví dụ: nội dung khai báo CSS text-wrap: balance (Mới có trong Baseline) giúp cân bằng độ dài dòng trong tiêu đề.
.balanced {
text-wrap: balance;
}
Speculation Rules API (Phạm vi cung cấp có giới hạn) tìm nạp trước hoặc kết xuất trước các trang sắp tới. Các trình duyệt không được hỗ trợ sẽ bỏ qua các khối <script type="speculationrules"> và nội dung khai báo CSS không nhận dạng được một cách an toàn.
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Nhờ hành vi này, tác nhân của bạn có thể thêm trực tiếp các tính năng này mà không cần thêm mã dự phòng.
Phát hiện tính năng CSS bằng quy tắc @supports
Các tính năng CSS khác thay đổi cách định vị hoặc tạo kiểu cho một phần tử trên màn hình. Nếu bạn áp dụng một phần kiểu mà không có điều kiện, thì các trình duyệt không được hỗ trợ có thể hiển thị phần tử ở sai vị trí.
Ví dụ: truy vấn vùng chứa cố định (container-type: anchored, Phạm vi cung cấp có giới hạn) trên một chú giải công cụ được định vị cho phép bạn lật mũi tên của chú giải công cụ khi chú giải công cụ lật gần mép của khung nhìn. Trong các trình duyệt không hỗ trợ truy vấn vùng chứa cố định, mũi tên không thể phát hiện thao tác lật và có thể chỉ sai hướng. Modern Web Guidance hướng dẫn tác nhân của bạn gói các kiểu mũi tên trong một quy tắc @supports (container-type: anchored) để mũi tên mặc định chỉ xuất hiện trong các trình duyệt cũng hỗ trợ quy tắc lật @container anchored().
@supports (container-type: anchored) {
.tooltip-content::before {
content: "▼";
position: absolute;
inset-block-end: 0;
}
}
@container anchored(fallback: flip-block) {
.tooltip-content::before {
content: "▲";
inset-block-start: 0;
inset-block-end: auto;
}
}
JavaScript tuỳ chỉnh gọn nhẹ
Khi một tính năng HTML tương tác không được hỗ trợ trên tất cả các trình duyệt chính, việc lấy thư viện của bên thứ ba có thể không cần thiết. Đối với các hoạt động tương tác độc lập, Modern Web Guidance cung cấp một phương án dự phòng JavaScript ngắn, không phụ thuộc vào tính năng kiểm tra tính năng.
Ví dụ: thuộc tính closedby="any" trên phần tử <dialog> (lượng hàng có hạn) cho phép người dùng đóng hộp thoại bằng cách nhấp vào phông nền. Đối với những trình duyệt không hỗ trợ thuộc tính closedby, hướng dẫn này bao gồm một trình theo dõi lượt nhấp nhỏ kiểm tra đối tượng HTMLDialogElement.prototype trước:
const dialog = document.querySelector('dialog');
if (!('closedBy' in HTMLDialogElement.prototype)) {
dialog.addEventListener('click', (event) => {
if (event.target !== dialog) return;
const rect = dialog.getBoundingClientRect();
const clickedInDialog =
rect.top <= event.clientY &&
event.clientY <= rect.top + rect.height &&
rect.left <= event.clientX &&
event.clientX <= rect.left + rect.width;
if (!clickedInDialog) {
dialog.close();
}
});
}
Polyfill được tải có điều kiện
Đối với các tính năng lớn hơn của nền tảng, chẳng hạn như định vị neo CSS (Phạm vi cung cấp có giới hạn) hoặc API Temporal (Phạm vi cung cấp có giới hạn), việc viết phương án dự phòng tuỳ chỉnh theo cách thủ công là không thực tế. Đồng thời, việc đóng gói polyfill cho mọi người dùng sẽ làm tăng thêm chi phí tải xuống cho các trình duyệt đã hỗ trợ tính năng này.
Trong những trường hợp này, Modern Web Guidance sẽ hướng dẫn tác nhân của bạn kiểm tra khả năng hỗ trợ trước, rồi tải một polyfill đã được kiểm tra một cách linh động bằng biểu thức import() từ trình đóng gói hoặc CDN. Các trình duyệt hỗ trợ sẽ không tải thêm mã nào, trong khi các trình duyệt cũ sẽ tìm nạp polyfill theo yêu cầu.
if (!CSS.supports('anchor-name: --a')) {
await import('@oddbird/css-anchor-positioning');
}
Tuỳ chỉnh mục tiêu hỗ trợ trình duyệt của dự án
Theo mặc định, Modern Web Guidance coi các tính năng Baseline Widely available là an toàn để sử dụng mà không cần phương án dự phòng. Tính năng này yêu cầu phương án dự phòng cho các tính năng Mới có sẵn và lượng hàng có hạn của Baseline.
Dự án của bạn có thể có các yêu cầu khác về trình duyệt. Ví dụ: bạn có thể nhắm đến một năm cụ thể của Baseline, xây dựng cho một ứng dụng Electron hoặc loại trừ polyfill để giữ cho các gói có kích thước nhỏ.
Bạn có thể xác định chính sách hỗ trợ trình duyệt tuỳ chỉnh trong tệp AGENTS.md hoặc CLAUDE.md của dự án:
## Browser support policy
- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.
Mỗi hướng dẫn đều bao gồm trạng thái Baseline, ngày phát hành và phiên bản trình duyệt tối thiểu cho từng tính năng. Tác nhân của bạn sẽ so sánh chính sách của bạn với dữ liệu về khả năng tương thích này trước khi viết mã. Khi một tính năng đã đáp ứng mục tiêu của bạn, tác nhân sẽ viết mã hiện đại và bỏ qua mã dự phòng.
Kiểm thử cả đường dẫn hiện đại và đường dẫn dự phòng
Viết mã trên nhiều trình duyệt chỉ là một nửa công việc. Bạn cũng cần kiểm thử cả đường dẫn mã hiện đại và đường dẫn dự phòng trong các trình duyệt thực tế.
Khi kiểm thử trong một trình duyệt, bạn chỉ xác minh một nhánh của mã. Ví dụ: Chrome và Firefox chạy thuộc tính closedby="any" gốc trên phần tử <dialog>, trong khi Safari chạy phương án dự phòng nhấp chuột bên ngoài JavaScript. Nếu bạn chỉ kiểm tra hộp thoại trong Chrome, thì trình nghe dự phòng đó sẽ không bao giờ chạy trong quá trình kiểm thử.
Để xác minh cả hai đường dẫn mã, hãy kết nối tác nhân lập trình với nhiều công cụ trình duyệt cùng một lúc:
- Chrome DevTools cho tác nhân: Kết nối tác nhân với Chrome để kiểm tra bố cục, nhật ký bảng điều khiển và hành vi trong thời gian chạy.
- Firefox DevTools MCP: Kết nối tác nhân của bạn với một phiên bản Firefox đang hoạt động thông qua WebDriver BiDi.
- Máy chủ MCP của Safari: Kết nối tác nhân với Safari thông qua lệnh
safaridriver --mcptích hợp sẵn.
Khi cả ba công cụ này được kết nối, nhân viên hỗ trợ có thể mở trang của bạn trên Chrome, Firefox và Safari trong một quy trình công việc duy nhất. Sau đó, ứng dụng có thể xác nhận rằng cả tính năng gốc và trải nghiệm dự phòng đều hoạt động như mong đợi.
Bắt đầu sử dụng Modern Web Guidance
Để thêm Modern Web Guidance vào dự án, hãy chạy trình cài đặt tương tác từ thư mục dự án:
npx modern-web-guidance@latest install
Nếu bạn đã cài đặt phiên bản cũ hơn, hãy chạy lệnh cập nhật để nâng cấp lên phiên bản 1.0:
npx modern-web-guidance@latest update
Bạn cũng có thể cài đặt Modern Web Guidance thông qua các trang web cung cấp trình bổ trợ cho Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code và Grok.
Để tìm hiểu thêm, hãy khám phá các tài nguyên sau: