ต้องการการเคลื่อนไหวที่ลดลง: บางครั้งการเคลื่อนไหวน้อยก็มากกว่า

Media Query prefers-reduced-motion จะตรวจหาว่าผู้ใช้ได้ขอให้ระบบปฏิบัติการลดปริมาณภาพเคลื่อนไหวหรือการเคลื่อนไหวที่ใช้หรือไม่

Thomas Steiner

ไม่ใช่ทุกคนที่จะชอบภาพเคลื่อนไหวหรือทรานซิชันที่ตกแต่ง และผู้ใช้บางรายอาจมีอาการเมารถเมื่อเจอการเลื่อนแบบพารัลแลกซ์ เอฟเฟกต์การซูม และอื่นๆ สื่อการตั้งค่าของผู้ใช้ คำค้นหา prefers-reduced-motion ช่วยให้คุณออกแบบเว็บไซต์เวอร์ชันที่มีการเคลื่อนไหวน้อยลงสำหรับผู้ใช้ที่ แสดงความต้องการนี้

Browser Support

  • Chrome: 74.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 10.1.

Source

การเคลื่อนไหวมากเกินไปในชีวิตจริงและบนเว็บ

เมื่อวันก่อนฉันไปเล่นสเก็ตน้ำแข็งกับลูกๆ วันนั้นเป็นวันที่ดี แดดออก และลานน้ำแข็งก็เต็มไปด้วยผู้คน ⛸ แต่ปัญหาเดียวคือฉันไม่ชอบที่ที่มีคนเยอะ ด้วยเป้าหมายที่เคลื่อนไหวอยู่ตลอดเวลามากมาย ทำให้ฉันไม่สามารถโฟกัสอะไรได้เลย และสุดท้ายก็รู้สึกสับสนและเหมือนกับว่า ภาพที่เห็นนั้นมากเกินไปจนรับไม่ไหว เหมือนกับการจ้องมองรังมด 🐜

ฝูงเท้าของผู้คนเล่นสเกตน้ำแข็ง
ภาพที่มากเกินไปในชีวิตจริง

บางครั้งก็อาจเกิดเหตุการณ์คล้ายกันบนเว็บได้เช่นกัน ไม่ว่าจะเป็นโฆษณาที่กะพริบ เอฟเฟกต์พารัลแลกซ์สุดเก๋ ภาพเคลื่อนไหวที่เปิดเผยอย่างน่าประหลาดใจ วิดีโอที่เล่นอัตโนมัติ และอื่นๆ บางครั้งเว็บก็อาจทำให้รู้สึกท่วมท้นได้ แต่โชคดีที่บนเว็บมีวิธีแก้ปัญหานี้ Media Query ของ CSS prefers-reduced-motion ช่วยให้นักพัฒนาแอปสร้างหน้าเว็บเวอร์ชันต่างๆ สำหรับผู้ใช้ที่ต้องการ การเคลื่อนไหวที่ลดลง ซึ่งอาจรวมถึงการงดใช้วิดีโอเล่นอัตโนมัติ การปิดใช้เอฟเฟกต์บางอย่างที่ใช้เพื่อการตกแต่งโดยเฉพาะ ไปจนถึงการออกแบบหน้าเว็บใหม่ทั้งหมดสำหรับผู้ใช้บางราย

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

ภาพเคลื่อนไหวบนเว็บ

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

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

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

ความผิดปกติของระบบประสาททรงตัวที่เกิดจากการเคลื่อนไหว

ผู้ใช้บางรายอาจรู้สึกวอกแวกหรือคลื่นไส้จากเนื้อหาที่มีภาพเคลื่อนไหว ตัวอย่างเช่น ภาพเคลื่อนไหวของการเลื่อนอาจทำให้เกิดความผิดปกติของระบบการทรงตัวเมื่อองค์ประกอบอื่นๆ นอกเหนือจากองค์ประกอบหลัก ที่เชื่อมโยงกับการเลื่อนเคลื่อนที่ไปมามาก ตัวอย่างเช่น ภาพเคลื่อนไหวแบบเลื่อนพารัลแลกซ์ อาจทำให้เกิดความผิดปกติของระบบการทรงตัวเนื่องจากองค์ประกอบพื้นหลังเคลื่อนไหวในอัตราที่แตกต่างจากองค์ประกอบ พื้นหน้า อาการที่เกิดจากความผิดปกติของระบบการทรงตัว (หูชั้นใน) ได้แก่ เวียนศีรษะ คลื่นไส้ และปวดศีรษะไมเกรน และบางครั้งอาจต้องนอนพักเพื่อฟื้นตัว

นำการเคลื่อนไหวในระบบปฏิบัติการออก

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

หน้าจอการตั้งค่า macOS ที่เลือกช่องทำเครื่องหมาย "ลดการเคลื่อนไหว"
หน้าจอการตั้งค่า Android ที่มีช่องทำเครื่องหมาย "นำภาพเคลื่อนไหวออก" เลือกอยู่

นำการเคลื่อนไหวบนเว็บออก

