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