Trang này được dịch bởi Cloud Translation API.

ư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 đa phương tiện prefers-reduced-motion phát hiện xem người dùng đã yêu cầu hay chư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.

Thomas Steiner

Không phải ai cũng thích hoạt ảnh hoặc hiệu ứng chuyển cảnh trang trí, và một số người dùng trải nghiệm chuyển động hoàn toàn chán ngấy khi phải đối mặt với hiệu ứng cuộn thị sai, hiệu ứng thu phóng và nhiều tính năng khác. Nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng cụm từ tìm kiếm prefers-reduced-motion cho phép bạn thiết kế biến thể giảm chuyển động của trang web cho những người dùng đã thể hiện lựa chọn ưu tiên này.

Hỗ trợ trình duyệt

Nguồn

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

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

Đám đông người trượt băng. — Hình ảnh quá tải trong đời thực.

Đô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, hiển thị hoạt ảnh, tự động phát video và nhiều tính năng khác, đôi khi web có thể gây quá tải... Thật may là không giống như ngoài đời thực, vẫn có một giải pháp cho vấn đề này. Truy vấn phương tiệ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 việc hạn chế phát video tự động phát cho tắt một số hiệu ứng trang trí đơn thuần, đến thiết kế lại hoàn toàn một trang cho người dùng nhất định.

Trước khi tìm hiểu sâu hơn về tính năng này, hãy để tôi nhìn lại một bước và nghĩ xem ảnh động được sử dụng cho mục đích gì trên web. Nếu muốn, bạn cũng có thể bỏ qua thông tin cơ bản và đi thẳng vào phần chi tiết 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, chẳng hạn như để cho họ biết rằng đã nhận được hành động và đang được xử lý. Ví dụ: trên một trang web mua sắm, sản phẩm có thể được tạo ảnh động thành "bay" vào giỏ hàng ảo, được mô tả dưới dạng 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 để xâm nhập nhận thức của người dùng bằng cách sử dụng kết hợp các màn hình khung xương, siêu dữ liệu theo ngữ cảnh và bản xem trước hình ảnh chất lượng thấp để chiếm rất nhiều thời gian của người dùng và giúp toàn bộ trải nghiệm trở nên nhanh hơn. Ý tưởng là đưa ra bối cảnh cho người dùng về những thứ sắp tới và trong khi đó tải nội dung nhanh nhất có thể.

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

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

Trải nghiệm của một số người dùng sự mất tập trung hoặc buồn nôn khỏi nội dung hoạt hình. Ví dụ: hoạt ảnh cuộn có thể gây rối loạn tiền đình khi các phần tử không phải là phần tử chính liên quan đến việc di chuyển xung quanh. Ví dụ: ảnh động cuộn bằng thị sai có thể gây rối loạn tiền đình vì các thành phần ở hậu cảnh di chuyển với tốc độ khác với tiền cảnh phần tử. Các phản ứng 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 đau đầu và đôi khi cần nghỉ ngơi tại giường để hồi phục.

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

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 về chuyển động trong một thời gian dài. 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à Tuỳ chọn Xoá hiệu ứng động của Android Pie. Khi được chọn, các tuỳ chọn này sẽ khiến các hoạt động hệ thống không sử dụng các hiệu ứng trang trí như ứng dụng khởi chạy ảnh động. Bản thân các ứng dụng có thể và cũng sẽ tuân theo cài đặt này và xoá tất cả các hoạt ảnh không cần thiết.

Màn hình chế độ cài đặt của macOS có dòng chữ "Reduce motion" (Giảm chuyển động) đã đánh dấu vào hộp kiểm.

Màn hình cài đặt Android với tuỳ chọn "Xoá hiệu ứng động" đã đánh dấu vào hộp kiểm.

Xoá chuyển động trên web

Truy vấn nội dung đa phương tiện cấp 5 giúp giảm chuyển động tùy chọn của người dùng lên web. Truy vấn về nội dung nghe nhìn cho phép tác giả kiểm tra 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 được hiển thị. Truy vấn đa phương tiện Hàm prefers-reduced-motion được sử dụng để phát hiện xem người dùng có đặt lựa chọn ưu tiên về hệ điều hành hay không để giảm thiểu lượng ảnh động hoặc chuyển động mà nó sử dụng. Hàm này có thể nhận hai giá trị sau:

no-preference: Cho biết rằng người dùng không đặt lựa chọn ưu tiên nào trong hệ điều hành cơ bản hệ thống. Giá trị từ khoá này được đánh giá là false trong ngữ cảnh boolean.
reduce: Cho biết rằng 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 phải giảm thiểu chuyển động hoặc ảnh động, tốt nhất là ở điểm mà mọi thao tác không cần thiết chuyển động bị xoá.

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

Giống như tất cả các truy vấn đa phương tiện, bạn có thể kiểm tra prefers-reduced-motion từ ngữ cảnh CSS và từ một Ngữ cảnh JavaScript.

Để minh hoạ cả hai điều này, 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. N có thể xác định nội dung "rung" thu hút sự chú ý hoạt hình, nhưng là một công dân web tốt, tôi sẽ chỉ chơi nó cho những người dùng rõ ràng chấp nhận hoạt ảnh, nhưng không phải những người khác, vốn có thể là người dùng đã chọn không sử dụng ảnh động hoặc người dùng trên trình duyệt không hiểu được truy vấn nội dung nghe nhì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;
  }
}

