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

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

การติดตั้ง

คุณติดตั้งและใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัยกับ Agent การเขียนโค้ดที่รองรับทักษะได้

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

npx modern-web-guidance@latest install

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

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

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

หากต้องการติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยโดยไม่ใช้ modern-web-guidance CLI โปรดดูวิธีการเฉพาะสำหรับเอเจนต์ต่อไปนี้ โปรดทราบว่าตัวเลือกส่วนใหญ่เหล่านี้ไม่รองรับการอัปเดตอัตโนมัติ

Antigravity

ดาวน์โหลด Antigravity และเปิดใช้ "คำแนะนำสำหรับเว็บสมัยใหม่" ในขั้นตอนการติดตั้ง หรือจากหน้าการตั้งค่าในส่วนการปรับแต่ง แล้วคลิกสร้างด้วยปลั๊กอินของ 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

คุณดูคำแนะนำในการพัฒนาเว็บที่ทันสมัยได้ในSkill Manager ซึ่งอยู่ในส่วนการตั้งค่า > AI Assistant > ทักษะ เลือกทักษะเพื่อเปิดหน้ารายละเอียด หากต้องการติดตั้งทักษะ ให้คลิกปุ่มติดตั้งเพื่อนำไปใช้กับอินสแตนซ์ 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

การติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อใช้กับ Claude Code CLI มี 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

การติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัยเพื่อใช้กับ 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 เพื่อค้นหารหัส Use Case โดยใช้พรอมต์ดังนี้

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 จะแสดงในเทอร์มินัล สำหรับ Use Case อื่นๆ ให้แทนที่ animate-to-from-top-layer ด้วยรหัส Use Case ที่ถูกต้อง

เหตุผลที่ควรใช้คำแนะนำในการพัฒนาเว็บที่ทันสมัย

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

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

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

คำแนะนำในการพัฒนาเว็บที่ทันสมัยมีอะไรบ้าง

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

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

นี่เป็นเพียงตัวอย่างกรณีการใช้งานบางส่วนจากแต่ละสาขาวิชา หากต้องการดู Use Case ทั้งหมด คุณสามารถดูรายการ Use Case ทั้งหมด

ฐาน

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

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

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

This project's Baseline target is Baseline 2024.

<other project info...>

คำแนะนำในการพัฒนาเว็บที่ทันสมัยและการสำรองฟีเจอร์

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

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

กรณีการใช้งานแต่ละรายการในคำแนะนำในการพัฒนาเว็บที่ทันสมัยจะมีชุดการประเมินที่ได้รับการปรับเทียบอย่างต่อเนื่องเพื่อให้มั่นใจว่าผลลัพธ์มีคุณภาพ

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

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

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

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

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