Truy vấn phương tiện ưu tiên giảm chuyển động 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.
Không phải ai cũng thích ảnh động hoặc hiệu ứng chuyển đổi trang trí. Một số người dùng ngay lập tức bị say chuyển động khi đối mặt với hiệu ứng cuộn thị sai, hiệu ứng thu phóng, v.v. Truy vấn đa phương tiệ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 đã thể hiện lựa chọn ưu tiên này.
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 nắng và sân băng chứa đầy người ⛸. Vấn đề duy nhất mà tôi phải làm là: tôi không thể ứng phó được với đám đông. Khi có quá nhiều mục tiêu di chuyển, tôi không thể tập trung vào bất cứ thứ gì và cuối cùng bị lạc và cảm thấy quá tải về hình ảnh, gần giống như nhìn chằm chằm vào một công viê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ộ đáng ngạc nhiên, video tự động phát, v.v., đôi khi web có thể gây choáng ngợp...
Thật may là không giống như ngoài đời thực, sẽ có một giải pháp cho vấn đề đó. Truy vấn nội dung đa phương tiện prefers-reduced-motion của CSS cho phép các nhà phát triển tạo một biến thể của một trang cho những người dùng thích chuyển động chậm hơn. Chẳng hạn như hạn chế việc tự động phát video, tắt một số hiệu ứng trang trí đơn thuần, hoặc thiết kế lại hoàn toàn một trang cho một số 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 nhìn lại một bước và xem ảnh động nào được dùng cho mục đích nào 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 phần chi tiết kỹ thuật bên dưới.
Ảnh động trên web
Đôi khi, ảnh động thường được dùng để cung cấp ý kiến phản hồi cho người dùng, chẳng hạn như để 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 ảnh động để "di chuyển" 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, 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 nhằm chiếm 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. Mục đích là cung cấp ngữ cảnh cho người dùng về những gì sắp xảy ra và trong khi đó 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, cuộn thị sai, video trong nền và một số hiệu ứng khác. Mặc dù nhiều người dùng thích các ảnh động như vậy, nhưng một số người dùng không thích ảnh này vì họ cảm thấy bị phân tâm hoặc bị chậm khi bị ảnh động. Trong trường hợp xấu nhất, người dùng thậm chí có thể bị say vận động như thể đây 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 ảnh động là một nhu cầu cần thiết về mặt y tế.
Rối loạn phổ tiền đình do chuyển động
Một số người dùng bị sự mất tập trung hoặc buồn nôn khi xem nội dung ảnh động. Ví dụ: ảnh động 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 kết với việc cuộn di chuyển xung quanh nhiều. Ví dụ: ảnh động cuộn thị sai có thể gây ra chứng 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 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, 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ó các chế độ cài đặt hỗ trợ tiếp cận để chỉ định lựa chọn ưu tiên về giảm chuyển động trong một thời gian dài. Các ảnh chụp màn hình bên dưới cho thấy lựa chọn ưu tiên Reduce motion (Giảm chuyển động) của macOS Mojave và lựa chọn ưu tiên Remove animation (Xoá ảnh động) của Android Pie. Khi được đánh dấu, các lựa chọn ưu tiên này sẽ khiến hệ điều hành không sử dụng các hiệu ứng trang trí, chẳng hạn 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à phải 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á chuyển động trên web
Truy vấn nội dung đa phương tiện cấp 5 cũng đưa ra lựa chọn ưu tiên giảm chuyển động của người dùng cho web. Truy vấn nội dung đa phương tiệ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 đang hiển thị. Truy vấn nội dung nghe nhìn prefers-reduced-motion được 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 để giảm thiểu lượng ảnh động hoặc chuyển động mà người dùng sử dụng hay khô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. Giá trị từ khoá này được đánh giá làfalsetrong 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 nên giảm thiểu chuyển động hoặc ảnh động, tốt nhất là ở điểm loại bỏ mọi di chuyển không cần thiết.
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ừ ngữ cảnh JavaScript.
Để minh hoạ cho 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 ảnh động "Rung" bắt mắt, nhưng là một công dân web tốt, tôi sẽ chỉ phát ảnh này cho những người dùng rõ ràng chấp nhận hoạt ảnh, chứ không phải cho những người khác, 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 phương tiện truyền thông.
/*
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 làm việc với prefers-reduced-motion bằng JavaScript, hãy tưởng tượng tôi đã xác định một ảnh động phức tạp bằng API Ảnh động trên web. Mặc dù trình duyệt sẽ tự động kích hoạt các quy tắc CSS khi lựa chọn ưu tiên của người dùng thay đổi, nhưng đối với ảnh động JavaScript, tôi phải tự mình lắng nghe các thay đổi, sau đó dừng các ảnh động có thể đang hoạt động theo cách thủ cô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:
window.matchMedia('prefers-reduced-motion: reduce');
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 một tệp AVIF, WebP hoặc GIF động phụ thuộc vào thuộc tính media. Nếu (prefers-reduced-motion: no-preference) có giá trị true, thì bạn có thể an toàn hiển thị phiên bản ảnh động, còn không 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ụ dưới đâ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.
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 ý của ứng dụng Sec-CH-Prefers-Reduced-Motion cho phép các trang web 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ủ chuyển nội tuyến CSS phù hợp vì lý do liên quan đến hiệu suất.
Bản minh hoạ
Tôi đã tạo một bản minh hoạ nhỏ dựa trên 🐈 mèo trạng thái HTTP tuyệt vời của Rogério Vicente. Trước tiên, hãy dành chút thời gian để hiểu rõ câu chuyện cười.
Đó là một câu chuyện hài hước và tôi sẽ chờ các bạn. Giờ bạn đã trở lại, tôi sẽ giới thiệu
bản minh hoạ. Khi bạn cuộn xuống, từng thông báo trạng thái HTTP sẽ xuất hiện luân phiên từ bên phải hoặc bên trái. Đây là ảnh động 60 khung hình/giây mượt mà, nhưng như đã nêu ở trên, một số người dùng có thể không thích hoặc thậm chí bị say xe do chuyển động, 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 lựa chọn ưu tiên của họ một cách nhanh chóng mà không cần tải lại. Nếu người dùng muốn giảm chuyển động, thì các ảnh động 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. Bản ghi màn hình dưới đây minh hoạ cách hoạt động của bản minh hoạ:
prefers-reduced-motion bản minh hoạ
ứ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 cho thấy ngày càng nhiều tính năng để cho phép các nhà phát triển web làm như vậy. Một ví dụ khác đã ra mắt là prefers-color-scheme, giúp 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ứ 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 hoạt động CSS hiện đang chuẩn hoá nhiều truy vấn nội dung nghe nhì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 độ 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ó thích màu đảo ngược hay không).
(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ể. Có 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 vào mọi trang web bạn truy cập. Có một số tiện ích của trình duyệt (bạn tự chịu rủi ro khi sử dụng!) cho phép 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 này là CSS ở trên ghi đè thời lượng của tất cả các ảnh động và hiệu ứng chuyển đổi
thành một khoảng thời gian ngắn sao cho chúng không còn đáng chú ý nữa. Vì một số trang web phụ thuộc vào ảnh động cần chạy để 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 hiệu quả. Ngay cả cuộc tấn công ở trên cũng không đảm bảo thành công trên mọi trang web (ví dụ: nó không thể dừng chuyển động được khởi tạo qua API Ảnh động trên web), vì vậy hãy nhớ vô hiệu hoá nó 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 về quy cách Truy vấn nội dung nghe nhìn cấp 5.
prefers-reduced-motionvề Trạng thái nền tảng Chrome.prefers-reduced-motionLỗi Chromium.- Nhấp nháy Ý đị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 đã xem xét bài viết này cùng với Rob Dodson.
Hình ảnh chính của Hannah Cauhepe trên Unsplash.