ưu tiên-chuyển động giảm: Đôi khi ít chuyển động lại nhiều hơn

Truy vấn nội dung nghe nhìn prefers-reduced-motion phát hiện xem người dùng có yêu cầu hệ điều hành giảm thiểu lượng ảnh động hoặc chuyển động mà hệ điều hành sử dụng hay không.

Thomas Steiner

Không phải ai cũng thích ảnh động hoặc hiệu ứng chuyển đổi trang trí, và một số người dùng thậm chí còn bị say xe khi gặp phải hiệu ứng cuộn thị sai, hiệu ứng thu phóng, v.v. Truy vấn nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng prefers-reduced-motion cho phép bạn thiết kế một biến thể giảm chuyển động của trang web cho những người dùng đã bày tỏ lựa chọn ưu tiên này.

Chuyển động quá nhiều trong đời thực và trên web

Hôm nọ, tôi đi trượt băng với các con. Hôm đó là một ngày đẹp trời, mặt trời chiếu sáng và sân trượt băng chật ních người ⛸. Vấn đề duy nhất là tôi không thích đám đông. Với quá nhiều mục tiêu di chuyển, tôi không thể tập trung vào bất cứ điều gì và cuối cùng bị lạc lối với cảm giác quá tải thị giác hoàn toàn, gần giống như đang nhìn chằm chằm vào một tổ kiến 🐜.

Đôi khi, điều tương tự cũng có thể xảy ra trên web: với quảng cáo nhấp nháy, hiệu ứng thị sai bắt mắt, ảnh động hé lộ bất ngờ, video tự động phát, v.v., đôi khi web có thể khá choáng ngợp… Thật may là không giống như ngoài đời thực, có một giải pháp cho vấn đề này. Truy vấn nội dung nghe nhìn CSS prefers-reduced-motion cho phép nhà phát triển tạo một biến thể của trang cho những người dùng thích chuyển động giảm. Điều này có thể bao gồm mọi thứ, từ việc hạn chế video tự động phát đến việc tắt một số hiệu ứng thuần tuý mang tính trang trí, cho đến việc thiết kế lại hoàn toàn một trang cho một số người dùng.

Trước khi đi sâu vào tính năng này, hãy cùng tôi lùi lại một bước và suy nghĩ xem ảnh động được dùng để làm gì trên web. Nếu muốn, bạn cũng có thể bỏ qua thông tin cơ bản và chuyển ngay đến thông tin chi tiết về kỹ thuật.

Ảnh động trên web

Ảnh động thường được dùng để cung cấp phản hồi cho người dùng, ví dụ: cho họ biết rằng một hành động đã được nhận và đang được xử lý. Ví dụ: trên một trang web mua sắm, một sản phẩm có thể được tạo hiệu ứng động để "bay" vào giỏ hàng ảo, được mô tả dưới dạng một biểu tượng ở góc trên cùng bên phải của trang web.

Một trường hợp sử dụng khác liên quan đến việc sử dụng chuyển động để đánh lừa nhận thức của người dùng bằng cách sử dụng kết hợp màn hình bộ khung, siêu dữ liệu theo bối cảnh và bản xem trước hình ảnh chất lượng thấp để chiếm nhiều thời gian của người dùng và khiến toàn bộ trải nghiệm có vẻ nhanh hơn. Ý tưởng là cung cấp ngữ cảnh cho người dùng về những gì sắp diễn ra và đồng thời tải mọi thứ nhanh nhất có thể.

Cuối cùng, có các hiệu ứng trang trí như hiệu ứng chuyển màu động, hiệu ứng cuộn thị sai, video nền và một số hiệu ứng khác. Mặc dù nhiều người dùng thích những ảnh động như vậy, nhưng một số người dùng lại không thích vì họ cảm thấy bị phân tâm hoặc tốc độ bị chậm đi. Trong trường hợp xấu nhất, người dùng thậm chí có thể bị say xe như thể đó là trải nghiệm trong đời thực. Vì vậy, đối với những người dùng này, việc giảm hiệu ứng động là một nhu cầu y tế.

Rối loạn tiền đình do chuyển động

Một số người dùng cảm thấy mất tập trung hoặc buồn nôn khi xem nội dung động. Ví dụ: ảnh động cuộn có thể gây ra rối loạn tiền đình khi các phần tử khác ngoài phần tử chính được liên kết với thao tác cuộn di chuyển quá nhiều. Ví dụ: ảnh động cuộn thị sai có thể gây ra rối loạn tiền đình vì các phần tử nền di chuyển với tốc độ khác với các phần tử nền trước. Các phản ứng do rối loạn tiền đình (tai trong) bao gồm chóng mặt, buồn nôn và đau nửa đầu, đôi khi cần phải nghỉ ngơi tại giường để hồi phục.

