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

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

Thomas Steiner

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

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

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

วันที่

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

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

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

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

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

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

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

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

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

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

สาธิต

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

บทสรุป

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

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

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

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

การกล่าวถึง Stephen McGruer จำนวนมากที่ปรับใช้ prefers-reduced-motion ใน Chrome และร่วมกับ Rob Dodson ได้ตรวจสอบเอกสารนี้แล้วด้วย รูปภาพหลักโดย Hannah Cauhepe ใน Unsplash