Đây là bản xem trước ban đầu về Hướng dẫn về web hiện đại. Chúng tôi đang tích cực bổ sung nội dung mới và hoan nghênh các đóng góp hoặc ý kiến phản hồi trên GitHub.

Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Bắt đầu với Hướng dẫn về web hiện đại

Modern Web Guidance là một bộ kỹ năng tích hợp kiến thức chuyên môn về nền tảng web, các phương pháp hay nhất và dữ liệu về khả năng tương thích của trình duyệt ngay vào các tác nhân lập trình. Điều này giúp các tác nhân lập trình của bạn tránh xa các mẫu cũ, thay vào đó là hướng đến các giải pháp khai thác sức mạnh và khả năng của nền tảng web hiện đại.

Cài đặt

Bạn có thể cài đặt và sử dụng Modern Web Guidance với bất kỳ tác nhân lập trình nào hỗ trợ kỹ năng.

`modern-web-guidance` CLI (nên dùng)

Bạn nên cài đặt thông qua CLI modern-web-guidance do nhóm Chrome xây dựng. Việc cài đặt Modern Web Guidance thông qua CLI modern-web-guidance sẽ bật tính năng tự động cập nhật. Bạn có thể cài đặt từ CLI modern-web-guidance như sau:

npx modern-web-guidance@latest install

Nếu đang phát triển tiện ích Chrome, bạn nên dùng lệnh sau (không bắt buộc):

npx modern-web-guidance@latest install --choose

Thao tác này sẽ chạy một trình hướng dẫn tương tác để cài đặt các kỹ năng theo lựa chọn ưu tiên của bạn.

Nếu bạn muốn cài đặt Modern Web Guidance mà không cần dùng CLI modern-web-guidance, hãy tham khảo hướng dẫn dành riêng cho tác nhân sau đây. Xin lưu ý rằng hầu hết các lựa chọn này đều không hỗ trợ tính năng tự động cập nhật.

Antigravity

Tải Antigravity xuống rồi bật "modern-web-guidance" trong quy trình cài đặt hoặc trên trang Cài đặt trong mục Tuỳ chỉnh, sau đó chọn Xây dựng bằng trình bổ trợ của Google.

Antigravity CLI

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Gemini CLI

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

JetBrains WebStorm

Bạn có thể tìm thấy Modern Web Guidance trong Trình quản lý kỹ năng, trong phần Cài đặt > Trợ lý AI > Kỹ năng. Chọn một kỹ năng để mở trang thông tin chi tiết về kỹ năng đó. Để cài đặt kỹ năng, hãy nhấp vào nút Install (Cài đặt) để áp dụng kỹ năng đó cho phiên bản IDE hiện tại.

GitHub CLI

gh skill install GoogleChrome/modern-web-guidance

`npx skills`

npx skills add GoogleChrome/modern-web-guidance

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

Claude Code CLI

Để cài đặt Modern Web Guidance để sử dụng với Claude Code CLI, bạn cần thực hiện 3 bước:

1. Thêm sàn thương mại:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Cài đặt trình bổ trợ từ trang web của bên thứ ba:

/plugin install modern-web-guidance@googlechrome

3. Tải lại trình bổ trợ:

/reload-plugins

Codex

codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome

Copilot CLI

Để cài đặt Modern Web Guidance để sử dụng với Copilot, bạn cần thực hiện hai bước:

1. Thêm sàn thương mại:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Cài đặt trình bổ trợ từ trang web của bên thứ ba:

/plugin install modern-web-guidance@googlechrome

Ngỗng

goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Grok 2

grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust

Kimi Code

/plugins install https://github.com/GoogleChrome/modern-web-guidance

Khám phá trước khi cài đặt

Đánh giá thư viện hướng dẫn của Modern Web Guidance trước khi cài đặt bằng cách tìm kiếm bằng một cụm từ tìm kiếm hoặc truy xuất hướng dẫn của chúng tôi theo mã nhận dạng. Để làm việc này, hãy dùng lệnh search của CLI để tìm mã yêu cầu bằng một câu lệnh:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

Thao tác này sẽ xuất một đối tượng JSON trong dòng lệnh:

[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]

Bằng cách đọc các giá trị description, bạn có thể chọn id phản ánh đúng nhất mục tiêu của mình và sử dụng lệnh retrieve:

npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

