Forem: Stas Melnikov

4 HTML&CSS tips improve UX of your app

Stas Melnikov — Tue, 04 Nov 2025 16:14:23 +0000

Hey folks!

I wanna share a few easy tips for improving user experience. You can use it for any apps because all improvements will be done using only HTML and CSS.

Let's go!

nav without aria-label is a bad pattern

A wrong code

<nav>
  <!-- the elements of navigation are here -->
</nav>

A correct code

<nav aria-label="Main">
  <!-- the elements of navigation are here -->
</nav>

Screen reader users can't find where the main navigation is if we don't tell them about it. So aria-label helps us to make it!

Throw input type="tel" in the trash

A wrong code

<label for="bd">Date of birth</label>
<input id="bd" type="tel">

A correct code

<label for="bd">Date of birth</label>
<input id="bd" inputmode="numeric">

Do you expect * or # symbols when typing date of birth? So input type="tel" is trash for typing numbers except typing a phone number. Laconic keyboards with numbers using inputmode="numeric" win!

Focus styles aren't equivalent to hover styles

A wrong code

.button:is(:hover, :focus-visible) {
  background-color: #fed330;
}

A correct code

.button:hover {
  background-color: #fed330;
}
.button:focus-visible {
  outline: 3px solid #fbc604;
}

Focus styles can't be equal to hover styles because in this case users have to understand a focus state for every element. It's why outline is the most safe way!

Decorative lines are hidden in the Window High Contrast Mode

A wrong code

.heading::before {
  content: "";
  width: 5rem;
  height: 2px;
  background-color: #b87eef;
  /* other CSS */
}

A correct code

.heading::before {
  content: "";
  width: 5rem;
  border-top: 2px solid #b87eef;
  /* other CSS */
}

background-color will be set with the same value for all elements in the Windows High Contrast mode. As a result, the elements will be hidden. So consider border as an alternative.

P.S. You can find more tips in my newsletters:

https://cssisntmagic.substack.com

https://deva11y.substack.com

The 9 funny CSS loaders + free source code ❤️

Stas Melnikov — Thu, 06 Feb 2025 18:21:40 +0000

Hey!👋

I had fun the few last days. As a result, I've made new CSS loaders. I was inspired by text and geometry.

Sure, all code is free. Just catch it on Codepen!

What do you think? Please, share your thoughts in comments

CSS tips to avoid bad UX

Stas Melnikov — Sun, 03 Mar 2024 17:18:56 +0000

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

4 CSS authors that I recommend reading

Stas Melnikov — Sun, 02 Apr 2023 19:25:38 +0000

This time is really awesome because we have a lot of resources that help us to learn CSS. Most likely everyone has a list of favorite CSS authors. So I can't miss a chance to share my list of 4 CSS authors that must be read in my opinion.

Like I said, there are plenty of experts who share knowledge. It's why the selection of authors was a hard task and I had to use the following requirements:

the author should publish regularly at least one post per month;
posts should be accessible for easy finding without mixing with other topics.

I hope you'll enjoy!

Kevin Powell

Kevin's Youtube channel is the best place where you can find new CSS things. Kevin has perfect teaching skills. It's why his video is simple to understand and interesting to watch it.

https://www.youtube.com/kevinpowell

Manuel Matuzovic

Manuel also writes about new CSS things like Kevin. So If you like reading more than watching then Manuel's blog is the best alternative to Kevin's Youtube video.

https://www.matuzo.at

Temani Afif

Temani is focused on writing tutorials with deep dive into the visual part of CSS. His tutorials with detailed description help readers to repeat the creation process of animations step by step.

https://css-articles.com

Ahmad Shadeed

Ahmad created the blog that is an indisputable valuable resource if you don't have enough practice with CSS. You will find a lot of practical cases that are explained in detail.

https://ishadeed.com/articles/

All nuances about the display property

Stas Melnikov — Mon, 20 Dec 2021 19:33:00 +0000

In my experience, the display property raises a lot of questions for novice developers. Yes, to be honest, I often met confusion from experienced developers too.

I created a live cheat sheet for fixing this situation. Also I talk about most of the nuances of the property in this article.

display: block

Default behavior

1. The width property of elements with display: block fills up all available space by the text direction. The height property of elements with display: block is calculated automatically depending on the content.

