Truy vấn nội dung đa phương tiện prefers-reduced-Motion này phát hiện xem người dùng đã 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 chưa.
Không phải ai cũng thích ảnh động hoặc hiệu ứng chuyển tiếp trang trí và một số người dùng hoàn toàn bị chán chuyển động 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 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
Một ngày nọ, tôi trượt băng với con tôi. Hôm nay là một ngày đẹp trời, mặt trời chiếu sáng và mọi người đều đông đúc ⛸. Vấn đề duy nhất là: Tôi không đối phó tốt với đám đông. Với quá nhiều mục tiêu chuyển động, tôi không thể tập trung vào bất cứ điều gì, cuối cùng bị mất đồ và cảm thấy hoàn toàn quá tải về thị giác, gần giống như nhìn chằm chằm vào một khe núi 🐜.
Đôi khi, những điều tương tự có thể xảy ra trên web: với quảng cáo nhấp nháy, hiệu ứng thị sai lạ mắt, hoạt ảnh thú vị, tự động phát video, v.v. đôi khi, trang web có thể khiến bạn quá tải... Thật may là không giống như trong thực tế, có một giải pháp cho vấn đề này. Truy vấn nội dung đa 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 ít hơn. Điều này có thể bao gồm mọi hoạt động, từ tránh tự động phát video, tắt một số hiệu ứng đơn thuần mang tính trang trí, cho đến thiết kế lại hoàn toàn 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 trở lại một chút và nghĩ xem ảnh động nào được dùng 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 các chi tiết kỹ thuật bên dưới.
Ảnh động trên web
Ảnh động thường được dùng để đưa ra phản hồi cho người dùng, chẳng hạn như để cho họ biết rằng một thao tác đã đượ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 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 để 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 màn hình khung, 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 nhiều thời gian của người dùng và giúp toàn bộ trải nghiệm cảm thấy 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 nội dung 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 hiệu ứng 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 lại không thích chúng vì họ cảm thấy bị phân tâm hoặc bị chậm lại. Trong trường hợp xấu nhất, người dùng thậm chí có thể bị chán chuyển động 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 ảnh động là cần thiết về y tế.
Rối loạn phổ tiền đình do chuyển động
Một số người dùng gặp phải sự phân tâm hoặc buồn nôn khi xem nội dung độ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 thao tác cuộn di chuyển quá 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 thành phần nền di chuyển với tốc độ khác với các thành phần trên nền trướ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 phải nghỉ ngơi tại giường để phục hồi.
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ề việc giảm chuyển động trong thời gian dài. Các ảnh chụp màn hình dưới đâ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á hoạt ảnh 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í như ảnh động khi 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 phương tiện cấp 5 cũng mang đến lựa chọn ưu tiên đã giảm về chuyển động của người dùng trên web. Truy vấn phương tiệ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 hiển thị. Truy vấn nội dung đa phương tiện prefers-reduced-motion được dùng để phát hiện xem người dùng đã đặt lựa chọn ưu tiên về hệ điều hành để giảm thiểu số lượng ảnh động hoặc chuyển động mà người dùng sử dụng. Hàm này có thể nhận hai giá trị:
no-preference: Cho biết rằng người dùng không thực hiện 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 người dùng đã đặt lựa chọn ưu tiên về hệ điều hành để cho biết các giao diện sẽ 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 đều bị xoá.
Làm việc với truy vấn phương tiện từ ngữ cảnh CSS và JavaScript
Tương tự như mọi 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 ảnh động "Rung" bắt mắt, nhưng với tư cách là một công dân tốt, tôi sẽ chỉ phát ảnh động cho những người dùng rõ ràng là rất hài lò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 người dùng trên các trình duyệt không hiểu truy vấn 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 làm việc với prefers-reduced-motion bằng JavaScript, giả sử tôi đã xác định một ảnh động phức tạp bằng API Ảnh động trên web. Mặc dù các quy tắc CSS sẽ được trình duyệt kích hoạt động 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 theo dõi các thay đổi, sau đó dừng các ảnh động có thể đang diễn ra theo cách thủ công (hoặc khởi động lại chúng 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 nội dung nghe nhìn thực tế:
window.matchMedia('prefers-reduced-motion: reduce');
window.matchMedia('(prefers-reduced-motion: reduce)');
Xử lý truy vấn đa phương tiệ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 phụ thuộc vào thuộc tính media. Nếu (prefers-reduced-motion: no-preference) cho kết quả là true, thì bạn có thể hiển thị phiên bản ảnh động, còn phiên bản tĩnh có thể được:
<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ử bật/tắt lựa chọn ưu tiên về chuyển động của thiết bị để xem sự khác biệt.
Tìm hiểu 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 ý của ứng dụng Sec-CH-Prefers-Reduced-Motion cho phép các trang web lấy các 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 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èo có 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 để thưởng thức câu chuyện cười, câu chuyện này rất hài hước và tôi sẽ chờ. Giờ bạn đã trở lại, hãy để tôi giới thiệu bản minh hoạ. Khi bạn cuộn xuống, mỗi 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à một ảnh động với tốc độ 60 FPS 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í là bị say 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ọ nhanh chóng, không cần phải tải lại. Nếu người dùng muốn giảm chuyển động, các ảnh động hiển thị không cần thiết sẽ biến mất và chỉ còn lại 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:
prefers-reduced-motion bản minh hoạ
ứng dụng
Kết luận
Việc tôn trọng các lựa chọn ưu tiên của người dùng là chìa khoá cho các trang web hiện đại. Các trình duyệt đang hiển thị 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 được ra mắt là prefers-color-scheme, giúp phát hiện 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, bạn cũ của tôi 🌒.
Nhóm hoạt động CSS hiện đang chuẩn hoá nhiều cụm từ tìm kiếm nội dung đa phương tiện theo lựa chọn ưu tiên của người dùng hơn, 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 độ 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 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ể theo sở thích của bạn.
Nếu bạn 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 thực sự có thể làm vậy. Có một cách để làm việc này là chèn biểu định kiểu có CSS sau đây vào mọi trang web mà bạn truy cập. Trên thị trường có một số tiện ích 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 của tính nă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 đến mức không thể nhận thấy chúng nữa. Vì một số trang web phụ thuộc vào ảnh động để chạy để 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 sự kiện animationend), nên phương pháp animation: none !important; cơ bản hơn sẽ không hiệu quả. Ngay cả hình thức tấn công ở trên cũng không đảm bảo sẽ thành công trên tất cả các trang web (ví dụ: nó không thể dừng chuyển động được khởi tạo thông qua API Ảnh động trên web), vì vậy, hãy nhớ tắt tính năng này khi bạn thấy có sự cố.
Đường liên kết có liên quan
- Bản nháp của trình chỉnh sửa mới nhất về quy cách Truy vấn nội dung đa phương tiện cấp 5.
prefers-reduced-motionvề Trạng thái của Nền tảng Chrome.prefers-reduced-motionLỗi Chromium.- Nhấp nháy Ý định triển khai đăng bài.
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 bài viết này.
Hình ảnh chính của Hannah Cauhepe trên Unsplash.