DEV Community

Stas Melnikov
Stas Melnikov

Posted on • Updated on

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.

If you like it you'll get more by subscribing to my newsletter.

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;
}
Enter fullscreen mode Exit fullscreen mode

A correct code

.textarea {
  resize: vertical;
  min-height: 5rem;
  max-height: 15rem;
}
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

A correct code

.parent::before {
  content: "";
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

A correct code

img {
  display: block;
  max-width: 100%;
  aspect-ratio: 1.5;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

A correct code

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

Top comments (0)