If the content of elements with display: block doesn't fit on one line then browsers will move it to a new line.

2. The elements with dispay: block always start on a new line.

Box model features

3. The width and height properties can be set to elements with dispay: block.

4. The padding and border properties can be applied too.

But surprises wait for us when using margins because they might end up outside the parent.

And if we set the border or padding property for the parent, margins stop to end up outside it.

That will work in the case when using vertical paddings or borders but doesn't with horizontal.

When adding padding or borders with only one side margins will stop ending up outside the parent with this side but will still with the opposite.

Margins stop to end up outside the parent after adding the overflow property with a value that's different from visible.

In the case of the parent with a few items margins before the first and after the last element end up outside the parent.

In this case, adding the border, padding and overflow property for the parent ceases this margin behavior.

The margins of adjacent elements with display: block collapse too. The browsers choose the biggest between the two.

The padding, border and overflow properties can't change it.

display: inline

Default behavior

1. The width and height properties of elements with display: inline are calculated automatically depending on the content.

If the content of elements with display: inline doesn't fit on one line then browsers will move it to a new line. The width will be calculated depending on the maximum line length.

2. If there is space elements with display: inline will be on the same line. If no, browsers will move the part of them to a new line.

Box model features

3. The width and height properties can't be set to elements with display: inline.

4. You can set paddings, borders and margins. Vertical values will end up outside the parent.

Also, paddings, borders and margins can overlap paddings and borders of the parent.

Paddings, borders and margins overlap each other if elements with display: inline are in multiple rows.

In the case with multiline elements margins can end up outside by horizontal.

The overflow property crops margins if a value is different from the visible value.

There's no point using margin: auto for elements with display: inline because it won't work.

display: flex

Default behavior

1. The the width property of elements with display: flex fills up all available space by the text direction. The height property is calculated automatically depending on the content height.

If the element has display: block by default we won't see any changes after changing the block value on flex.

And they happen for elements with display: inline. The width property stops depending on the content after the inline value on flex.

If the content of elements with display: flex doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.

If we change the block value on flex then we won't see changes as with the width property.

And if we change the inline value to flex the width property stops depending on the maximum line length.

2. By default elements with display: flex are positioned in a column. So if we change the block value to flex elements will save its position.

And if we change the inline value to flex we will get that they are positioned in a column.

Box model features

3. The width and height properties can be set to elements with display: flex. Therefore we don't notice changes when changing the block value to flex.

The width and height properties start to apply after changing the inline value to flex.

4. The padding and border properties can be set for elements with display: flex. If the element has display: block by default we won't see any changes after changing the block value on flex.

And we'll see them after changing the inline value to flex because vertical paddings and borders stop ending up outside the parent.

The margin property works with a few specificities. Since vertical margins of elements with display: block might end up outside the parent, this behavior saves after changing the block value to flex.

However, as with elements with display: block adding the border or padding properties to the parent stops this margins behavior.

If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. Changing the block value to flex doesn't cancel that.

As with a single item case, adding the padding or border properties to the parent stops this behavior for elements with display: flex too.

Also, margins between adjacent elements continue collapsing when changing the block value to flex Also. The gap between elements will equal the largest.

And collapsing is saved after adding the padding or border properties.

Since vertical margins of elements with display: inline might end up outside the parent, this behavior saves after changing the inline value to flex.

When changing the inline value to flex, margins don't overlap paddings or margins that are set to the parent.

When we change the inline to flex and the parent has multiline elements top margins will end up outside it for only the first element and bottom margins for the last.

Margins from other elements stop overlapping siblings by vertical. They will be collapsed.

Default behavior of flex items

Note! Flex items are childs of the element with display: flex or display: inline-flex

5. Flex items always are blockified. It means all block values are saved.

All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

6. The width property of flex items depending on the flex-direction property. If flex-direction: row (default value) the width property is calculated automatically depending on the content and the height property of flex items is equal to the height property of the parent.

Thus the width property stops to be equal to the width property of the parent for elements with display: block. It's calculated depending on the content. The height property doesn't depend on the content and becomes to equal the height property of the parent.

In the case of elements with display: inline we will get the height property is equal to the height property of the parent.

