คำแนะนำในการพัฒนาเว็บที่ทันสมัยคือชุดทักษะที่ฝังความเชี่ยวชาญด้านแพลตฟอร์มเว็บ แนวทางปฏิบัติแนะนำ และข้อมูลความเข้ากันได้ของเบราว์เซอร์ลงใน Agent การเขียนโค้ดของคุณโดยตรง ซึ่งจะช่วยนำ Agent การเขียนโค้ดของคุณออกจากรูปแบบเดิมๆ และมุ่งไปที่โซลูชันที่ใช้ประโยชน์จากความสามารถของแพลตฟอร์มเว็บที่ทันสมัยแทน
การติดตั้ง
คุณสามารถติดตั้งและใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยกับ Agent การเขียนโค้ดที่รองรับทักษะได้
modern-web-guidance CLI (แนะนำ)
วิธีติดตั้งที่แนะนำคือผ่าน modern-web-guidance CLI ที่สร้างโดยทีม Chrome การติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยผ่าน 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 โปรดดูวิธีการเฉพาะของ Agent ต่อไปนี้ โปรดทราบว่าตัวเลือกส่วนใหญ่เหล่านี้ไม่รองรับการอัปเดตอัตโนมัติ
Antigravity
ดาวน์โหลด Antigravity และเปิดใช้ "modern-web-guidance" ในขั้นตอนการติดตั้ง หรือจากหน้าการตั้งค่า ในส่วนการปรับแต่ง แล้วเลือกสร้างด้วยปลั๊กอินของ 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
คุณจะเห็นคำแนะนำในการพัฒนาเว็บที่ทันสมัยในเครื่องมือจัดการทักษะ ซึ่งอยู่ในส่วนการตั้งค่า > ผู้ช่วย AI > ทักษะ เลือกทักษะเพื่อเปิดหน้ารายละเอียด หากต้องการติดตั้งทักษะ ให้คลิกปุ่มติดตั้ง เพื่อนำไปใช้กับอินสแตนซ์ IDE ปัจจุบัน
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
การติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อใช้กับ Claude Code มี 3 ขั้นตอนดังนี้
1. เพิ่ม Marketplace โดยใช้คำสั่งต่อไปนี้
/plugin marketplace add GoogleChrome/modern-web-guidance
2. ติดตั้งปลั๊กอินจาก Marketplace โดยใช้คำสั่งต่อไปนี้
/plugin install modern-web-guidance@googlechrome
3. โหลดปลั๊กอินใหม่โดยใช้คำสั่งต่อไปนี้
/reload-plugins
Copilot CLI
การติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อใช้กับ Copilot มี 2 ขั้นตอนดังนี้
1. เพิ่ม Marketplace โดยใช้คำสั่งต่อไปนี้
/plugin marketplace add GoogleChrome/modern-web-guidance
2. ติดตั้งปลั๊กอินจาก Marketplace โดยใช้คำสั่งต่อไปนี้
/plugin install modern-web-guidance@googlechrome
Goose
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
สำรวจก่อนการติดตั้ง
ประเมินคลังคู่มือคำแนะนำในการพัฒนาเว็บที่ทันสมัยก่อนการติดตั้งโดยค้นหาด้วยการค้นหาหรือดึงข้อมูลคู่มือของเราตามรหัส หากต้องการทำเช่นนี้ ให้ใช้คำสั่ง 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":"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}]
เมื่ออ่านค่า description แล้ว คุณจะเลือก id ที่ตรงกับเป้าหมายมากที่สุด แล้วใช้คำสั่ง retrieve ได้ดังนี้
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
ในกรณีนี้ Markdown ของคู่มือสำหรับกรณีการใช้งาน animate-to-from-top-layer จะแสดงในเทอร์มินัล สำหรับกรณีการใช้งานอื่นๆ ให้แทนที่ animate-to-from-top-layer ด้วย รหัสกรณีการใช้งานที่ถูกต้อง
เหตุผลที่ควรใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย
คำแนะนำในการพัฒนาเว็บที่ทันสมัยมีประโยชน์ต่อนักพัฒนาเว็บมากกว่าโมเดล AI ที่ไม่มีการช่วยเหลือด้วยเหตุผล 3 ประการที่แตกต่างกันดังนี้
- Agent การเขียนโค้ด AI มักจะใช้โซลูชันเก่าที่ล้าสมัยเป็นค่าเริ่มต้นเพื่อแก้ปัญหาการพัฒนาเว็บที่ทันสมัย โซลูชันเหล่านี้มักจะมี JavaScript เพื่อมอบฟังก์ชันการทำงานสำหรับปัญหาที่ API ของ CSS และ HTML ที่ทันสมัยสามารถแก้ได้ดีกว่า
- ในอดีต โมเดล AI ไม่ทราบหรือมีข้อมูลที่ไม่ถูกต้องเกี่ยวกับฟีเจอร์ล่าสุดของแพลตฟอร์มเว็บ
- สุดท้าย โมเดล AI มักจะให้คำแนะนำที่ล้าสมัยซึ่งไม่ได้คำนึงถึงข้อกำหนดของโปรเจ็กต์หรือเกณฑ์การรองรับเบราว์เซอร์ แต่จะปรับคำแนะนำให้ตรงกับข้อกำหนด พื้นฐาน ของโปรเจ็กต์ที่กำหนด
คำแนะนำในการพัฒนาเว็บที่ทันสมัยช่วยแก้ปัญหาข้อบกพร่องเหล่านี้ และช่วยให้เวิร์กโฟลว์การเขียนโค้ดที่ได้รับความช่วยเหลือจาก AI มีเครื่องมือในการนำฟีเจอร์ใหม่ๆ ของแพลตฟอร์มเว็บมาใช้ก่อน และคำนึงถึงตัวเลือกสำรอง
คำแนะนำในการพัฒนาเว็บที่ทันสมัยมีอะไรบ้าง
คำแนะนำในการพัฒนาเว็บที่ทันสมัยมีแนวทางปฏิบัติแนะนำสำหรับกรณีการใช้งานการพัฒนาเว็บกว่า 100 รายการในหลายสาขาวิชาหลัก โดยเบื้องหลังแล้ว คำแนะนำนี้เป็นทักษะของ Agent ที่สั่งให้ Agent การเขียนโค้ดเรียกใช้ modern-web-guidance CLI เพื่อค้นหาและดึงข้อมูลคำแนะนำที่ดีที่สุดสำหรับกรณีการใช้งานของคุณ
- ประสบการณ์ของผู้ใช้: การเปลี่ยนมุมมอง การจัดรูปแบบ CSS
scrollbar-colorและภาพเคลื่อนไหวสำหรับการเข้าและออกฉาก - CSS: การค้นหาคอนเทนเนอร์ พื้นที่สีที่ทันสมัย เช่น
oklch, เลย์เอาต์กริดย่อย CSS,text-wrapและการตัดความสูงของบรรทัดการจัดตัวอักษร - ประสิทธิภาพ: การวินิจฉัย Interaction to Next Paint (INP),
scheduler.yieldสำหรับการแบ่งงานที่ใช้เวลานาน การจัดกำหนดการงานเบื้องหลัง และการจัดลำดับความสำคัญของการโหลดรูปภาพ - แบบฟอร์ม: ช่องป้อนข้อมูลที่ปรับขนาดอัตโนมัติ (
field-sizing: content) และรูปแบบการตรวจสอบความถูกต้องที่แม่นยำด้วย:user-invalid - คอมโพเนนต์ UI ในตัว: การควบคุมกล่องโต้ตอบโดยตรง การวางตำแหน่ง CSS Anchor สำหรับคำแนะนำเครื่องมือ และ
popover - การช่วยเหลือพิเศษ: การประกาศข้อผิดพลาดที่เข้าถึงได้ง่ายและการจัดการโฟกัสของแป้นพิมพ์
- AI ในตัว: ใช้โมเดลไคลเอ็นต์ในอุปกรณ์ (API การตรวจหาภาษา การสรุป และการแปลภาษา)
- พาสคีย์: การลงทะเบียน การตรวจสอบสิทธิ์ และการจัดการพาสคีย์
ตัวอย่างกรณีการใช้งานจากแต่ละสาขาวิชา หากต้องการดูกรณีการใช้งานทั้งหมด โปรดดูรายการกรณีการใช้งานทั้งหมด
ฐาน
ฐานช่วยให้นักพัฒนาแอปเข้าใจได้ชัดเจนว่าฟีเจอร์เว็บใดที่ทำงานร่วมกันได้ในเครื่องมือแสดงผลหลักของเบราว์เซอร์ หากฟีเจอร์เว็บเป็นฐาน คุณจะมั่นใจได้ถึงระดับความเข้ากันได้ของเบราว์เซอร์ ฟีเจอร์เว็บแบ่งออกเป็น 3 หมวดหมู่ที่กำหนดโดยฐานดังนี้
- ใช้งานได้แบบจำกัด หมายความว่าฟีเจอร์นี้ทำงานร่วมกันไม่ได้
- พร้อมใช้งานใหม่ หมายความว่าฟีเจอร์นี้เพิ่งทำงานร่วมกันได้ภายใน 30 เดือนที่ผ่านมา
- พร้อมใช้งานอย่างกว้างขวาง หมายความว่าฟีเจอร์นี้ทำงานร่วมกันได้มาอย่างน้อย 30 เดือน
แม้ว่าฐานจะเป็นคำจำกัดความของการทำงานร่วมกันของฟีเจอร์เว็บ แต่ก็ยังเป็นส่วนที่กำหนดค่าได้ของโปรเจ็กต์ด้วย คุณสามารถเลือกเป้าหมายฐาน แล้วกำหนดค่าโปรเจ็กต์ให้ใช้เป้าหมายนั้นโดยเพิ่มเป้าหมายลงในไฟล์ AGENTS.md หรือ CLAUDE.md เช่น
This project's Baseline target is Baseline 2024.
<other project info...>
คำแนะนำในการพัฒนาเว็บที่ทันสมัยและตัวเลือกสำรองของฟีเจอร์
คำแนะนำในการพัฒนาเว็บที่ทันสมัยใช้ฟีเจอร์เว็บที่ทันสมัยมากมาย ฟีเจอร์บางอย่างอาจเป็นฐานที่พร้อมใช้งานใหม่หรือพร้อมใช้งานอย่างกว้างขวาง แต่บางอย่างอาจมีจำนวนจำกัด ในกรณีที่ฟีเจอร์ไม่พร้อมใช้งานอย่างกว้างขวาง คู่มือกรณีการใช้งานจะให้คำแนะนำเฉพาะแก่ Agent เกี่ยวกับวิธีตรวจสอบความเข้ากันได้ที่กว้างขึ้นในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์ ในหลายๆ กรณี ตัวเลือกสำรองจะมีการนำไปใช้เป็นการปรับปรุงแบบก้าวหน้า ซึ่งฟีเจอร์ที่ทันสมัยจะสามารถใช้ได้ทุกที่ที่รองรับ หากจำเป็นต้องใช้ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ ระบบจะสั่งให้ Agent โหลด Polyfill แบบมีเงื่อนไขเสมอ เพื่อให้เกิดค่าใช้จ่ายเฉพาะในกรณีที่จำเป็นเท่านั้น
เราจะรับประกันความถูกต้องได้อย่างไร
แต่ละกรณีการใช้งานในคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะมีชุดการประเมินที่ปรับเทียบอย่างต่อเนื่องเพื่อให้ได้ผลลัพธ์ที่มีคุณภาพ
การประเมินกรณีการใช้งานจะเรียกใช้ QA Harness แบบอัตโนมัติเพื่อทดสอบการทำงานที่ถูกต้องของ Agent โดย Playwright จะมีบทบาทสำคัญดังนี้
- สำหรับแต่ละคู่มือ เราจะพัฒนาสคริปต์ Playwright เพื่อทดสอบว่ามีการปฏิบัติตามรายละเอียดการติดตั้งใช้งานของคู่มือหรือไม่ เช่น หากมีการสังเกต
@media (prefers-reduced-motion: reduce)ในกรณีที่จำเป็น - สคริปต์ Playwright เหล่านี้จะปรับเทียบอย่างต่อเนื่องกับการติดตั้งใช้งานเดโมอ้างอิงที่ "ถูกต้อง" ซึ่งคาดหวังอัตราการผ่าน 100% ในทางกลับกัน สคริปต์จะตรวจสอบกับการติดตั้งใช้งานที่มีข้อบกพร่องโดยเจตนาซึ่งคาดหวังอัตราการผ่าน 0%
- หากการติดตั้งใช้งานที่ "ถูกต้อง" และการติดตั้งใช้งานที่มีข้อบกพร่องโดยเจตนาไม่สามารถสร้างอัตราการผ่าน 100% และ 0% ตามลำดับได้ เครื่องมือสร้างจะลองอีกครั้งโดยอัตโนมัติโดยใช้บริบทจนกว่าจะมีการปรับเทียบ 100%
- สุดท้าย เราจะใช้การประเมินแบบครบวงจรกับแอปพลิเคชันพื้นฐาน การประเมินอย่างหนึ่งคือการประเมินแบบไม่มีคำแนะนำ ซึ่งเป็นการควบคุมโดยใช้ข้อมูลฝึกฝนเริ่มต้นโดยไม่ต้องเรียกใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อทำงานให้เสร็จ การประเมินอีกอย่างหนึ่ง (การทดลอง) จะจัดการกับงานเดียวกันโดยใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย
การประเมินของเราจะทำงานหลายครั้งต่อสัปดาห์ด้วยโมเดลและ Agent การเขียนโค้ดที่ล้ำสมัย ซึ่งช่วยให้เราเห็นภาพที่ชัดเจนว่า Agent ทำงานได้ดีเพียงใดเมื่อมีและไม่มีคำแนะนำของเรา โดยเฉลี่ยแล้ว ผลลัพธ์เบื้องต้นแสดงให้เห็นว่าการปฏิบัติตามแนวทางปฏิบัติแนะนำที่ทันสมัยเพิ่มขึ้น 37 เปอร์เซ็นต์เมื่อ Agent มีคำแนะนำในการพัฒนาเว็บที่ทันสมัย อย่างไรก็ตาม ผลลัพธ์ที่ได้อาจแตกต่างกันไปตามข้อกำหนดของโปรเจ็กต์ โมเดล พรอมต์ที่คุณเขียน และเครื่องมือการเขียนโค้ดแบบ Agent ที่คุณต้องการ
ขั้นตอนถัดไป
ตอนนี้คุณได้เห็นภาพรวมทั่วไปของคำแนะนำในการพัฒนาเว็บที่ทันสมัยแล้ว รวมถึงศักยภาพของคำแนะนำนี้ที่จะช่วยให้คุณนำแนวทางปฏิบัติแนะนำที่ทันสมัยในการพัฒนาเว็บมาใช้ในเวิร์กโฟลว์การเขียนโค้ด AI ได้ง่ายขึ้น ตอนนี้คุณสามารถอ่านเกี่ยวกับ สาขาวิชา และ กรณีการใช้งาน ที่คำแนะนำในการพัฒนาเว็บที่ทันสมัยมีให้