Root Element Sizing in CSS
Richard Alvarez
Jun 28,
2018 |
Posted in
Digital Experience
CSS3 has provided developers with some great new tools. With child selectors, borders, and now animations it’s easy to miss some of the B-list stars of CSS. Let’s take a peek into the life and luxury of one of these CSS B-listers, the rem(root em). The full name should probably be the root-relative em. That is because it is relative to the root. The root here is the html element and not the direct parent like the normal em. Enough about names, let’s get into the fun stuff and create a simple example. We start by defining our parent containers: div id=’relative’ and div id=’root’. Each div has the same content except for the classes on the p tags.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<div id="relative"> <p>em</p> <div> <p class="smaller-em">em</p> <div> <p class="smallest-em">em</p> </div> </div></div><div id="root"> <p>em</p> <div> <p class="smaller-rem">em</p> <div> <p class="smallest-rem">em</p> </div> </div></div><p></p> |
Now we’ll add some CSS to support the HTML structure and show how the font sizes are set and calculated.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
html { font-size: 24px;}#relative, #root { background-color: #cdcdcd; float: left; margin: 20px; padding: 10px; font-size: 32px;}div > div { font-size: 1.8em;}p { font-size: 1.6em;}.smaller-em { font-size: 1.2em;}.smallest-em { font-size: .8em;}.smaller-rem { font-size: 1.2rem;}.smallest-rem { font-size: .8rem;} |
For the sake of this example I have used the id’s “relative” and “root” to help differentiate which container uses which unit. On the containers a font size of 32 pixels has been defined and this will be the base of the calculations for the other font-sizes. While the first tag in each container will have a font size calculated based off the root 32 pixels set it’s the child elements that will change. The first in each container will have a size of 51 pixels. This is due to the fact that both have a 1.6em size applied for the sake of comparison. The second tag in the “relative” container will have a size of 69 pixels. Multiplying the 32 pixel size by the 1.8 on the divs gives us 58. Taking that and multiplying it by the 1.2 from the class gives us the calculated font-size. As you can see the font calculation keeps compounding. If we look at the second tag in the “root” container the font size will be 29 pixels. Why is this you may ask? Well, where the normal em unit sizes based off of the direct parent and then trickles down into the children, the rem does not. The rem will always calculate the font size based on the root html font size. So in this case the html has a font size of 24 pixels and will be responsible for sizing all of the rem units. Now if you look at the third in each container you can guess how the sizing will work. The relative container will have a size of 83 pixels, but the root container will maintain its loyalty to the root and have a size of 19 pixels. I’ve thrown in a bulleted list of these numbers just as a reference point should you want it. Relative container
- 51px (32 * 1.6)
- 58px ( 32 * 1.8)
- 83px ( 58 * 1.8 * 0.8)
Root container
- 51px (32 * 1.6)
- 29px (24 * 1.2)
- 19px (24 * 0.8)
This is one of those simple CSS3 features that has managed to fly under the radar of most developers and should be used more often. It can be useful in managing large applications and not having to worry about weird parent-child relationships when it comes to font sizing. One of the best parts is the availability of this underrated star. It is supported in all modern browsers and most mobile browsers including IE9+, Chrome, Firefox, Safari, and Opera.
Want to learn more about Apexon? Consult with an expert here.