Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Gate non-essential animations behind prefers-reduced-motion
Disable or tone down looping/blinking animations when the user requests reduced motion.
Bad example
| 1 | .blink { |
| 2 | animation: blink 1.4s ease-in-out infinite; |
| 3 | } |
Explanation (EN)
An infinite blinking animation runs for everyone, including users who set prefers-reduced-motion and may be harmed by it.
Objašnjenje (HR)
Beskonacna animacija treperenja izvodi se za sve, ukljucujuci korisnike koji su postavili prefers-reduced-motion i kojima moze stetiti.
Good example
| 1 | .blink { |
| 2 | animation: blink 1.4s ease-in-out infinite; |
| 3 | } |
| 4 |
|
| 5 | @media (prefers-reduced-motion: reduce) { |
| 6 | .blink { |
| 7 | animation: none; |
| 8 | } |
| 9 | } |
Explanation (EN)
Honoring the media query turns off the motion for users who asked for it while keeping it for everyone else.
Objašnjenje (HR)
Postivanje media upita iskljucuje pokret za korisnike koji su to zatrazili, a zadrzava ga za ostale.
Exceptions / Tradeoffs (EN)
Essential motion that conveys required information may stay, but should still be minimized under reduced-motion.
Iznimke / Tradeoffi (HR)
Nuzan pokret koji prenosi obaveznu informaciju moze ostati, ali bi i dalje trebao biti smanjen pod reduced-motion.