Trong trường hợp này, Markdown hướng dẫn cho trường hợp sử dụng animate-to-from-top-layer sẽ xuất hiện trong dòng lệnh. Đối với các hướng dẫn khác, hãy thay thế animate-to-from-top-layer bằng mã hướng dẫn hợp lệ bất kỳ.

Tại sao nên sử dụng Modern Web Guidance?

Modern Web Guidance mang lại lợi ích cho nhà phát triển web so với các mô hình AI không được hỗ trợ vì 3 lý do riêng biệt:

Các tác nhân lập trình AI thường mặc định sử dụng các giải pháp cũ, lỗi thời cho các vấn đề phát triển web hiện đại. Các giải pháp này thường chứa JavaScript để cung cấp chức năng cho những vấn đề được giải quyết hiệu quả hơn bằng các API CSS và HTML hiện đại.
Trước đây, các mô hình AI chưa biết đến hoặc có thông tin không chính xác về các tính năng mới nhất của nền tảng web.
Cuối cùng, các mô hình AI có xu hướng đưa ra các đề xuất lỗi thời, không tính đến các yêu cầu của dự án hoặc tiêu chí hỗ trợ của trình duyệt, thay vì điều chỉnh hướng dẫn cho phù hợp với các yêu cầu Baseline của một dự án nhất định.

Modern Web Guidance giải quyết những thiếu sót này và đảm bảo rằng quy trình lập trình sử dụng AI có các công cụ để áp dụng các tính năng mới hơn của nền tảng web trước tiên, đồng thời có tính đến các phương án dự phòng.

Modern Web Guidance có những gì?

Modern Web Guidance bao gồm các phương pháp hay nhất cho hơn 100 trường hợp sử dụng phát triển web trong một số lĩnh vực cốt lõi. Về cơ bản, đây là một kỹ năng của tác nhân, hướng dẫn tác nhân lập trình cách gọi CLI modern-web-guidance để tìm và truy xuất hướng dẫn phù hợp nhất cho trường hợp sử dụng của bạn.

Trải nghiệm người dùng: Chuyển đổi khung hiển thị, tạo kiểu CSS scrollbar-color, cũng như ảnh động vào cảnh và thoát cảnh.
CSS: Truy vấn vùng chứa, không gian màu sắc hiện đại như oklch, bố cục lưới phụ CSS, text-wrap và cắt bớt chiều cao dòng kiểu chữ.
Hiệu suất: Chẩn đoán Lượt tương tác đến nội dung hiển thị tiếp theo (INP), scheduler.yield để chia nhỏ các tác vụ cần nhiều thời gian, lập lịch biểu tác vụ trong nền và ưu tiên tải hình ảnh.
Biểu mẫu: Các trường nhập dữ liệu tự động đổi kích thước (field-sizing: content) và kiểu xác thực chính xác bằng :user-invalid.
Thành phần giao diện người dùng tích hợp sẵn: Kiểm soát trực tiếp hộp thoại, Định vị neo CSS cho chú giải công cụ và popover.
Hỗ trợ tiếp cận: Thông báo lỗi dễ tiếp cận và quản lý tiêu điểm bàn phím.
AI tích hợp: Sử dụng các mô hình ứng dụng cục bộ, trên thiết bị (API Phát hiện ngôn ngữ, Tóm tắt và Dịch gốc).
Khoá truy cập: Đăng ký, xác thực và quản lý khoá truy cập.

Sau đây là một số hướng dẫn cho từng danh mục. Để xem tất cả hướng dẫn, bạn có thể xem danh sách đầy đủ các hướng dẫn.

Đường cơ sở

Baseline giúp nhà phát triển hiểu rõ những tính năng web nào có thể tương tác trong các công cụ trình duyệt chính. Nếu một tính năng web là Baseline, bạn có thể tin tưởng vào mức độ tương thích của trình duyệt. Các tính năng web thuộc một trong ba danh mục do Baseline xác định:

Lượng hàng có hạn có nghĩa là tính năng này không có khả năng tương tác.
Mới ra mắt có nghĩa là tính năng này mới có thể tương tác trong vòng 30 tháng qua.
Phổ biến có nghĩa là tính năng này đã có khả năng tương tác trong ít nhất 30 tháng trở lên.