When flex-direction: column the width property of flex items fills up all available space by the text direction and the height property is calculated automatically depending on the content.

As a result, this behavior is the same as the behavior of elements with display: block.

There are changes for elements with display: inline. The width property becomes to be equal to the width parent.

If the content of a flex item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent. It doesn't matter that a value is set to the flex-direction property.

As a result, the content of elements with display: block will be displayed the same after adding display: flex to its parent.

The width property of the element with display: inline stops to be calculated depending on the maximum line length.

7. By default flex items position on the same line. If there isn't space, browsers will squeeze them depending on its content.

For this reason elements with display: block stop positioning in a column.

The single change for elements with display: inline is they are squeezed.

Also, a position might be changed using the flex-direction property. If we set the column value flex items will be stacked and stop squeeze.

This behavior repeats for elements with display: block.

In the case of elements with display: inline they stop to be on the same line and will display in a column.

Box model features of flex items

8. The width and height properties can be set to flex items. It doesn't matter which the value is used for the flex-direction.

It's why we won't see some changes after becoming the element with display: block to a flex item.

When it comes to elements with display: inline we already can set the width and height properties after adding display: flex to the parent.

9. The padding and border properties can be set too. They will work without changes for elements with display: block.

When it comes to elements with display: inline vertical paddings and borders stop ending up outside the parent.

The padding and border properties for elements with display: block save their behavior when adding flex-direction: column to the parent.

Adding flex-direction: column doesn't affect the behavior of properties for elements with display: inline in comparison with flex-direction: row.

Pay attention vertical margins don't end up outside the parent. That behavior doesn't depend on the flex-direction property. If we set the row or column value we will get an equal result.

That leads to we'll see changes if we use elements with display: block.

Also, that applies to elements with display: inline.

If the parent has two elements with display: block margins stop ending up outside it from the first element and the bottom from the last.

In the case, we set margins for adjacent elements with display: block they stop collapsing.

display: grid

Default behavior

1. The the width property of elements with display: grid fills up all available space by the text direction. The height property is calculated automatically depending on the content.

If the element has display: block by default we won't see any changes after changing the block value on grid.

And they happen for elements with display: inline. The width property stops depending on the content after the inline value on grid.

If the content of elements with display: grid doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.

If we change the block value on grid then we won't see changes as with the width property.

And if we change the inline value to grid the width property stops depending on the maximum line length.

2. By default elements with display: grid are positioned in a column. So if we change the block value to grid elements will save its position.

And if we change the inline value to grid we will get they are positioned in a column.

3. The width and height properties can be set to elements with display: grid. Therefore we don't notice changes when changing the block value to grid.

The width and height properties start to apply after changing the inline value to grid.

4. The padding and border properties can be set for elements with display: grid. If the element has display: block by default we won't see any changes after changing the block value on grid.

And we'll see them after changing the inline value to grid because vertical paddings and borders stop ending up outside the parent.

Since vertical margins of elements with display: block might end up outside the parent, this behavior stops after changing the block value to grid.

However, as with elements with display: block adding the border or padding properties to the parent stops this margins behavior.

As with elements with display: block adding to the parent the overflow property with a value that's different from visible cancels margins behavior.

If the parent has a few elements with display: block top margins will end up outside it from the first element and the bottom from the last. Changing the block value to grid doesn't cancel that.

As with a single item case, adding the padding, border or overflow properties to the parent stops this behavior for elements with display: grid too.

Also, margins between adjacent elements continue collapsing when changing the block value to grid Also. The gap between elements will equal the largest.

And collapsing is saved after adding the padding, border and overflow properties.

Since vertical margins of elements with display: inline might end up outside the parent, this behavior saves after changing the inline value to grid.

When changing the inline value to grid, margins don't overlap paddings or margins that are set to the parent.

When we change the inline to grid and the parent has multiline elements top margins will end up outside it for only the first element and bottom margins for the last.

Margins from other elements stop overlapping siblings by vertical. They will be collapsed.

Also, changing the inline value to grid leads margins again displays when the overflow is applied. The value should be different from the visible.

If we define margin: auto to elements with display: block or display: inline that continues doesn't work after adding display: grid.

Defining the width property to elements with display: block allows work of margins horizontal. That saves after changing the block value on grid.

