Đâ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 uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Hướng dẫn về web hiện đại là một kỹ năng của tác nhân, áp dụng các phương pháp hay nhất hiện đại cho quy trình lập trình có sự hỗ trợ của AI. Việc này giúp hướng dẫn tác nhân lập trình của bạn tránh các giải pháp cũ cho các vấn đề thường gặp về phát triển web, thay vào đó là các giải pháp nên sử dụng các tính năng mới hơn của nền tảng web.

Cài đặt

Bạn có thể cài đặt các kỹ năng Hướng dẫn về web hiện đại trong nhiều loại tác nhân, giúp bạn duy trì quy trình công việc mà mình muốn trong khi vẫn được hưởng lợi từ hướng dẫn mà các tác nhân này cung cấp.

`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 các kỹ năng thông qua giao diện dòng lệnh (CLI) modern-web-guidance sẽ tự động cập nhật các kỹ nă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:

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 sử dụng các kỹ năng Modern Web Guidance mà không cần dùng CLI modern-web-guidance, hãy đọc tiếp để tìm hiểu cách cài đặt các kỹ năng này cho tác nhân mà bạn muốn.

Antigravity

Tải Antigravity xuống và 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 rồi chọn Tạo 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 các kỹ năng Hướng dẫn về web hiện đại trong Trình quản lý kỹ năng, có 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

Việc cài đặt Hướng dẫn về web hiện đại để sử dụng với Claude Code 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 Hướng dẫn về web hiện đại để 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

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

Đánh giá thư viện hướng dẫn về kỹ năng Hướng dẫn về web hiện đại 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 đố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ã trường hợp sử dụng hợp lệ bất kỳ.

Tại sao nên sử dụng Hướng dẫn về web hiện đại?

Các kỹ năng Hướng dẫn về web hiện đại 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 mà 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ể.

Các kỹ năng Hướng dẫn về web hiện đại 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 sử dụng 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 lưu ý đến các phương án dự phòng.

Hướng dẫn về web hiện đại 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 duy nhất của tác nhân, hướng dẫn tác nhân viết mã 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 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ụ cần nhiều thời gian, 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 sẵn: 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ằng 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 biết 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 trên 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 trên web thuộc một trong 3 danh mục do Đường cơ sở xác định:

Lượng hàng có hạn 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 hoặc lâu hơ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...>

Hướng dẫn về web hiện đại và các tính năng dự phòng

Hướng dẫn về web hiện đại sử dụng nhiều tính năng web hiện đại. Một số có thể là Mới ra mắt hoặc Có sẵn rộng rãi, 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 bước, 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 Hướng dẫn về web hiện đại đều có một hướng dẫn và hầu hết các trường hợp sử dụng đều được điều chỉnh liên tục để hướng các tác nhân AI đến kết quả chất lượng.

Các trường hợp sử dụng được hiệu chỉnh sẽ sử dụng một bộ kiểm thử QA 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 của 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 quy trình triển khai có lỗi một cách có chủ ý 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 các kỹ năng Hướng dẫn về web hiện đại để hoàn thành một nhiệm 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 các kỹ năng Hướng dẫn về web hiện đại.

Các quy trình đánh giá của chúng tôi chạy hằng ngày bằng các mô hình và tác nhân mã hoá tiên tiến, giúp chúng tôi nắm rõ 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 độ cải thiện 37 điểm phần trăm về mức độ tuân thủ các phương pháp hay nhất hiện đại khi nhân viên hỗ trợ đượ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 muốn dùng.

Các bước tiếp theo

Giờ đây, bạn đã có thông tin tổng quan chung về Hướng dẫn về web hiện đại 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ể khám phá các kỹ năng và trường hợp sử dụng do Hướng dẫn về web hiện đại cung cấp.