CSS Tip

No more pixel rounding issues!

One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future:

.container {
  width: calc-size(auto,round(down,size,1px)); 
  /* works with height as well */
}

It will make sure the width of your element is always an integer! No more decimal and rounding issues!

The behavior of width:auto with an upgrade.

No browser support yet but you can test it on the latest Chrome with the experimental flag enabled:

See the Pen width: auto with pixel rounding by Temani Afif (@t_afif) on CodePen.

If you are explicitly setting a size you can use the following which is widely supported:

.container {
  width: round(down,X,1px);  /* instead of width: X */

  /* X can be anything (100%,10rem,50vw,45cqi, etc) */
}

More CSS Tips