เริ่มต้นใช้งานคำแนะนำสำหรับเว็บสมัยใหม่

Modern Web Guidance คือชุดทักษะที่ฝังความเชี่ยวชาญด้านแพลตฟอร์มเว็บ แนวทางปฏิบัติแนะนำ และข้อมูลความเข้ากันได้ของเบราว์เซอร์ลงในเอเจนต์การเขียนโค้ดโดยตรง ซึ่งจะช่วยนำทาง Agent การเขียนโค้ดให้ออกห่างจากรูปแบบเดิมๆ และหันไปใช้โซลูชันที่ใช้ประโยชน์จากพลังและความสามารถของแพลตฟอร์มเว็บสมัยใหม่แทน

การติดตั้ง

Modern Web Guidance สามารถติดตั้งและใช้กับ Agent การเขียนโค้ดที่รองรับทักษะได้

modern-web-guidance CLI (แนะนำ)

วิธีติดตั้งที่แนะนำคือผ่าน CLI ของ modern-web-guidance ที่ทีม Chrome สร้างขึ้น การติดตั้ง Modern Web Guidance ผ่าน modern-web-guidance CLI จะเปิดใช้การอัปเดตอัตโนมัติ คุณสามารถติดตั้งจาก modern-web-guidance CLI ได้ดังนี้

npx modern-web-guidance@latest install

หากคุณกำลังพัฒนาส่วนขยาย Chrome เราขอแนะนำให้ใช้คำสั่งต่อไปนี้ (ไม่บังคับ)

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

ซึ่งจะเรียกใช้วิซาร์ดแบบอินเทอร์แอกทีฟเพื่อติดตั้งทักษะตามค่ากำหนดของคุณ

หากต้องการติดตั้ง Modern Web Guidance โดยไม่ใช้ CLI ของ modern-web-guidance โปรดดูวิธีการเฉพาะสำหรับ Agent ต่อไปนี้ โปรดทราบว่าตัวเลือกเหล่านี้ส่วนใหญ่ไม่รองรับการอัปเดตอัตโนมัติ

Antigravity

ดาวน์โหลด Antigravity และเปิดใช้ "modern-web-guidance" ในระหว่างขั้นตอนการติดตั้ง หรือจากหน้าการตั้งค่าในส่วนการปรับแต่ง แล้วไปที่ปลั๊กอิน Build with 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

คุณสามารถดู Modern Web Guidance ได้ในเครื่องมือจัดการทักษะ ซึ่งอยู่ที่การตั้งค่า > ผู้ช่วย AI > ทักษะ เลือกทักษะเพื่อเปิดหน้ารายละเอียด หากต้องการติดตั้งทักษะ ให้คลิกปุ่มติดตั้งเพื่อใช้กับอินสแตนซ์ IDE ปัจจุบัน

หมายเหตุ: คุณเลือกเป้าหมายการติดตั้งอื่นได้ ซึ่งอยู่ในเมนูติดตั้งเช่นกัน

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

การติดตั้ง Modern Web Guidance เพื่อใช้กับ CLI ของ Claude Code มี 3 ขั้นตอนดังนี้

1. วิธีเพิ่มมาร์เก็ตเพลส

/plugin marketplace add GoogleChrome/modern-web-guidance

2. ติดตั้งปลั๊กอินจากมาร์เก็ตเพลสโดยทำดังนี้

/plugin install modern-web-guidance@googlechrome

3. โหลดปลั๊กอินซ้ำ:

/reload-plugins

Codex

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

Copilot CLI

การติดตั้ง Modern Web Guidance เพื่อใช้กับ Copilot มี 2 ขั้นตอนดังนี้

1. วิธีเพิ่มมาร์เก็ตเพลส

/plugin marketplace add GoogleChrome/modern-web-guidance

2. ติดตั้งปลั๊กอินจากมาร์เก็ตเพลสโดยทำดังนี้

/plugin install modern-web-guidance@googlechrome

ห่าน

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

Grok

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

Kimi Code

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

สำรวจก่อนติดตั้ง

ประเมินคลังคู่มือ Modern Web Guidance ก่อนการติดตั้งโดยค้นหาด้วยคำค้นหาหรือเรียกข้อมูลคู่มือตามรหัส โดยใช้คำสั่ง search ของ CLI เพื่อค้นหารหัสเคสโดยใช้พรอมต์ ดังนี้

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

ซึ่งจะแสดงออบเจ็กต์ JSON ในเทอร์มินัลดังนี้

