3 simple CSS tricks to improve UX

resize: none vs resize: vertical

Whenever I see textarea with a fixed height I want to scream: "Give me userfriendly textarea". I want to enter data comfortably. Give me this.

I understand developers do that because textarea changing breaks the layout. But we can find a more elegant solution.

Set a minimal comfortable height and save resizing of it but disable width changes using resize: vertical. And your users will not break the layout by chance.

don't do this

textarea {  height: 10rem;  resize: none;}

you can use this instead

textarea {  min-height: 10rem;  resize: vertical;}

background-color helps users interact with UI

Designers love to use background images and that's a nice way to draw users' attention. But there is the problem of text accessibility in this case.

Loading of background images takes some time. So while they are loading we can't read the text that's related to images and feel confusing.

But there is a solution. We just can pick a background color and add it using the background-color property for the block with the background image so that text would be readable always.

don't do this

.intro {  background-image: url("example.jpg");}

you can use this instead

.intro {  background-image: url("example.jpg");  background-color: #88cead;}

The start and end keywords

When our website becomes popular there is the important issue of translating on different languages. For example, I often wanted to translate the website from English to Arabic.

The problem is following, English is a matter of languages where the beginning of the line is on the left (LTR) and in Arabic the beginning of the line is on the right (RTL).

So if I use the text-align: left for Arabic users they will be confused because the beginning of the line will be by the left and no right like he thought.

It happens because the left and right values don't consider text direction, i.e when we use the left or right value a text is aligned to the left or right edge always.

But we can fix it using the start and end values that consider the text direction. If a browser of our user is setting in LTR language the beginning of the line will be by left. And if it's setting in RTL language then by right.

don't do this

.example {  text-align: left;}/* or */.example {  text-align: right;}

you can use this instead

.example {  text-align: start;}/* or */.example {  text-align: end;}

P.S.
I'm always open to any opportunities to share knowledge about CSS and HTML with you. So I can:
answer any of your questions about CSS and HTML (free)
make written code review of your projects (paid)
tell about what you should learn (paid)

Just chat me on [email protected].

Also you can support me one from the following ways:
Buy a shirt: https://www.redbubble.com/shop/ap/79109127
Get my new posts first: https://www.patreon.com/melnik909

P.S.S. This post was written with the support of my sponsors: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.