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

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

Thomas Steiner

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

การรองรับเบราว์เซอร์

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

แหล่งที่มา

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

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

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

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

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

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

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

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

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

ความผิดปกติของหูชั้นในซึ่งเกิดจากการเคลื่อนไหว

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

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

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

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

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

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

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

การใช้ Media Query จากบริบท CSS และ JavaScript

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

ตัวอย่างของทั้ง 2 กรณีคือสมมติว่าฉันมีปุ่มลงชื่อสมัครใช้ที่สําคัญซึ่งฉันต้องการให้ผู้ใช้คลิก เราอาจกำหนดภาพเคลื่อนไหว "สั่น" ที่ดึงดูดความสนใจได้ แต่ในฐานะพลเมืองเว็บที่ดี เราจะแสดงภาพเคลื่อนไหวดังกล่าวต่อผู้ใช้ที่ยอมรับภาพเคลื่อนไหวอย่างชัดเจนเท่านั้น โดยไม่แสดงต่อผู้ใช้รายอื่นๆ ซึ่งอาจเป็นผู้ใช้ที่เลือกไม่ใช้ภาพเคลื่อนไหว หรือผู้ใช้ในเบราว์เซอร์ที่ไม่เข้าใจ 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)');

การใช้คําค้นหาสื่อจากบริบท <picture>

Use Case ที่น่าสนใจคือทำให้การเล่น 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 แต่ตามที่ได้อธิบายไว้ก่อนหน้านี้ ผู้ใช้บางรายอาจไม่ชอบหรืออาจรู้สึกเวียนศีรษะเมื่อดูภาพเคลื่อนไหวนี้ Demo จึงได้รับการตั้งโปรแกรมให้เป็นไปตาม 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 รูปภาพหลักโดย Hannah Cauhepe ใน Unsplash