prefers-reduced-motion ใน CSS และ JS
ตรวจจับและเคารพการตั้งค่าการเคลื่อนไหวของผู้ใช้
prefers-reduced-motion ใน CSS และ JS เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตั้งค่าที่อ่านได้
ระบบปฏิบัติการเปิดให้ผู้ใช้เลือกให้มีการเคลื่อนไหวน้อยลง คุณสมบัติสื่อ prefers-reduced-motion จะเผยการเลือกนี้ให้เว็บไซต์ของคุณทราบโดยตรง 🎚️
ผู้ใช้เปิดการตั้งค่านี้ที่ใด
ผู้ใช้เปิดใช้ ลดการเคลื่อนไหว ในการตั้งค่าระบบปฏิบัติการบน macOS, iOS, Windows และ Android หน้าที่ของคุณคือรับฟัง ไม่ใช่คาดเดาหรือโต้แย้งการเลือกนั้น
สองค่า
คุณสมบัตินี้รายงานสถานะหนึ่งจากสองสถานะ ได้แก่ reduce ซึ่งหมายถึงลดความรุนแรงของภาพเคลื่อนไหว หรือ no-preference สำหรับผู้ใช้อื่น ๆ
สอบถามใน CSS
ห่อสไตล์สำหรับลดความเคลื่อนไหวไว้ในมีเดียคิวรี เมื่อผู้ใช้เลือกให้ลดการเคลื่อนไหว คุณก็สามารถลดการเปลี่ยนผ่านให้เหลือเกือบเป็นศูนย์ได้
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}ลด ไม่ใช่ลบออกเสมอไป
การลดความเคลื่อนไหวไม่ได้หมายความว่าต้องทำให้หน้าค้างอยู่กับที่ ให้เปลี่ยนการเลื่อนขนาดใหญ่เป็นการจางอย่างนุ่มนวล เพื่อให้อินเทอร์เฟซยังดูมีชีวิตชีวาโดยไม่ทำให้ผู้ใช้รู้สึกสะดุด
ออกแบบโดยเริ่มจากเปิดภาพเคลื่อนไหว
สร้างสไตล์ภาพเคลื่อนไหวตามปกติก่อน แล้วจึงเพิ่มคิวรีเพื่อลดระดับลง แนวทางแบบค่อยเป็นค่อยไปนี้ช่วยให้ประสบการณ์เริ่มต้นมีรายละเอียดครบถ้วน
อ่านค่าใน JavaScript
สำหรับภาพเคลื่อนไหวที่ควบคุมด้วยสคริปต์ ให้สอบถามเบราว์เซอร์โดยตรง matchMedia จะคืนค่าว่าขณะนี้ผู้ใช้ต้องการลดการเคลื่อนไหวหรือไม่
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }ตอบสนองต่อการเปลี่ยนแปลงแบบสด
ผู้ใช้สามารถสลับการตั้งค่าในระหว่างเซสชันได้ ให้รับฟังการเปลี่ยนแปลง เพื่อให้ภาพเคลื่อนไหวของ JavaScript เคารพการตั้งค่าใหม่โดยไม่ต้องโหลดหน้าใหม่
mq.addEventListener('change', e => updateMotion(e.matches));ครอบคลุมพฤติกรรมการเลื่อน
การเลื่อนอย่างนุ่มนวลก็นับเป็นการเคลื่อนไหวเช่นกัน ภายในคิวรี ให้ตั้งค่า scroll-behavior เป็น auto เพื่อให้การกระโดดไปยังตำแหน่งต่าง ๆ เกิดขึ้นทันทีสำหรับผู้ที่เลือกเช่นนั้น
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}นี่คือความต้องการที่แท้จริง
นี่ไม่ใช่การตั้งค่าที่มีไว้ก็ดีแต่ไม่มีก็ได้ สำหรับผู้ใช้บางคน การเคลื่อนไหวขนาดใหญ่อาจทำให้เกิดอาการคลื่นไส้หรือเวียนศีรษะได้จริง ดังนั้นการเคารพคำขอนี้จึงสำคัญ
ปิดไว้เป็นค่าเริ่มต้นปลอดภัยที่สุด
เมื่อไม่แน่ใจ ให้ถือว่าแนวทางที่ปลอดภัยที่สุดเป็นค่าเริ่มต้น การเลือกใช้การเคลื่อนไหวแบบสงบจะไม่ทำร้ายใคร และช่วยให้ทุกคนใช้หน้าเว็บได้อย่างสบาย
ตรวจสอบความเข้าใจ
เว็บไซต์จะทราบได้อย่างไรว่าผู้ใช้ต้องการลดการเคลื่อนไหว
ทบทวน
อ่านค่า prefers-reduced-motion ใน CSS หรือใช้ matchMedia จากนั้นลดความรุนแรงของภาพเคลื่อนไหวแทนการทำให้ทั้งหน้าหยุดนิ่ง และอย่าลืมรองรับการเปลี่ยนการตั้งค่าแบบสดด้วย ✅
คำถามที่พบบ่อย
บทเรียน “prefers-reduced-motion ใน CSS และ JS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “prefers-reduced-motion ใน CSS และ JS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “prefers-reduced-motion ใน CSS และ JS”
ตรวจจับและเคารพการตั้งค่าการเคลื่อนไหวของผู้ใช้ คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “prefers-reduced-motion ใน CSS และ JS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- prefers-reduced-motion ใน CSS และ JS
- ความผิดปกติของระบบทรงตัวและความเสี่ยงจากพารัลแลกซ์
- เกณฑ์การกะพริบสามครั้งสำหรับอาการชัก
- หยุดชั่วคราว หยุด และซ่อนเนื้อหาที่เคลื่อนที่อัตโนมัติ