CSS tips to avoid bad UX

I believe CSS is a powerful tool to make perfect UX. I'm here to share my tips for unfortunate mistakes.

Please, stop using resize: none

We used to use resize: none to disable textarea resizing. We end up textareas are terrible for typing data 😒

The vertical value and limit to the heights makes the same without discomfort 💡

A wrong code

.textarea { resize: none; } 

A correct code

.textarea { resize: vertical; min-height: 5rem; max-height: 15rem; } 

Leave the content property empty to avoid unexpected voicing

Pay attention, screen readers voice a text that's defined with the content property. It might lead to unexpected voicing. It's why we shouldn't use CSS to add text to a web page 😉

A wrong code

.parent::before { content: "I am text"; } 

A correct code

.parent::before { content: ""; } 

aspect-ratio is a page jump pill

Page jumps after loading pictures is a pain. It's well, aspect-ratio help to avoid it. For example if the picture has the 600x400px size we should set aspect-ration: 1.5 (600px / 400xp = 1.5) 😊

A wrong code

img { display: block; max-width: 100%; } 

A correct code

img { display: block; max-width: 100%; aspect-ratio: 1.5; } 

animation without prefers-reduced-motion might lead to dizziness or headache

Motion animation might lead users with vestibular disorders to experience dizziness 😩

So we should wrap it in prefers-reduced-motion to avoid problems if users disable animations in OS settings 👍

A wrong code

.example { animation: zoomIn 1s; } 

A correct code

@media (prefers-reduced-motion: no-preference) { .example { animation: zoomIn 1s; } }