In addition, changing the inline value on grid allows using margin: auto if the width property is defined to them.

Default behavior of grid items

Note! grid items are childs of the element with display: grid or display: inline-grid

5. Grid items always are blockified. It means all block values are saved.

All inline values will be changed on block values. So the inline and inline-block values will be changed to block, inline-grid -> grid, inline-grid -> grid and inline-table -> table.

6. The width property of grid items is equal to the width property of the parent. The height property tries to fill all space.

Thus the width property keeps being equal to the width property of the parent for childs with display: block. The height property stops depending on the content but looks the same when the height property isn't defined to the parent.

In this case, if it's defined filling all space of the height property is more noticeable.

In the case of childs with display: inline we will get the width property stops depending on the content. The height property looks the same like before if the height property isn't defined to the parent.

If the height property is defined to the parent we will better see how the property stretches.

If the content of a grid item doesn't fit on one line then browsers will move it to a new line. The width property will equal the width property of the parent.

As a result, the content of childs with display: block will be displayed the same after adding display: grid to its parent.

The width property of the childs with display: inline stops to be calculated depending on the maximum line length.

By default, grid items start on a new line. For this reason childs with display: block still saves position.

In contrast to the case with childs with display: block, childs with display: inline changes default position.

Box model features of grid items

8. The width and height properties can be set to grid items. It's why we won't see some changes after changing the display property of the parent with the block value to grid.

When considering childs with display: inline we already can set the width and height properties after adding display: grid to the parent.

9. The padding and border properties can be set too. They will work without changes for childs with display: block.

When it comes to childs with display: inline vertical paddings and borders stop ending up outside the parent.

Pay attention, vertical margins don't end up outside the parent. That leads to we'll see changes if display: block is set to childs.

If the parent has two childs with display: block margins stop ending up outside it from the first child and the bottom from the last.

In the case, we set margins for adjacent childs with display: block they stop collapsing.

Vertical margins of childs with display: inline cease to end up outside the parent when adding display: grid to it.

Also, margins cease to overlap paddings and borders.

When applying margin: auto the width and height properties of the childs are calculated depending on the content after adding display: grid to the parent. All space between the childs and the parent's borders will be shared evenly.

We'll see the width property stops to be equal to the width property of the parent after changing the block value on grid.

The width and height properties keep behavior after changing the inline value on grid.

Adding margin: auto to grid items stops filling all space of the width and height properties.

The 3 Short December dev tips about UX&A11y

Stas Melnikov — Tue, 07 Dec 2021 21:40:32 +0000

Hey folks!

I'd like to talk about how to help users with vision disabilities find a search, a main and additional goal when we work with focus, how content camouflages.

Also, thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

Let's go!

Help users with vision disabilities find a search

Usually we know how to place a search for users without vision disabilities. But how should we do that for users with disabilities?

There is a special search role in the WAI-ARIA standard that we should add for the form element. In this case screen readers will start to display search in the "Regions list" mode that is used by users for navigation.

Pay attention, if we don't do that search will not be displayed in this mode. So it will hamper users start interaction with search. They will have to find a search using common keys. It's much longer than if they use the "Regions list" mode.

Thinking about a main and additional goal when we work with focus

Did you think sometimes about how better to move focus when users open elements such as modals or dialogs?

I think there is a main and additional goal when we work with focus. The main goal is what users want to do after moving focus for reaching their goals using a minimal number of actions. An additional is what they can do something else.

Let's consider what I mean using the case of selecting a language on Booking. If we push the button of selecting a language we'll see modal with languages.

Focus will move on the close button. Nice what we can close modal by pushing the enter key. But is that why we open the modal? No, we wanted to select a language. That's the main goal. And closing a modal is an additional goal.

Now let's look at what Booking suggests for selecting a language. If we use only a keyboard we have to use the tab, ↑ or ↓ keys to start moving between languages.

Then we push the same keys again until we find the necessary option. If we push the enter key we'll select a language. Well, that's a nice solution but I want to suggest another.

We have already identified that users open the modal because they want to select a language. It's the main goal. So we should give that to them. I think we can do that if we move focus on the current language.

Then we should make the possibility of moving between languages using tab, ↑, →, ↓ or ← keys immediately. The selection of a language we'll make using the enter key. Also, we'll save the possibility of closing the modal using the Esc key like Booking made.

