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

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

การติดตั้ง

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

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

วิธีติดตั้งที่แนะนำคือผ่าน CLI ของ modern-web-guidance ที่ทีม 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" ในระหว่างขั้นตอนการติดตั้ง หรือจากหน้าการตั้งค่าในส่วนการปรับแต่ง แล้วไปที่ปลั๊กอิน 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

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

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

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

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

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

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

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

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

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

คำแนะนำในการพัฒนาเว็บที่ทันสมัยประกอบด้วยแนวทางปฏิบัติแนะนำสำหรับกรณีการใช้งานการพัฒนาเว็บมากกว่า 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 คุณจะเชื่อถือระดับความเข้ากันได้ของเบราว์เซอร์ได้ ฟีเจอร์เว็บจะจัดอยู่ในหมวดหมู่ใดหมวดหมู่หนึ่งจาก 3 หมวดหมู่ที่ Baseline กำหนดไว้ ดังนี้

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

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

This project's Baseline target is Baseline 2024.

<other project info...>

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

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

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

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

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

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

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

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

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

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