Đâ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 nhúng 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 trực tiếp vào các tác nhân lập trình của bạn. Đ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ũ và thay vào đó 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 mọi tác nhân lập trình hỗ trợ các kỹ năng.

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

Phương thức cài đặt nên dùng là thông qua CLI modern-web-guidance do nhóm Chrome tạo. Việc cài đặt Modern Web Guidance thông qua CLI modern-web-guidance sẽ cho phép cập nhật tự động. 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

Lệnh này 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 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 không hỗ trợ tính năng cập nhật tự động.

Antigravity

Tải Antigravity xuống và bật "modern-web-guidance" (hướng dẫn về web hiện đại) trong quy trình cài đặt hoặc trên trang Settings (Cài đặt) trong mục Customizations (Tuỳ chỉnh), sau đó chọn Build with Google Plugins (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 Hướng dẫn về web hiện đại trong Skill Manager (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 của kỹ năng đó. Để cài đặt kỹ năng này, hãy nhấp vào nút Install (Cài đặt) để áp dụ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

Việc cài đặt Modern Web Guidance để sử dụng với Claude Code CLI gồm 3 bước:

1. Thêm trang web thương mại:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Cài đặt trình bổ trợ từ cửa hàng:

/plugin install modern-web-guidance@googlechrome

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

/reload-plugins

Copilot CLI

Việc cài đặt Modern Web Guidance để sử dụng với Copilot bao gồm 2 bước:

1. Thêm trang web thương mại:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Cài đặt trình bổ trợ từ cửa hàng:

/plugin install modern-web-guidance@googlechrome

Ngỗng

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

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 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. Để thực hiện việc này, hãy dùng lệnh search của CLI để tìm mã trường hợp sử dụng 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 thiết bị đầu cuối của bạn:

[{"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":"user-experience","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":"user-experience","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":"user-experience","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 mục tiêu của bạn một cách tốt nhất 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 thiết bị đầu cuối. Đối với các trường hợp sử dụng khác, hãy thay thế animate-to-from-top-layer bằng mã nhận dạng trường hợp sử dụng 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ó sự 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. Những giải pháp này thường chứa JavaScript để cung cấp chức năng cho các vấn đề được giải quyết tốt hơn bằng các API HTML và CSS hiện đại.
Trước đây, các mô hình AI không biết 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 thường đưa ra những đề 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ợ 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 cơ bản của một dự án cụ thể.

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àm việc lập trình có sự hỗ trợ của AI có các công cụ để áp dụng trước các tính năng mới hơn của nền tảng web, đồng thời có các phương án dự phòng.

Modern Web Guidance có những nội dung gì?

Hướng dẫn về web hiện đại 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 trên nhiều 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 tốt 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 chế độ xem, tạo kiểu CSS scrollbar-color và ảnh động vào cảnh và thoát cảnh.
CSS: Truy vấn vùng chứa, các không gian màu hiện đại như oklch, bố cục lưới phụ CSS, text-wrap và tính năng cắt chiều cao dòng của kiểu chữ.
Hiệu suất: Thông tin chẩn đoán về chỉ số 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ụ dài, lập lịch tác vụ ở chế độ nền và ưu tiên tải hình ảnh.
Biểu mẫu: Tự động điều chỉnh kích thước các trường nhập (field-sizing: content) và kiểu xác thực chính xác bằng :user-invalid.
Các thành phần giao diện người dùng tích hợp: Kiểm soát trực tiếp các hộp thoại, CSS Anchor Positioning (Định vị điểm neo CSS) cho chú thích và popover.
Hỗ trợ tiếp cận: Thông báo lỗi hỗ trợ 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 thuật gốc).
Khoá truy cập: Đăng ký, xác thực và quản lý khoá truy cập.

Đây là một số trường hợp sử dụng của từng lĩnh vực. Để xem tất cả các trường hợp sử dụng, bạn có thể xem danh sách đầy đủ các trường hợp sử dụng.

Đường cơ sở

Baseline giúp nhà phát triển nắm rõ những tính năng web 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 trên web là Cơ sở, 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 trên web thuộc một trong ba danh mục do Baseline xác định:

Phạm vi cung cấp hạn chế có nghĩa là tính năng này không tương tác được.
Mới có nghĩa là tính năng này mới có khả năng tương tác trong vòng 30 tháng qua.
Có sẵn trên diện rộng 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 các tính năng trên 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 Đường cơ sở, 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à các 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ố có thể là Baseline Newly hoặc Widely available, nhưng một số có thể là lượng hàng có 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 các tác nhân hướng dẫn cụ thể về cách đảm bảo khả năng tương thích rộng hơn trong những trình duyệt không hỗ trợ tính năng đó. Trong nhiều trường hợp, các giải pháp dự phòng được triển khai dưới dạng các tính năng nâng cao 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ì các tác nhân luôn được hướng dẫn tải chúng có điều kiện để chỉ phát sinh chi phí khi cần thiết.

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

Mỗi trường hợp sử dụng trong Modern Web Guidance đều chứa 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 quy trình đánh giá trường hợp sử dụng chạy một quy trình đảm bảo chất lượng tự động để kiểm thử 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 thử xem các thông tin chi tiết về việc triển khai hướng dẫn có được tuân thủ hay không – ví dụ: nếu @media (prefers-reduced-motion: reduce) được quan sát thấy ở nơi đó là yêu cầu.
Các tập lệnh Playwright này liên tục điều chỉnh theo một bản minh hoạ tham chiếu "chính xác" dự kiến có tỷ lệ vượt qua là 100%. Ở phía bên kia, các tập lệnh sẽ kiểm tra dựa trên một quá trình triển khai có lỗi cố ý và dự kiến tỷ lệ vượt qua là 0%.
Nếu một hoặc cả hai cách triển khai "chính xác" và cố ý có lỗi không tạo ra 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 mức hiệu chỉnh 100%.
Cuối cùng, các hoạt động đánh giá toàn diện trên một ứng dụng cơ sở sẽ được áp dụng. Một trong những quy trình đánh giá này là quy trình đánh giá không có hướng dẫn (quy trình kiểm soát), sử dụng dữ liệu huấn luyện mặc định mà không cần gọi Modern Web Guidance để hoàn thành một tác vụ. Một quy trình đá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 Hướng dẫn về web hiện đại.

Các quy trình đánh giá của chúng tôi diễn ra nhiều lần mỗi tuần bằng các mô hình và tác nhân mã hoá tiên tiến, 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 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 thêm 37 điểm phần trăm khi nhân viên được trang bị Hướng dẫn về web hiện đại. Tuy nhiên, kết quả của bạn 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ác 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 đã có thông tin tổng quan chung về Modern Web Guidance và tiềm năng của hướng dẫn 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 trong quy trình làm việc lập trình AI. Giờ đây, bạn có thể đọc về các lĩnh vực và trường hợp sử dụng do Hướng dẫn về web hiện đại cung cấp.