I hope I was able to pass on the importance of defining a main and additional goal when you work with focus. Please, think about it and your interfaces will be user-friendly.

Do you help content to camouflage?

Folks, let's see ASOS homepage. Do you see there are text and buttons when the page is loading? 🤔

And there are! Just they camouflage😄Let's add a high-contrast background using the CSS background-color property and we will see them 🙂

My 3 tips about Flexbox that will make your CSS better

Stas Melnikov — Mon, 07 Jun 2021 16:25:40 +0000

Hey folks!

I'd like to talk about why column-gap is better than justify-content, how justify-content: center and align-items: center lead to the loss of elements, what means flex items are blockified!

But before embarking on reading I leave the link on my Substack newsletter about CSS. You know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

Let's go!

`justify-content` vs `column-gap`

I'm tired to see that developers use the space-between or space-around value to position the grid's elements. It's a bad practice that leads to incorrect displaying. When people do that they don't think that number of items may be changed.

For example, if add more elements in a grid from 4 columns they will not be displayed at the start of the line. Thus I see the broken grids.

There is a nice approach using the column-gap property. This property with Flexbox and you can just define a gap between of elements. And browsers will do all the rest of the work. So you'll get safe grids with any number of elements.

don't do this

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>

.grid {
  display: flex;
  justify-content: space-between; /* or space-around */
}

.item {
  width: 30%;
}

You can use this instead

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>

.grid {
  display: flex;
  column-gap: 5%;
}

.item {
  width: 30%;
}

`justify-content` and `align-items` vs `margin: auto`

When we solve issues of alignment we like to use alignment properties such as justify-content or align-items. But few people know these properties can lead to losing data, particularly frequently, when vertical alignment.

This is due to how these properties work. This process includes the two terms. The first, the alignment container is an element to that you declare the alignment properties.

The second, the alignment subject is elements that are inside of the alignment container. The alignment properties affect them.

So there is the case when the alignment subjects' sizes are larger than the alignment container's sizes. In the default alignment mode, it'll lead to overflow and loss of data. So users will see the cropped element.

I created the example with the modal element to show this behavior. At first, the text is short. But when we make it more we lose the heading and the close button.

We can fix it using auto margins because it uses extra space to align elements and doesn't lead to overflow. Take a look at how elements are no longer lost.

don't do this

<div class="modal">
  <div class="modal__main"></div>
</div>

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

You can use this instead

<div class="modal">
  <div class="modal__main"></div>
</div>

.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}

UPD 12.06.2025: One more

.modal {
  display: flex;
  justify-content: center;
  align-items: safe center;
}

flex items are blockified

There is an important feature when we use flexbox. When you write display: flex for the element all its child elements (flex items) are blockified.

What does it mean? All flex items that are set the display property with the inline, inline-block, inline-flex, inline-grid or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

So don't use the block, inline and inline-block values and your code will be saved clear.

don't do this

.grid {
  display: flex;
}

.item {
  display: block; /* inline or inline-block */
}

You can use this instead

.grid {
  display: flex;
}

The 6 most common mistakes developers when writing HTML and CSS

Stas Melnikov — Sun, 10 Nov 2019 19:21:54 +0000

The `placeholder` attribute instead of the `label` element

Please, stop using the placeholder attribute instead of the label element. People that use screen readers can't fill in input fields because screen readers can't read the text from the placeholder attribute.

<input type="email" placeholder="Enter your email">

I recommend using the label element for a field name and the placeholder attribute for an example of data that users should fill in.

<label for="email">Enter your email</span>
<input id="email" type="email" placeholder="e.g. example@gmail.com">

The `img` element for decorative graphics

I often see developers confuse decorative graphics with content pictures. For example, they mark up social icons using the img element.

<a href="https://twitter.com" class="social">
  <img class="social__icon" src="twitter.svg" alt="">
  <span class="social__name">Twitter</span>
</a>

But social icons are decorative icons that help users faster to understand the meaning of elements without reading text. If we remove icons we won't lose the meaning of elements. So the background-image property is the best way.

<a href="https://twitter.com" class="social">
  <span class="social__name">Twitter</span>
</a>

