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;
}

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;
  }
}