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.
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.
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 đá 🐜.
Đô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.
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;
}
}
Để 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:
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 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.
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ạ:
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.