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

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

Thomas Steiner

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

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

  • 74
  • 79
  • 63
  • 10.1

แหล่งที่มา

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

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

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

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

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

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

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

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

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

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

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

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

ระบบปฏิบัติการหลายระบบมีการตั้งค่าการช่วยเหลือพิเศษเพื่อระบุค่ากำหนดสำหรับการเคลื่อนไหวที่ลดลงเป็นเวลานาน ภาพหน้าจอด้านล่างแสดงค่ากำหนดลดการเคลื่อนไหวของ 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 ที่เหมาะสมในหน้า CSS ได้เนื่องจากเหตุผลด้านประสิทธิภาพ

ข้อมูลประชากร

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

วิดีโอแสดง แอป prefers-reduced-motion เดโม

บทสรุป

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

กลุ่มการทำงาน 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