Xoá chuyển động trên hệ điều hành

Từ lâu, nhiều hệ điều hành đã có chế độ cài đặt hỗ trợ tiếp cận để chỉ định lựa chọn ưu tiên cho chế độ giảm chuyển động. Các ảnh chụp màn hình sau đây cho thấy lựa chọn ưu tiên Giảm chuyển động của macOS Mojave và lựa chọn ưu tiên Xoá ảnh động của Android Pie. Khi được đánh dấu, những lựa chọn ưu tiên này khiến hệ điều hành không sử dụng các hiệu ứng trang trí như ảnh động khi khởi chạy ứng dụng. Bản thân các ứng dụng cũng có thể và nên tuân thủ chế độ cài đặt này, đồng thời xoá tất cả ảnh động không cần thiết.

Xoá hiệu ứng chuyển động trên web

Media Queries Level 5 cũng mang lựa chọn ưu tiên của người dùng về chế độ chuyển động giảm đến web. Truy vấn nội dung nghe nhìn cho phép tác giả kiểm thử và truy vấn các giá trị hoặc tính năng của tác nhân người dùng hoặc thiết bị hiển thị độc lập với tài liệu đang được kết xuất. Truy vấn nội dung nghe nhìn prefers-reduced-motion được dùng để phát hiện xem người dùng đã đặt lựa chọn ưu tiên của hệ điều hành để giảm thiểu lượng ảnh động hoặc chuyển động mà hệ điều hành sử dụng hay chưa. Thuộc tính này có thể có 2 giá trị:

• no-preference: Cho biết rằng người dùng không có lựa chọn ưu tiên nào trong hệ điều hành cơ bản. Giá trị từ khoá này được đánh giá là false trong ngữ cảnh boolean.
• reduce: Cho biết người dùng đã đặt một lựa chọn ưu tiên về hệ điều hành, cho biết rằng các giao diện nên giảm thiểu chuyển động hoặc ảnh động, tốt nhất là đến mức loại bỏ mọi chuyển động không cần thiết.

Làm việc với truy vấn nội dung nghe nhìn trong ngữ cảnh CSS và JavaScript

Tương tự như tất cả các truy vấn nội dung nghe nhìn, bạn có thể kiểm tra prefers-reduced-motion từ ngữ cảnh CSS và từ ngữ cảnh JavaScript.

Để minh hoạ cả hai, giả sử tôi có một nút đăng ký quan trọng mà tôi muốn người dùng nhấp vào. Tôi có thể xác định một ảnh động "rung" thu hút sự chú ý, nhưng là một công dân mạng có trách nhiệm, tôi sẽ chỉ phát ảnh động này cho những người dùng đồng ý rõ ràng với ảnh động, chứ không phải cho những người dùng khác. Đó có thể là những người dùng đã chọn không sử dụng ảnh động hoặc những người dùng sử dụng trình duyệt không hiểu truy vấn về phương tiện.

