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

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

Thomas Steiner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คำค้นหาสื่อระดับ 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-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 ทำไม่ได้) ดังนั้นอย่าลืมปิดใช้งานเมื่อสังเกตเห็นการหยุดทำงาน

ลิงก์ที่เกี่ยวข้อง

• ร่างข้อกำหนดคำค้นหาสื่อระดับ 5 ของผู้แก้ไขล่าสุด
• prefers-reduced-motion เกี่ยวกับ สถานะแพลตฟอร์ม Chrome
• prefers-reduced-motion ข้อบกพร่อง Chromium
• Blink ความตั้งใจที่จะใช้การโพสต์

กิตติกรรมประกาศ

ขอขอบคุณ Stephen McGruer ที่ใช้งาน prefers-reduced-motion ใน Chrome และได้อ่านบทความนี้ร่วมกับ Rob Dodson ด้วย รูปภาพหลักโดย Hannah Cauhepe ใน Unsplash