.social::before {
  background-image: url("twitter.svg");
}

`resize: none`

When you disable resizing textarea using resize: none you worsen accessibility. So the user can't comfortably enter data for himself.

textarea {
  width: 100%;
  height: 200px;
  resize: none;
}

You can use the min-width, max-width, min-height and max-height properties that to limit elements' sizes. Users can fill in input fields a comfortable way for himself.

textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 400px;
}

UPD 12.06.2025: One more

textarea {
  resize: vertical;
  min-height: 200px;
  max-height: 400px;
}

Using `display: block` with `position: absolute` or `position: fixed`

I often see the following code snippet:

.button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

Here display: block isn't necessary because if position: absolute or position: fixed is used browsers set display: block by default. So the following code is a full alternative to the previous one.

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}

`outline: none`

I can't use websites using my keyboard. I can't go to a link. I can't register. That happens because developers disable focus on elements when they add outline: none.

.button:focus {
  outline: none;
}

/* or */

.button:focus {
  outline: 0;
}

If you need to disable default focus don't forget to make the alternate focus state.

.button:focus {
  outline: none;
  box-shadow: 0 0 3px 0 blue;
}

UPD 12.06.2025: One more

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 3px 0 blue;
}

@media (forced-colors: active) {
  .button:focus-visible {
    outline: 3px solid;
    outline-offset: 4px;
  }
}

Empty elements

There is the practice of using empty HTML elements to style elements. For example, the hamburger markup using the empty div or span elements:

<button class="hamburger">
  <span></span>
  <span></span>
  <span></span>
</button>

.hamburger {
  width: 60px;
  height: 45px;
  position: relative;
}

.hamburger span {
  width: 100%;
  height: 9px;

  background-color: #d3531a;
  border-radius: 9px;

  position: absolute;
  left: 0;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 18px;
}

.hamburger span:nth-child(3) {
  top: 36px;
}

But you can use the ::before and ::after pseudo-elements and achieve similar results.

<button class="hamburger">
  <span class="hamburger__text">
    <span class="visually-hidden">Open menu</span>
  </span>
</button>

.hamburger {
  width: 60px;
  height: 45px;
  position: relative;
}

.hamburger::before,
.hamburger::after,
.hamburger__text::before {
  content: "";
  width: 100%;
  height: 9px;

  background-color: #d3531a;
  border-radius: 9px;

  position: absolute;
  left: 0;
}

.hamburger::before {
  top: 0;
}

.hamburger::after {
  top: 18px;
}

.hamburger__text::before {
  top: 36px;
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px !important; 
  height: 1px !important; 
  overflow: hidden;
}

Forem: Stas Melnikov

4 HTML&CSS tips improve UX of your app

nav without aria-label is a bad pattern

Throw input type="tel" in the trash

Focus styles aren't equivalent to hover styles

Decorative lines are hidden in the Window High Contrast Mode

The 9 funny CSS loaders + free source code ❤️

CSS tips to avoid bad UX

Please, stop using resize: none

Leave the content property empty to avoid unexpected voicing

aspect-ratio is a page jump pill

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

4 CSS authors that I recommend reading

Kevin Powell

Manuel Matuzovic

Temani Afif

Ahmad Shadeed

All nuances about the display property

display: block

Default behavior

Box model features

display: inline

Default behavior

Box model features

display: flex

Default behavior

Box model features

Default behavior of flex items

Box model features of flex items

display: grid

Default behavior

Default behavior of grid items

Box model features of grid items

The 3 Short December dev tips about UX&A11y

Help users with vision disabilities find a search

Thinking about a main and additional goal when we work with focus

Do you help content to camouflage?

My 3 tips about Flexbox that will make your CSS better

justify-content vs column-gap

justify-content and align-items vs margin: auto

flex items are blockified

The 6 most common mistakes developers when writing HTML and CSS

The placeholder attribute instead of the label element

The img element for decorative graphics

resize: none

Using display: block with position: absolute or position: fixed

outline: none

Empty elements

`justify-content` vs `column-gap`

`justify-content` and `align-items` vs `margin: auto`

The `placeholder` attribute instead of the `label` element

The `img` element for decorative graphics

`resize: none`

Using `display: block` with `position: absolute` or `position: fixed`

`outline: none`