/*
  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;
  }
}

Để minh hoạ cách hoạt động với prefers-reduced-motion bằng JavaScript, hãy tưởng tượng rằng tôi đã xác định một ảnh động phức tạp bằng Web Animations API. Mặc dù các quy tắc CSS sẽ được trình duyệt kích hoạt linh hoạt khi lựa chọn ưu tiên của người dùng thay đổi, nhưng đối với các ảnh động JavaScript, tôi phải tự theo dõi các thay đổi, sau đó dừng thủ công các ảnh động có thể đang diễn ra (hoặc khởi động lại nếu người dùng cho phép tôi):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Xin lưu ý rằng bạn bắt buộc phải đặt dấu ngoặc đơn xung quanh truy vấn phương tiện thực tế:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Xử lý truy vấn nội dung nghe nhìn từ các ngữ cảnh <picture>

Một trường hợp sử dụng thú vị là tạo hiệu ứng phát cho ảnh động AVIF, WebP hoặc GIF tuỳ thuộc vào thuộc tính media. Nếu (prefers-reduced-motion: no-preference) đánh giá thành true, thì bạn có thể hiển thị phiên bản động, nếu không thì hiển thị phiên bản tĩnh:

<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>

Bạn có thể xem ví dụ sau. Hãy thử bật/tắt chế độ cài đặt chuyển động của thiết bị để xem sự khác biệt.

Khám phá các lựa chọn ưu tiên của người dùng tại thời điểm yêu cầu

Tiêu đề gợi ý cho ứng dụng Sec-CH-Prefers-Reduced-Motion cho phép các trang web tuỳ ý lấy lựa chọn ưu tiên của người dùng về chuyển động tại thời điểm yêu cầu, cho phép các máy chủ nội tuyến CSS phù hợp vì lý do hiệu suất.

Bản minh hoạ

Tôi đã tạo một bản minh hoạ nhỏ dựa trên 🐈 mã trạng thái HTTP của mèo tuyệt vời của Rogério Vicente. Trước tiên, hãy dành chút thời gian để thưởng thức câu chuyện cười này. Câu chuyện này rất hài hước và tôi sẽ đợi. Giờ bạn đã quay lại, hãy để tôi giới thiệu bản minh hoạ. Khi bạn di chuyển, mỗi chú mèo trạng thái HTTP sẽ lần lượt xuất hiện ở bên phải hoặc bên trái. Đây là một ảnh động mượt mà ở tốc độ 60 khung hình/giây, nhưng như đã nêu trước đó, một số người dùng có thể không thích hoặc thậm chí bị say chuyển động do ảnh động này. Vì vậy, bản minh hoạ được lập trình để tuân thủ prefers-reduced-motion. Thậm chí, tính năng này còn hoạt động linh động, nên người dùng có thể thay đổi lựa chọn ưu tiên ngay lập tức mà không cần tải lại. Nếu người dùng muốn giảm chuyển động, các hiệu ứng động không cần thiết sẽ biến mất và chỉ còn lại hiệu ứng chuyển động cuộn thông thường. Đoạn video sau đây cho thấy bản minh hoạ đang hoạt động:

Kết luận

Việc tôn trọng lựa chọn ưu tiên của người dùng là yếu tố then chốt đối với các trang web hiện đại và trình duyệt đang cung cấp ngày càng nhiều tính năng để cho phép nhà phát triển web làm như vậy. Một ví dụ khác đã ra mắt là prefers-color-scheme, tính năng này phát hiện xem người dùng có thích bảng phối màu sáng hay tối hay không. Bạn có thể đọc mọi thứ về prefers-color-scheme trong bài viết Hello Darkness, My Old Friend 🌒 của tôi.

Nhóm công tác CSS đang chuẩn hoá thêm các truy vấn về phương tiện theo lựa chọn ưu tiên của người dùng, chẳng hạn như prefers-reduced-transparency (phát hiện xem người dùng có muốn giảm độ trong suốt hay không), prefers-contrast (phát hiện xem người dùng có yêu cầu hệ thống tăng hoặc giảm mức độ tương phản giữa các màu liền kề hay không) và inverted-colors (phát hiện xem người dùng có muốn đảo ngược màu hay không).

(Tuỳ chọn) Buộc giảm chuyển động trên tất cả các trang web

Không phải trang web nào cũng sử dụng prefers-reduced-motion, hoặc có thể không đủ đáng kể theo ý bạn. Nếu muốn dừng chuyển động trên tất cả các trang web vì bất kỳ lý do gì, bạn có thể làm như vậy. Một cách để thực hiện việc này là chèn một biểu định kiểu có CSS sau đây vào mọi trang web bạn truy cập. Có một số tiện ích cho trình duyệt (hãy tự cân nhắc rủi ro khi dùng!) cho phép bạn làm việc này.

@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;
  }
}

Cách hoạt động của CSS này là ghi đè thời lượng của tất cả các hiệu ứng và chuyển đổi thành một khoảng thời gian ngắn đến mức không còn đáng chú ý nữa. Vì một số trang web phụ thuộc vào một ảnh động để chạy nhằm hoạt động chính xác (có thể vì một bước nhất định phụ thuộc vào việc kích hoạt sự kiện animationend), nên phương pháp animation: none !important; triệt để hơn sẽ không hoạt động. Ngay cả giải pháp trước đây cũng không đảm bảo thành công trên tất cả các trang web (ví dụ: giải pháp này không thể dừng chuyển động được bắt đầu bằng Web Animations API), vì vậy, hãy nhớ tắt giải pháp này khi bạn nhận thấy có sự cố.

Tài nguyên

• Bản nháp mới nhất của Editor về quy cách Media Queries Level 5.
• prefers-reduced-motion trên Trạng thái của nền tảng Chrome.
• prefers-reduced-motion Lỗi Chromium.
• Blink Bài đăng về ý định triển khai.

Lời cảm ơn

Xin chân thành cảm ơn Stephen McGruer, người đã triển khai prefers-reduced-motion trong Chrome và cùng với Rob Dodson, cũng đã xem xét tài liệu này.