Mặc dù Baseline là một định nghĩa về khả năng tương tác của tính năng web, nhưng đây cũng là một khía cạnh có thể định cấu hình của dự án. Bạn có thể chọn một mục tiêu Baseline, sau đó định cấu hình dự án để sử dụng mục tiêu đó bằng cách thêm mục tiêu đó vào tệp AGENTS.md hoặc CLAUDE.md, ví dụ:

This project's Baseline target is Baseline 2024.

<other project info...>

Modern Web Guidance và tính năng dự phòng

Modern Web Guidance sử dụng nhiều tính năng web hiện đại. Một số tính năng có thể là Mới hoặc Phổ biến trong Baseline, nhưng một số tính năng có thể là Có giới hạn. Trong trường hợp một tính năng không được cung cấp rộng rãi, hướng dẫn về trường hợp sử dụng sẽ cung cấp cho nhân viên hỗ trợ hướng dẫn cụ thể về cách đảm bảo khả năng tương thích rộng hơn trong các trình duyệt không hỗ trợ tính năng đó. Trong nhiều trường hợp, phương án dự phòng được triển khai dưới dạng các tính năng cải tiến tăng dần, trong đó tính năng hiện đại có thể được sử dụng ở bất cứ nơi nào được hỗ trợ. Nếu cần polyfill cho các trình duyệt không được hỗ trợ, thì tác nhân luôn được hướng dẫn tải polyfill theo điều kiện để chỉ tốn chi phí khi cần thiết.

Làm thế nào để đảm bảo độ chính xác?

Mỗi trường hợp sử dụng trong Modern Web Guidance đều có một bộ đánh giá được hiệu chỉnh liên tục để đảm bảo chất lượng đầu ra.

Các bản đánh giá trường hợp sử dụng chạy một bộ kiểm thử đảm bảo chất lượng (QA) tự động để kiểm tra hành vi chính xác của tác nhân, trong đó Playwright đóng vai trò trung tâm:

Đối với mỗi hướng dẫn, một tập lệnh Playwright được phát triển để kiểm tra xem các chi tiết triển khai của hướng dẫn có được tuân thủ hay không, ví dụ: liệu @media (prefers-reduced-motion: reduce) có được quan sát thấy ở nơi cần thiết hay không.
Các tập lệnh Playwright này liên tục hiệu chỉnh theo một bản triển khai minh hoạ tham chiếu "chính xác" dự kiến có tỷ lệ đạt 100%. Mặt khác, các tập lệnh sẽ kiểm tra dựa trên một phương thức triển khai có chủ ý sai sót, dự kiến có tỷ lệ đạt là 0%.
Nếu một hoặc cả hai phương thức triển khai "đúng" và cố ý sai sót không đạt được tỷ lệ vượt qua lần lượt là 100% và 0%, thì trình tạo sẽ tự động thử lại bằng cách sử dụng ngữ cảnh cho đến khi đạt được hiệu chuẩn 100%.
Cuối cùng, chúng tôi sẽ áp dụng quy trình đánh giá toàn diện cho một ứng dụng cơ sở. Một trong những bài đánh giá này là không có hướng dẫn, tức là một bài đánh giá đối chứng, sử dụng dữ liệu huấn luyện mặc định mà không gọi Modern Web Guidance để hoàn thành một nhiệm vụ. Một bản đánh giá khác (thử nghiệm) giải quyết cùng một nhiệm vụ bằng cách sử dụng Modern Web Guidance.

Chúng tôi chạy các bài đánh giá nhiều lần mỗi tuần bằng các mô hình và tác nhân lập trình tiên tiến nhất, giúp chúng tôi có được bức tranh rõ ràng về hiệu suất của các tác nhân khi có và không có hướng dẫn của chúng tôi. Trung bình, kết quả ban đầu cho thấy mức độ tuân thủ các phương pháp hay nhất hiện đại tăng 37 điểm phần trăm khi các tác nhân được trang bị Modern Web Guidance. Tuy nhiên, kết quả có thể khác nhau tuỳ thuộc vào yêu cầu của dự án, mô hình, câu lệnh bạn viết và công cụ lập trình dựa trên tác nhân mà bạn ưu tiên.

Các bước tiếp theo

Giờ đây, bạn đã nắm được thông tin tổng quan về Modern Web Guidance và tiềm năng của công cụ này trong việc giúp bạn dễ dàng áp dụng các phương pháp hay nhất về web hiện đại vào quy trình lập trình bằng AI. Giờ đây, bạn có thể khám phá các hướng dẫn do Modern Web Guidance cung cấp.