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

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

การติดตั้ง

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

วิธีการติดตั้งที่แนะนําคือผ่าน modern-web-guidanceCLI ที่ทีม 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-guidanceCLI โปรดอ่านต่อเพื่อดูวิธีติดตั้งสำหรับเอเจนต์ที่คุณต้องการ

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

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

/plugin marketplace add GoogleChrome/modern-web-guidance

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

/plugin install modern-web-guidance@googlechrome

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

/reload-plugins

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

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

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

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

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

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

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

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

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

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

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

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

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

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