Media Queries ระดับ 5 นำค่ากำหนดของผู้ใช้ที่ต้องการลดการเคลื่อนไหว มายังเว็บด้วย Media Query ช่วยให้ผู้เขียนทดสอบและค้นหาค่าหรือฟีเจอร์ ของ User Agent หรืออุปกรณ์แสดงผลได้โดยไม่ขึ้นอยู่กับเอกสารที่แสดง ใช้ Media Query prefers-reduced-motion เพื่อตรวจหาว่าผู้ใช้ได้ตั้งค่าระบบปฏิบัติการให้ลดจำนวนภาพเคลื่อนไหวหรือ การเคลื่อนไหวที่ใช้หรือไม่ โดยอาจมีค่าที่เป็นไปได้ 2 ค่า ดังนี้

  • no-preference: บ่งบอกว่าผู้ใช้ไม่ได้ตั้งค่ากำหนดใดๆ ในระบบปฏิบัติการพื้นฐาน ค่าคีย์เวิร์ดนี้จะประเมินเป็น false ในบริบทบูลีน
  • reduce: ระบุว่าผู้ใช้ได้ตั้งค่ากำหนดของระบบปฏิบัติการที่ระบุว่าอินเทอร์เฟซควรลดการเคลื่อนไหวหรือภาพเคลื่อนไหว โดยควรลดจนถึงจุดที่นำการเคลื่อนไหวที่ไม่จำเป็นทั้งหมดออก

การทำงานกับ Media Query จากบริบท CSS และ JavaScript

เช่นเดียวกับ Media Query ทั้งหมด คุณสามารถตรวจสอบ prefers-reduced-motion ได้จากบริบท CSS และจากบริบท JavaScript

เพื่อแสดงให้เห็นทั้ง 2 อย่าง สมมติว่าฉันมีปุ่มลงชื่อสมัครใช้ที่สำคัญซึ่งฉันต้องการให้ผู้ใช้คลิก I สามารถกำหนดภาพเคลื่อนไหว "สั่น" ที่ดึงดูดความสนใจได้ แต่ในฐานะพลเมืองเว็บที่ดี ฉันจะเล่น ภาพเคลื่อนไหวนี้เฉพาะผู้ใช้ที่ตกลงอย่างชัดเจนที่จะดูภาพเคลื่อนไหวเท่านั้น แต่จะไม่เล่นให้ผู้ใช้รายอื่นๆ ซึ่งอาจเป็นผู้ใช้ ที่เลือกไม่ใช้ภาพเคลื่อนไหว หรือผู้ใช้ในเบราว์เซอร์ที่ไม่เข้าใจ Media Query

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

เพื่อแสดงให้เห็นวิธีทำงานกับ prefers-reduced-motion ด้วย JavaScript ลองนึกภาพว่าฉันได้กำหนดภาพเคลื่อนไหวที่ซับซ้อนด้วย Web Animations API แม้ว่ากฎ CSS จะทริกเกอร์โดยเบราว์เซอร์แบบไดนามิกเมื่อค่ากำหนดของผู้ใช้เปลี่ยนแปลง แต่สำหรับภาพเคลื่อนไหว JavaScript ฉันต้องคอยฟังการเปลี่ยนแปลงด้วยตัวเอง จากนั้นจึงหยุดภาพเคลื่อนไหวที่อาจกำลังทำงานอยู่ด้วยตนเอง (หรือรีสตาร์ทหากผู้ใช้ยินยอม)

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

โปรดทราบว่าต้องมีวงเล็บรอบคิวรี่สื่อจริง

ไม่ควรทำ
window.matchMedia('prefers-reduced-motion: reduce');
ควรทำ
window.matchMedia('(prefers-reduced-motion: reduce)');

การทำงานกับ Media Query จากบริบท <picture>

กรณีการใช้งานที่น่าสนใจคือการทำให้การเล่น AVIF, WebP หรือ GIF แบบเคลื่อนไหวขึ้นอยู่กับแอตทริบิวต์ media หาก (prefers-reduced-motion: no-preference) ประเมินเป็น true คุณจะแสดงเวอร์ชันเคลื่อนไหวหรือเวอร์ชันคงที่ก็ได้

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

คุณดูตัวอย่างต่อไปนี้ได้ ลองเปิด/ปิดค่ากำหนดการเคลื่อนไหวของอุปกรณ์เพื่อดูความแตกต่าง

แมวนิอานที่มีชื่อเสียง

ค้นพบค่ากำหนดของผู้ใช้ในเวลาที่ส่งคำขอ

ส่วนหัวของคำแนะนำไคลเอ็นต์ Sec-CH-Prefers-Reduced-Motion ช่วยให้เว็บไซต์ได้รับค่ากำหนดการเคลื่อนไหวของผู้ใช้โดยไม่บังคับในเวลาที่ส่งคำขอ เพื่อให้เซิร์ฟเวอร์สามารถแทรก CSS ที่เหมาะสมด้วยเหตุผลด้านประสิทธิภาพ

สาธิต

