Cái ReducedMotion này là để bắt trang web nó không dùng animation, tuy nhiên hỏi là một chuyện người ta đồng ý hay không lại là một chuyện khác vì nó đòi hỏi trang web phải sử dụng CSS
@media (prefers-reduced-motion) {/* styles to apply if a user's device settings are set to reduced motion */}
Ngoài ra nếu sử dụng thêm Header Editor để gửi thêm header
Sec-CH-Prefers-Reduced-Motion: "reduce"
thì sẽ hiệu quả hơn vì sẽ khiến trang web hiểu điều này để trả về trang web không dùng animation.
Thật ra để tắt animation, mình có cái "Tối ưu CSS" này đã dùng 7-8 năm liên tục và cải thiện nó đến mức nó khá an toàn và ổn định, đoạn code dưới đây tắt sạch CSS3 nặng nề đi khiến các trang web chạy nhẹ hơn, ít dùng CPU hơn.
Đầu tiên cần bật userContent.css/userChrome.css bằng cách làm như bài này:
Bật userChrome.css để đổi giao diện Firefox
Sau đó mở folder
chrome
, tạo một file
userContent.css
rồi copy tất cả đoạn bên dưới vào, sau đó khởi động lại Firefox:
Code:
*, *:before, *:after {
border-radius:unset!important;
box-shadow:unset!important;
text-shadow:unset!important;
text-transform:unset!important;
animation-iteration-count:1!important;
scroll-behavior:unset!important;
moz-animation-iteration-count:1!important;
webkit-animation-iteration-count:1!important;
backdrop-filter:unset!important;
filter:unset!important;
animation-timing-function: step-start !important;
transition-timing-function: step-start !important;
filter:none!important;
text-rendering:none!important;
}
Test thử ở trang này, nếu cục
CSS
màu xanh lá không chạy animation là thành công:
https://www.w3schools.com/css/css3_animations.asp