Đâ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

Modern Web Guidance (Hướng dẫn về web hiện đại) là một tập hợp các kỹ năng nhúng trực tiế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 vào các tác nhân lập trình của bạn. Hướng dẫn này giúp tác nhân lập trình của bạn tránh xa các mẫu cũ và 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ợ kỹ năng.

CLI `modern-web-guidance` (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. Khi cài đặt Modern Web Guidance thông qua CLI modern-web-guidance, bạn sẽ bật được tính năng 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

Ngoài ra, 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 ý thích 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. Xin lưu ý rằng hầu hết các tuỳ 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" trong quy trình cài đặt hoặc trên trang Settings (Cài đặt) trong phần 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 Modern Web Guidance trong Trình quản lý kỹ năng, có trong phần Settings > AI Assistant > Skills. 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, hãy nhấp vào nút Install (Cài đặt) để áp dụng kỹ năng đó cho thực thể 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

Bạn cần thực hiện 3 bước để cài đặt Modern Web Guidance để dùng với Claude Code:

1. Thêm marketplace:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Cài đặt trình bổ trợ từ marketplace:

/plugin install modern-web-guidance@googlechrome

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

/reload-plugins

Copilot CLI

Bạn cần thực hiện 2 bước để cài đặt Modern Web Guidance để dùng với Copilot:

1. Thêm marketplace:

/plugin marketplace add GoogleChrome/modern-web-guidance

2. Cài đặt trình bổ trợ từ marketplace:

/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 Modern Web Guidance trước khi cài đặt bằng cách tìm kiếm theo truy vấn 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ã nhận dạng trường hợp sử dụng bằng một lời nhắc:

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

Lệnh 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 đúng nhất mục tiêu của mình rồi 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 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 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 các vấn đề mà API HTML và CSS hiện đại giải quyết tốt hơn.
Các mô hình AI trước đây 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 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ợ trình trình duyệt, thay vì điều chỉnh hướng dẫn theo các yêu cầu Cơ sở 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 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 lưu ý đế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 trên 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ủa bạn cách gọi modern-web-guidance CLI để 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, kiểu CSS scrollbar-color và hình ảnh động khi vào và thoát.
CSS: Truy vấn vùng chứa, không gian màu hiện đại như oklch, bố cục lưới phụ CSS, text-wrap và cắ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ụ dài, lên 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à các 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: Kiểm soát trực tiếp các hộp thoại, Vị trí neo CSS cho chú giải công cụ và popover.
Khả năng 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 trong 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ở

Đường cơ sở 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à Đường 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 web thuộc một trong 3 danh mục do Đường cơ sở 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 cung cấp có nghĩa là tính năng này mới tương tác được trong vòng 30 tháng qua.
Được cung cấp rộng rãi có nghĩa là tính năng này đã tương tác được trong ít nhất 30 tháng trở lên.

Mặc dù Đường cơ sở là đị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ụ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 phương án dự phòng cho tính năng

Modern Web Guidance sử dụng nhiều tính năng web hiện đại. Một số tính năng trong số này có thể là Đường cơ sở mới được cung cấp hoặc được cung cấp rộng rãi, nhưng một số tính năng có thể có 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 các trình duyệt không hỗ trợ tính năng đó. Trong nhiều trường hợp, các phương án dự phòng được triển khai dưới dạng các tính năng nâng cao dần 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ợ, các tác nhân luôn được hướng dẫn tải các polyfill đó 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 tập hợp các đánh giá được liên tục điều chỉnh để đảm bảo chất lượng đầu ra.

Các đánh giá trường hợp sử dụng chạy một bộ kiểm thử đả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 chi tiết 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 bản triển khai bản minh hoạ tham chiếu "chính xác" dự kiến có tỷ lệ đạt là 100%. Ở phía bên kia, các tập lệnh kiểm tra theo một bản triển khai bị lỗi có chủ ý dự kiến có tỷ lệ đạt là 0%.
Nếu một hoặc cả hai bản triển khai "chính xác" và bị lỗi có chủ ý không tạo ra tỷ lệ đạt 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 điều chỉnh 100%.
Cuối cùng, các đá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 đánh giá này là đánh giá không có hướng dẫn, đây là một biện pháp kiểm soát, 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 tác vụ. Một đánh giá khác (thử nghiệm) giải quyết cùng một tác vụ bằng Modern Web Guidance.

Các đánh giá của chúng tôi chạy nhiều lần mỗi tuần với các mô hình và tác nhân lập trình hiện đại, giúp chúng tôi có cái nhìn 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 đã cải thiện 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ủa bạn có thể khác nhau tuỳ thuộc vào các yêu cầu của dự án, mô hình, lời nhắc bạn viết và các công cụ lập trình 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 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 hiện đại cho web trong quy trình 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 Modern Web Guidance cung cấp.