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

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

โธมัส สไตน์เนอร์

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

การสนับสนุนเบราว์เซอร์

  • 74
  • 79
  • 63
  • 10.1

แหล่งที่มา

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

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

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

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

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

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

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

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

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

สเปกตรัมของเส้นเลือดสั่งการโดยการเคลื่อนไหว

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

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

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

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

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

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

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

การทำงานกับคิวรี่สื่อจากบริบท CSS และ JavaScript

สำหรับคำค้นหาสื่อทั้งหมด คุณจะตรวจสอบ prefers-reduced-motion จากบริบท CSS และบริบท JavaScript ได้

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

/*
  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)');

กำลังทำงานกับคิวรี่สื่อจาก <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 ได้ในบทความ สวัสดี 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 ได้เช่นกันที่รีวิวบทความนี้ รูปภาพหลักโดย Hannah Cauhepe ใน Unsplash