เรียกดูสาขาวิชาต่อไปนี้เพื่อสำรวจส่วนต่างๆ ของคำแนะนำ
สาขาวิชาหลัก
แนวทางปฏิบัติแนะนำสำหรับการสร้างประสบการณ์การใช้งานที่ปลอดภัยและมีคุณภาพสูงบนเว็บ
accessibility
ประเมิน แก้ไข และใช้รูปแบบการช่วยเหลือพิเศษที่มีประสิทธิภาพในแอปพลิเคชันทั้งหมด
ดูคู่มือ accessibility บน GitHub
performance
เพิ่มประสิทธิภาพ Core Web Vitals, ลดเวลาในการโหลดหน้าเว็บ และปรับปรุงการตอบสนองต่อข้อมูลจากผู้ใช้
ดูคู่มือ performance บน GitHub
privacy
ใช้การออกแบบที่คำนึงถึงความเป็นส่วนตัว ขอบเขตการใช้ข้อมูล การตรวจสอบโดยบุคคลที่สาม และการจัดการข้อมูลอย่างปลอดภัย
security
ใช้หลักเกณฑ์ด้านความปลอดภัยเชิงป้องกันเพื่อป้องกันช่องโหว่ทั่วไปบนเว็บ (XSS, CSP, คุกกี้, การแยกแหล่งที่มาข้ามโดเมน)
เทคโนโลยีเว็บ
แนวทางปฏิบัติแนะนำสำหรับการใช้ภาษาเว็บหลัก เทคโนโลยี และสภาพแวดล้อมรันไทม์
html
ใช้สถาปัตยกรรม HTML สมัยใหม่, ความหมาย, API แบบอินเทอร์แอกทีฟดั้งเดิม (Dialog, Popover, Details), การจัดการโฟกัส และการจัดลำดับความสำคัญของทรัพยากร
css
ใช้สถาปัตยกรรม CSS สมัยใหม่, เลย์เอาต์ และแนวทางปฏิบัติแนะนำด้านประสิทธิภาพ
css-layout
สร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์โดยใช้ฟีเจอร์ CSS สมัยใหม่ เช่น Flexbox, Grid, Subgrid, Container Queries, Anchor Positioning และ Intrinsic Sizing
forms
สร้างแบบฟอร์มเว็บที่เข้าถึงได้ ปลอดภัย และใช้งานง่าย
passkeys
ใช้ WebAuthn และ Passkeys ในเว็บแอปพลิเคชันตามหลักการสมัยใหม่ที่ครอบคลุม
webmcp
ใช้ WebMCP เพื่อแสดงฟังก์ชันการทำงานของเบราว์เซอร์ฝั่งไคลเอ็นต์เป็นเครื่องมือแบบอินเทอร์แอกทีฟสำหรับ AI Agent
ความสามารถของเบราว์เซอร์ (เลือกใช้)
แนวทางปฏิบัติแนะนำสำหรับการทำงานกับ API และแพลตฟอร์มเบราว์เซอร์เฉพาะ ทักษะเหล่านี้แยกจาก modern-web-guidance และต้องติดตั้งแยกกัน
chrome-extensions
สร้างส่วนขยาย Chrome ที่ปลอดภัยและเป็นไปตามข้อกำหนดภายใต้ Manifest V3 ซึ่งหลีกเลี่ยงข้อผิดพลาดทั่วไปเกี่ยวกับวงจรการทำงานของ Service Worker และการแซนด์บ็อกซ์ รวมถึงเพิ่มความคล่องตัวในการเผยแพร่ไปยัง Chrome เว็บสโตร์ ด้วยความช่วยเหลือในการเตรียมข้อมูลเมตา นโยบายความเป็นส่วนตัว และเหตุผลในการขอสิทธิ์ หากต้องการเลือกใช้ ให้เลือกทักษะ chrome-extensions เมื่อติดตั้งคำแนะนำในการพัฒนาเว็บที่ทันสมัย
npx modern-web-guidance@latest install --choose
ดูทักษะ chrome-extensions บน GitHub
ขั้นตอนถัดไป
เมื่อทำความเข้าใจคำแนะนำในการพัฒนาเว็บที่ทันสมัยแล้ว ก็ได้เวลาลองใช้ด้วยตัวคุณเอง ดูฟีเจอร์และกรณีการใช้งานที่รองรับในคำแนะนำในการพัฒนาเว็บที่ทันสมัย แล้วลองใช้พรอมต์ตัวอย่าง 2-3 รายการเพื่อเริ่มต้นใช้งาน