Lưu ý: Nếu bạn có nhiều CSS liên quan đến ảnh động, bạn có thể để người dùng đã chọn không tải xuống không phải là người dùng đã chọn không tải xuống bằng cách thuê tất cả CSS liên quan đến ảnh động vào một biểu định kiểu riêng mà bạn chỉ tải có điều kiện bằng cách sử dụng thuộc tính media trên phần tử link 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

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

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

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

Không nên

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

Nên

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

Làm việc với truy vấn nội dung nghe nhìn từ ngữ cảnh `<picture>`

Một trường hợp sử dụng thú vị là phát tệp AVIF, WebP hoặc GIF động tuỳ thuộc vào Thuộc tính media. Nếu (prefers-reduced-motion: no-preference) có kết quả là true, thì có thể an toàn hiển thị phiên bản động, nếu không 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 đây. Hãy thử thay đổi lựa chọn ưu tiên về chuyển động của thiết bị để xem sự khác biệt.

Chú mèo Nyan nổi tiếng.

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

Tiêu đề gợi ý ứng dụng Sec-CH-Prefers-Reduced-Motion cho phép các trang web lấy lựa chọn ưu tiên về chuyển động của người dùng tại thời điểm yêu cầu, cho phép máy chủ đặt 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 tài liệu tuyệt vời của Rogério Vicente 🐈 Thông báo về trạng thái HTTP. Trước tiên, hãy dành chút thời gian để thể hiện sự trân trọng câu nói đùa. hài hước và tôi sẽ chờ. Giờ bạn đã trở lại, hãy để tôi giới thiệu về bản minh hoạ. Khi bạn cuộn, mỗi mèo trạng thái HTTP xuất hiện luân phiên từ bên phải hoặc bên trái. Tốc độ 60 khung hình/giây mượt mà nhưng như đã trình bày ở trên, một số người dùng có thể không thích hoặc thậm chí bị say xe do ứng dụng này, vì vậy bản minh hoạ được lập trình để tuân theo prefers-reduced-motion. Tính năng này thậm chí còn hoạt động linh hoạt, vì vậy, người dùng có thể thay đổi tùy chọn của họ một cách nhanh chóng, không cần tải lại. Nếu người dùng thích giảm chuyển động, các hoạt ảnh hiển thị không cần thiết sẽ biến mất và chỉ còn chuyển động cuộn thông thường. Chiến lược phát hành đĩa đơn bản ghi màn hình sau đây minh hoạ cách hoạt động của bản minh hoạ:

Video về Bản minh hoạ prefers-reduced-motion ứng dụ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à các trình duyệt đang ngày càng hiển thị nhiều thông tin để cho phép nhà phát triển web làm như vậy. Một ví dụ đã ra mắt khác là prefers-color-scheme là để xác định xem người dùng thích bảng phối màu sáng hay tối. Bạn có thể đọc mọi thông tin về prefers-color-scheme trong bài viết Xin chào bóng tối, người bạn cũ của tôi 🌒.

Nhóm công tác CSS đang chuẩn hoá nhiều hơn truy vấn phương tiện theo lựa chọn ưu tiên của người dùng như prefers-reduced-transparency (phát hiện xem người dùng có muốn giảm độ minh bạch hay không), prefers-contrast (phát hiện người dùng đã 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ề), và inverted-colors (phát hiện xem người dùng ưu tiên màu đảo ngược).

(Thêm) 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ể cho sở thích của bạn. Nếu bạn, vì bất cứ lý do gì, muốn dừng chuyển động trên tất cả các trang web, bạn thực sự có thể. Một cách để tạo điều này xảy ra là chèn một biểu định kiểu có CSS sau vào mọi trang web bạn truy cập. Có nhiều tiện ích của trình duyệt ngoài kia (bạn tự chịu rủi ro khi sử dụng!) cho phép điều 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 thức hoạt động của CSS trước đó sẽ ghi đè thời lượng của tất cả các hoạt ảnh và chuyển tiếp trong một khoảng thời gian ngắn nên không dễ nhận thấy chúng nữa. Vì một số trang web phụ thuộc vào ảnh động để hoạt động chính xác (có thể do một bước nhất định phụ thuộc vào việc kích hoạt animationend sự kiện), thì phương pháp animation: none !important; triệt để hơn sẽ không hiệu quả. Ngay cả vụ tấn công trước đó không đảm bảo thành công trên tất cả các trang web (ví dụ: không thể dừng chuyển động được bắt đầu bằng cách sử dụng API Ảnh động trên web), vì vậy, hãy nhớ hãy huỷ kích hoạt quy trình đó khi bạn nhận thấy sự cố.

Đường liên kết có liên quan

Bản nháp mới nhất của biên tập viên Truy vấn nội dung đa phương tiện cấp 5 quy cách
prefers-reduced-motion trên Trạng thái của Nền tảng Chrome.
prefers-reduced-motion Lỗi Chromium.
Nháy mắt Ý định triển khai việc đăng.

Xác nhậ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. Hình ảnh chính của Hannah Cauhepe trên Unsplash.