Brecht De Ruyte

UX Designer

Senior Frontend Developer

Medior/Senior Java Developer

Full stack JavaScript developer

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples of where they could come in handy. I will create a mini-series out of this and for the first part, let’s start off with relative length units based on font.

Going beyond pixels and (r)ems in CSS - Relative length units based on font

In this second part of the series, let’s talk about units based on the viewport also known as "the viewport-percentage length units". A lot of developers know these, but they can create some unexpected behavior, especially in combination with scrollbars and mobile behavior. Based on some articles and videos I picked up on the web from time to time, I'd like to explain some of the common pitfalls when using viewport units.

Going beyond pixels and (r)ems in CSS - Relative length units based on the viewport

In the third part of this series, we’ll look at length units based on the container. Yes, you heard that right, we can finally get some measurements based on a containing element and that just spells awesome in my book. Currently available in all evergreen browsers, these units open up a lot of opportunities to create some smart systems and once again, I will write this up packed with a bunch of demos and cool use cases.

Going beyond pixels and (r)ems in CSS - Container query length units

Oh my, usually when writing a series like this, people tend to leave the best for last, but in this case, it seems that the best is behind us. But as I am a completionist, this last part of the CSS Units series will be about absolute units, the units you mostly - absolutely - want to avoid. But can help in certain cases.

Going beyond pixels and (r)ems in CSS - Absolute length units

Frontend 💜 OpenAPI

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. Instead of writing a list of which units are available in CSS that you can easily find on MDN as well, I thought I’d give some examples on where they could come in handy.

Going beyond pixels and (r)ems in CSS