Hello internet.
Welcome to my first post-bootcamp blog article. It’s not as bad as I thought it would be! I am very excited to take you on this journey with me while I speedily acquaint myself with CSS units. Next week I hope to build on this by looking into flexbox; in particular I’m interested in thinking more about how trying to anticipate and handle different sizes/lengths of elements dictates the entire logic of CSS; flexbox seems to be another extension of this idea.
To begin with, the first thing I Googled tonight was “different css dimensions,” which brought me to a w3schools article on CSS Units. After giving some examples of different CSS properties which take “length” values, the article explains that there are two types of length units in CSS: absolute and relative.†
†I also feel it worth mentioning that Matthias, in his CSS units explainer, adds a third type of unit, viewport units, which I find a helpful category.
Absolute Lengths
ABSOLUTE LENGTH UNITS: cm, mm, in, px, pt, pc
ABSOLUTE LENGTH UNITS YOU CAN FORGET: cm, mm, in, pt, pc
Absolute lengths are real world lengths that can be measured consistently/constantly (in=inches, cm=centimeters, etc). Pixels are also listed in the w3schools article here as an absolute length, with the caveat that pixel density varies depending on the device you are using.
I understand this choice to leave pixels in the absolute length category as logical given that unless someone is switching devices, elements styled with pixel units will appear to stay constant despite, for example, resizing the browser window. However, resizing the browser window could change the size of elements styled using relative lengths.††
††Or if you want to be more precise by using Matthias’s definition, elements styled using viewport units.
Relative units we can thus understand as being relative to some sort of variable software aspect, and so pixels don’t count as relative since they are relative to an aspect of the particular piece of hardware you are using (i.e., the DPI/PPI of your device).
Before moving on to relative lengths, I’d like to quote one important point from that w3schools article:
“Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.”
I find this point noteworthy since I feel I’ve seen people use px plenty, and so it seems that this is not a best practice.
In actual practice, it probably doesn’t matter much if your div’s border property is defined as {border: 1px solid black;} rather than {border: .05rem solid black;}‡, but I like the principle of everything scaling evenly, and pixels being an absolute length precludes this.
‡Apparently the default root element (the html tag) font-size in most browsers in 16px, and so 1px should be exactly 0.0625rem, or roughly .05rem if you don't want to be too programmy about it, assuming it is relative to that 16px root element.
Relative Lengths
RELATIVE LENGTH UNITS: em, ex, ch, rem, vw, vh, vmin, vmax, %
RELATIVE LENGTH UNITS YOU CAN FORGET: ex, ch
Relative length, in contrast to absolute length, is defined relative to another length property. This I assume is where experience as a web developer becomes styling gold. Experience will allow a CSS fashionista to understand what types of elements should be sized relative to what other lengths; in this way there is basically no need to memorize dozens and dozens of different relationships between different elements of your app, instead you simply follow basic design principles and best practices that will remind you of which elements should depend on which other lengths. Those other lengths would relate to browser/viewport size or the font-size of other elements.
An em, ex, and ch will all define length relative to the font-size property of the parent, but they do so in different ways. Em is based on the overall height range covered by capital letters in that font/font-size※, ex is based on the height of the lowercase x (apparently this roughly maps to the height of most lowercase letters), and ch is based on the width of the 0 character. Basically, if you’re going to use one of these, use em.
※ “An em is a CSS unit that measures the size of a font, from the top of a font’s cap height to the bottom of its lowest descender. Originally, the em was equal to the width of the capital letter M, which is where its name originated.” (Quote from “The Principles of Beautiful Web Design”).
However, if you want to make your life easier, I think using rem is best, since it is the same as em only the element it is relative to is the root element, i.e, the html tag, meaning that it doesn’t matter how nested your html is if sizes are styled using rem units because they will all reference the root, instead of each html element referencing its parent, and so on and so on up the entire tree.
Viewport Lengths
Vw and vh are just viewport width and height, and vmin and vmax just choose whichever of these two are smaller (vmin) or larger (vmax) as the reference length. 100vh is 100% the size of the viewport height, 1vh is 1% or .01 the size of the viewport height. The viewport is just the browser window, so this essentially allows you to have your content resize itself depending on how large the window is, and by extension by how large the device screen is.
You still reading this?
If you find this topic useful, here’s Matthias’s great explainer that gets into this with a bit more depth and has some nice visual aids that should help with comprehension.
Key takeaways for me:
• use rem and em as your relative length units, emphasis on rem;
• learn more about viewport length units to understand best
practices for adapting to different device sizes;
• avoid using absolute length units since these won’t scale well;
only use them when it is important that something exactly represent
real world size or stay constant in size regardless of the size of
the device/browser window it is being viewed on;
See you next week!
Top comments (0)