[{"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}]

เมื่ออ่านค่า description แล้ว คุณจะเลือก id ที่แสดงถึงเป้าหมายของคุณได้ดีที่สุด และใช้คำสั่ง retrieve ได้ดังนี้

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

ในกรณีนี้ มาร์กดาวน์ของคู่มือสำหรับกรณีการใช้งาน animate-to-from-top-layer จะแสดงในเทอร์มินัล สำหรับไกด์อื่นๆ ให้แทนที่ animate-to-from-top-layer ด้วยรหัสไกด์ที่ถูกต้อง

เหตุผลที่ควรใช้ Modern Web Guidance

Modern Web Guidance มีประโยชน์ต่อนักพัฒนาเว็บมากกว่าโมเดล AI ที่ไม่มีความช่วยเหลือด้วยเหตุผล 3 ประการที่แตกต่างกัน ดังนี้

1. เอเจนต์การเขียนโค้ด AI มักจะใช้โซลูชันเก่าที่ล้าสมัยโดยค่าเริ่มต้นเพื่อแก้ปัญหาการพัฒนาเว็บสมัยใหม่ โซลูชันเหล่านี้มักมี JavaScript เพื่อให้ฟังก์ชันการทำงานสำหรับปัญหาที่แก้ไขได้ดีกว่าด้วย CSS และ HTML API สมัยใหม่
2. ที่ผ่านมา โมเดล AI ไม่ทราบหรือมีข้อมูลที่ไม่ถูกต้องเกี่ยวกับฟีเจอร์ล่าสุดของแพลตฟอร์มเว็บ
3. สุดท้าย โมเดล AI มักจะให้คำแนะนำที่ล้าสมัยซึ่งไม่ได้คำนึงถึงข้อกำหนดของโปรเจ็กต์หรือเกณฑ์การรองรับของเบราว์เซอร์ แทนที่จะปรับแต่งคำแนะนำให้สอดคล้องกับข้อกำหนดBaselineของโปรเจ็กต์หนึ่งๆ

Modern Web Guidance แก้ไขข้อบกพร่องเหล่านี้ และช่วยให้มั่นใจว่าเวิร์กโฟลว์การเขียนโค้ดที่มีการใช้งาน AI มีเครื่องมือในการนำฟีเจอร์ใหม่ๆ ของแพลตฟอร์มเว็บมาใช้ก่อน โดยคำนึงถึงฟังก์ชันสำรองด้วย

มีอะไรอยู่ใน Modern Web Guidance บ้าง

Modern Web Guidance มีแนวทางปฏิบัติแนะนำสำหรับกรณีการใช้งานการพัฒนาเว็บมากกว่า 100 รายการในสาขาหลักๆ หลายสาขา เบื้องหลังคือทักษะของ Agent ที่จะแนะนำ Agent การเขียนโค้ดเกี่ยวกับวิธีเรียกใช้ modern-web-guidance CLI เพื่อค้นหาและดึงคำแนะนำที่ดีที่สุดสำหรับ Use Case ของคุณ

• ประสบการณ์ของผู้ใช้: ดูการเปลี่ยนภาพ, การจัดรูปแบบ CSS scrollbar-color และภาพเคลื่อนไหวสำหรับการเข้าและออกฉาก
• CSS: การค้นหาคอนเทนเนอร์, ขอบเขตสีสมัยใหม่ เช่น oklch, เลย์เอาต์ CSS Subgrid, text-wrap และการตัดความสูงของบรรทัดตัวพิมพ์
• ประสิทธิภาพ: การวินิจฉัย Interaction to Next Paint (INP), scheduler.yield สำหรับการแบ่งงานที่ใช้เวลานาน, การกำหนดเวลางานเบื้องหลัง และการจัดลำดับความสำคัญของการโหลดรูปภาพ
• แบบฟอร์ม: ช่องป้อนข้อมูลที่ปรับขนาดอัตโนมัติ (field-sizing: content) และรูปแบบการตรวจสอบที่ถูกต้องด้วย :user-invalid
• คอมโพเนนต์ UI ในตัว: การควบคุมกล่องโต้ตอบโดยตรง, การวางตำแหน่ง Anchor ของ CSS สำหรับเคล็ดลับเครื่องมือ และ popover
• การช่วยเหลือพิเศษ: ประกาศข้อผิดพลาดที่เข้าถึงได้ และการจัดการโฟกัสของแป้นพิมพ์
• AI ในตัว: ใช้โมเดลไคลเอ็นต์ในอุปกรณ์ (API การตรวจจับภาษา การสรุป และการแปลภาษาแบบเนทีฟ)
• พาสคีย์: การลงทะเบียน การตรวจสอบสิทธิ์ และการจัดการพาสคีย์

นี่คือคู่มือบางส่วนจากแต่ละหมวดหมู่ หากต้องการดูคำแนะนำทั้งหมด โปรดดูรายการคำแนะนำทั้งหมด

ฐาน

Baseline ช่วยให้นักพัฒนาซอฟต์แวร์เข้าใจได้ชัดเจนว่าฟีเจอร์เว็บใดที่ทำงานร่วมกันได้ในเครื่องมือเบราว์เซอร์หลักๆ หากฟีเจอร์เว็บเป็น Baseline คุณสามารถเชื่อถือระดับความเข้ากันได้ของเบราว์เซอร์ได้ ฟีเจอร์เว็บจะแบ่งออกเป็น 1 ใน 3 หมวดหมู่ที่ Baseline กำหนดไว้ ดังนี้

• ความพร้อมใช้งานแบบจำกัดหมายความว่าฟีเจอร์นี้ไม่สามารถทำงานร่วมกันได้
• พร้อมใช้งานใหม่หมายความว่าฟีเจอร์เพิ่งทำงานร่วมกันได้ภายใน 30 เดือนที่ผ่านมา
• พร้อมใช้งานอย่างกว้างขวางหมายความว่าฟีเจอร์นี้ทำงานร่วมกันได้เป็นเวลาอย่างน้อย 30 เดือนขึ้นไป

แม้ว่า Baseline จะเป็นคำจำกัดความสำหรับการทำงานร่วมกันของฟีเจอร์เว็บ แต่ก็เป็นแง่มุมที่กำหนดค่าได้ของโปรเจ็กต์ด้วย คุณสามารถเลือกเป้าหมาย Baseline แล้วกำหนดค่าโปรเจ็กต์ให้ใช้เป้าหมายดังกล่าวโดยเพิ่มลงในไฟล์ AGENTS.md หรือ CLAUDE.md เช่น

This project's Baseline target is Baseline 2024.

<other project info...>

สำคัญ: หากคุณติดตั้ง Modern Web Guidance แต่ไม่ได้กำหนดค่าเป้าหมาย Baseline สำหรับโปรเจ็กต์ Modern Web Guidance จะใช้ค่าเริ่มต้นเป็น Baseline ที่พร้อมใช้งานในวงกว้าง

Modern Web Guidance และฟีเจอร์สำรอง

Modern Web Guidance ใช้ฟีเจอร์เว็บสมัยใหม่ที่หลากหลาย โดยบางฟีเจอร์อาจเป็นฟีเจอร์พื้นฐานที่เพิ่งเปิดตัวหรือพร้อมใช้งานในวงกว้าง แต่บางฟีเจอร์อาจมีจำนวนจำกัด ในกรณีที่ฟีเจอร์ไม่พร้อมใช้งานในวงกว้าง คู่มือ Use Case จะให้วิธีการเฉพาะแก่ตัวแทนเกี่ยวกับวิธีตรวจสอบความเข้ากันได้ที่กว้างขึ้นในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์ดังกล่าว ในหลายกรณี ระบบจะใช้กลยุทธ์สำรองเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่อง ซึ่งจะใช้ฟีเจอร์ที่ทันสมัยได้ทุกที่ที่รองรับ หากจำเป็นต้องใช้ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ ระบบจะแนะนำให้ Agent โหลด Polyfill แบบมีเงื่อนไขเสมอ เพื่อให้มีค่าใช้จ่ายเฉพาะในกรณีที่จำเป็นเท่านั้น

เราจะมั่นใจในความถูกต้องได้อย่างไร

กรณีการใช้งานแต่ละกรณีใน Modern Web Guidance มีชุดการประเมินที่ได้รับการปรับเทียบอย่างต่อเนื่องเพื่อให้มั่นใจว่าเอาต์พุตมีคุณภาพ

การประเมิน Use Case จะเรียกใช้ชุดทดสอบ QA อัตโนมัติเพื่อทดสอบลักษณะการทำงานของ Agent ที่ถูกต้อง โดย Playwright มีบทบาทสำคัญดังนี้

1. สำหรับคู่มือแต่ละรายการ จะมีการพัฒนาสคริปต์ Playwright เพื่อทดสอบว่ามีการปฏิบัติตามรายละเอียดการติดตั้งใช้งานของคู่มือหรือไม่ เช่น มีการสังเกตเห็น @media (prefers-reduced-motion: reduce) ในกรณีที่เป็นข้อกำหนดหรือไม่
2. สคริปต์ Playwright เหล่านี้จะปรับเทียบอย่างต่อเนื่องกับการติดตั้งใช้งานเดโมอ้างอิงที่ "ถูกต้อง" ซึ่งคาดว่าจะมีอัตราการผ่าน 100% ในทางกลับกัน สคริปต์จะตรวจสอบการใช้งานที่มีข้อบกพร่องโดยเจตนาซึ่งคาดว่าจะมีอัตราการผ่าน 0%
3. หากการติดตั้งใช้งานที่ "ถูกต้อง" และการติดตั้งใช้งานที่มีข้อบกพร่องโดยเจตนาอย่างใดอย่างหนึ่งหรือทั้ง 2 อย่างไม่สามารถสร้างอัตราการผ่าน 100% และ 0% ตามลำดับ เครื่องมือสร้างจะลองอีกครั้งโดยอัตโนมัติโดยใช้บริบทจนกว่าจะได้รับการปรับเทียบ 100%
4. สุดท้าย ระบบจะใช้การประเมินตั้งแต่ต้นจนจบในแอปพลิเคชันพื้นฐาน การประเมินแบบหนึ่งจะไม่มีคำแนะนำ ซึ่งเป็นการควบคุม โดยใช้ข้อมูลฝึกฝนเริ่มต้นโดยไม่ต้องเรียกใช้ Modern Web Guidance เพื่อทำงานให้เสร็จ การประเมินอีกรายการ (การทดสอบ) จะจัดการงานเดียวกันโดยใช้ Modern Web Guidance

การประเมินของเราทำงานหลายครั้งต่อสัปดาห์ด้วยโมเดลและเอเจนต์การเขียนโค้ดที่ล้ำสมัย ซึ่งช่วยให้เราเห็นภาพที่ชัดเจนว่าเอเจนต์ทำงานได้ดีเพียงใดทั้งแบบมีและไม่มีคำแนะนำจากเรา โดยเฉลี่ยแล้ว ผลลัพธ์ในช่วงแรกแสดงให้เห็นว่าการปฏิบัติตามแนวทางปฏิบัติแนะนำสมัยใหม่เพิ่มขึ้น 37 เปอร์เซ็นต์เมื่อตัวแทนมี Modern Web Guidance อย่างไรก็ตาม ผลลัพธ์อาจแตกต่างกันไปตามข้อกำหนดของโปรเจ็กต์ โมเดล พรอมต์ที่คุณเขียน และเครื่องมือเขียนโค้ดแบบ Agentic ที่คุณต้องการ

เปิดใช้คำแนะนำสำหรับฟีเจอร์ที่เปลี่ยนแปลงได้

ฟีเจอร์ที่ไม่เสถียรคือฟีเจอร์ทดลองบนเว็บที่ใช้งานในเครื่องมือเบราว์เซอร์เพียงเครื่องมือเดียว และอาจมีการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบ หากต้องการเปิดใช้คำแนะนำสำหรับฟีเจอร์เหล่านี้ ให้ใช้คำสั่งต่อไปนี้ในรูทของโปรเจ็กต์

npx modern-web-guidance@latest set-allow-volatile-features

ข้อควรระวัง: แม้ว่าคู่มือ Modern Web Guidance จะมีกลยุทธ์สำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ แต่ฟีเจอร์ที่ผันผวนเพิ่งเปิดตัวในเครื่องมือเบราว์เซอร์เพียงเครื่องมือเดียวหรือยังคงมีความเสถียรอยู่ API หรือลักษณะการทำงานของ API อาจเปลี่ยนแปลงในเบราว์เซอร์รุ่นต่อๆ ไป ซึ่งอาจทำให้คุณต้องอัปเดตการติดตั้งใช้งานในภายหลัง

เปิดใช้คำแนะนำสำหรับฟีเจอร์ในช่วงทดลองใช้จากต้นทาง

เมื่อเปิดตัวฟีเจอร์ทดลองเป็นครั้งแรก ฟีเจอร์เหล่านี้มักจะซ่อนอยู่หลัง Flag หรือพร้อมใช้งานในเว็บไซต์เวอร์ชันที่ใช้งานจริงผ่านช่วงทดลองใช้จากต้นทางเท่านั้น คู่มือ Modern Web Guidance บางรายการใช้ฟีเจอร์เหล่านี้ แต่คำแนะนำสำหรับฟีเจอร์ดังกล่าวจะไม่พร้อมใช้งานสำหรับ Agent การเขียนโค้ดโดยค่าเริ่มต้น หากต้องการดูคำแนะนำสำหรับฟีเจอร์เหล่านี้ ให้เรียกใช้คำสั่งต่อไปนี้ในรูทของโปรเจ็กต์

npx modern-web-guidance@latest set-allow-origin-trials

ขั้นตอนถัดไป

ตอนนี้คุณมีภาพรวมทั่วไปของ Modern Web Guidance และศักยภาพของเครื่องมือนี้ในการช่วยให้คุณนำแนวทางปฏิบัติแนะนำสำหรับเว็บสมัยใหม่มาใช้ในเวิร์กโฟลว์การเขียนโค้ด AI ได้ง่ายขึ้น ตอนนี้คุณสำรวจไกด์ที่ Modern Web Guidance จัดทำขึ้นได้แล้ว