CSS Variables and Reduced Motion 관련

CSS > Article(s)

---

Article(s)

---

CSS Variables and Reduced Motion

---

Great usage of CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting --duration to 0 it basically … Continue reading ”CSS Variables and Reduced Motion”

Great usage of CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce:

From X (steeevg)

CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too.

![https://bram.us/wordpress/wp-content/uploads/2017/07/steveg3003_2017-Jul-21.jpg]

X에서 Steve Gardner(@steeevg) 님

CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too.

By setting --duration to 0 it basically behaves like a binary condition for a CSS calculation. Simple and effective 🙂

(Personally I’d set it to either 0 or 1 – and not 0.5. That way the math is kept easy and it becomes a true binary toggle)

⁉️

Not sure what prefers-reduced-motion is? Check out CSS-Tricks’ Introduction to the Reduced Motion Media Query to get up to speed.

CSS Variables and Reduced Motion

---

Great usage of CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting --duration to 0 it basically … Continue reading ”CSS Variables and Reduced Motion”