ฉันได้สร้างการสาธิตเล็กๆ น้อยๆ โดยอิงจาก🐈 แมวรหัสสถานะ HTTP ที่ยอดเยี่ยมของ Rogério Vicente ก่อนอื่น โปรดใช้เวลาสักครู่เพื่อขำกับมุกตลกนี้ เพราะมันตลกมาก และเราจะรอ ตอนนี้คุณกลับมาแล้ว เรามาเริ่มการสาธิตกันเลย เมื่อคุณเลื่อนหน้าเว็บ แมวสถานะ HTTP แต่ละตัวจะปรากฏสลับกันจากด้านขวาหรือด้านซ้าย ภาพเคลื่อนไหว 60 FPS ที่ราบรื่น แต่ดังที่กล่าวไว้ก่อนหน้านี้ ผู้ใช้บางรายอาจไม่ชอบหรืออาจถึงขั้นเมารถจากภาพเคลื่อนไหวนี้ ดังนั้นเราจึงตั้งโปรแกรมเดโมให้เป็นไปตามprefers-reduced-motion ฟีเจอร์นี้ทำงานแบบไดนามิก ผู้ใช้จึงเปลี่ยนค่ากำหนดได้ทันทีโดยไม่ต้องโหลดซ้ำ หากผู้ใช้ต้องการลดการเคลื่อนไหว ระบบจะนำภาพเคลื่อนไหวการแสดงที่ไม่จำเป็นออก และเหลือไว้เพียงการเลื่อนปกติ Screencast ต่อไปนี้แสดงการสาธิตการทำงาน

วิดีโอ prefers-reduced-motionสาธิต แอป

บทสรุป

การเคารพค่ากําหนดของผู้ใช้เป็นสิ่งสําคัญสําหรับเว็บไซต์สมัยใหม่ และเบราว์เซอร์ก็เปิดเผยฟีเจอร์ต่างๆ มากขึ้นเรื่อยๆ เพื่อช่วยให้นักพัฒนาเว็บทําเช่นนั้นได้ อีกตัวอย่างหนึ่งที่เปิดตัวคือ prefers-color-scheme ซึ่งจะตรวจหาว่าผู้ใช้ต้องการใช้โทนสีสว่างหรือมืด คุณอ่านทุกอย่างเกี่ยวกับ prefers-color-scheme ได้ในบทความ Hello Darkness, My Old Friend 🌒

คณะทำงาน CSS กำลังกำหนดมาตรฐานการค้นหาสื่อตามค่ากำหนดของผู้ใช้เพิ่มเติม เช่น prefers-reduced-transparency (ตรวจหาว่าผู้ใช้ต้องการลดความโปร่งใสหรือไม่) prefers-contrast (ตรวจหาว่าผู้ใช้ ขอให้ระบบเพิ่มหรือลดระดับคอนทราสต์ระหว่างสีที่อยู่ติดกันหรือไม่) และ inverted-colors (ตรวจหาว่าผู้ใช้ ต้องการใช้สีที่กลับด้านหรือไม่)

(โบนัส) บังคับใช้การเคลื่อนไหวลดลงในทุกเว็บไซต์

บางเว็บไซต์อาจไม่ได้ใช้ prefers-reduced-motion หรืออาจใช้ไม่มากพอตามที่คุณต้องการ หากต้องการหยุดการเคลื่อนไหวในเว็บไซต์ทั้งหมดไม่ว่าจะด้วยเหตุผลใดก็ตาม คุณก็ทำได้ วิธีหนึ่งในการดำเนินการนี้คือการแทรกสไตล์ชีตที่มี CSS ต่อไปนี้ลงในทุกหน้าเว็บที่คุณเข้าชม มีส่วนขยายเบราว์เซอร์ หลายรายการ ที่อนุญาตให้ทำเช่นนี้ได้ (คุณใช้งานได้โดยต้องยอมรับความเสี่ยงที่อาจเกิดขึ้น)

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

โดยวิธีนี้จะทำให้ CSS ก่อนหน้าลบล้างระยะเวลาของภาพเคลื่อนไหวและการเปลี่ยนทั้งหมด ให้สั้นลงจนสังเกตไม่ได้อีกต่อไป เนื่องจากบางเว็บไซต์ต้องใช้ภาพเคลื่อนไหว เพื่อให้ทำงานได้อย่างถูกต้อง (อาจเป็นเพราะขั้นตอนหนึ่งๆ ขึ้นอยู่กับการทริกเกอร์เหตุการณ์ animationend) แนวทาง animation: none !important; ที่รุนแรงกว่าจึงใช้ไม่ได้ แม้แต่การแฮ็กก่อนหน้านี้ก็ไม่รับประกันว่าจะสำเร็จในเว็บไซต์ทั้งหมด (เช่น หยุดการเคลื่อนไหวที่เริ่มต้นโดยใช้ Web Animations API ไม่ได้) ดังนั้นโปรดปิดใช้งานเมื่อพบว่าเกิดข้อผิดพลาด

แหล่งข้อมูล

การรับทราบ

ขอขอบคุณ Stephen McGruer ที่ได้ติดตั้งใช้งาน prefers-reduced-motion ใน Chrome และได้ตรวจสอบเอกสารนี้ร่วมกับ Rob Dodson