Working with relative units and custom properties

Question 1

What are ems?

Answer 1

In CSS, 1em means the font size of the current element; its exact value varies depending on the element you’re applying it to.

Values declared using relative units are evaluated by the browser to an absolute value, called the computed value.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 2

Why can it be confusing working with em units?

Answer 2

One thing to keep in mind when using em is that when you set the font-size in it, it’s based on the nearest parent element with a declared font-size.

.parent {  
  font-size: 20px;
}

.child { 
  /* This is based on 20px, so it's 30px */
  font-size: 1.5em;
}

But when we size other things in em, it’s now based on the newly-adjusted font-size of the current element. For example:

.parent {
   font-size: 20px;
}

.child {
   /* This is based on 20px, so it's 30px */
   font-size: 1.5em;
   /* This is based on 1.5em (not 20px), so it's also 30px */
   border: 1em solid black;
}

It just can be weird to see two different em values in the same element evaluating to the same end value.

This is in addition to the fact that the cascading effect of ems is sometimes challenging in itself. If you size things inside components in ems and those components can be nested, that can cause cascading of sizes that may be undesirable.

Source css-tricks

Question 3

What is the shrinking font problem?

Answer 3

Shrinking text occurs when you nest lists several levels deep and apply an em-based font size to each level.

For example:

CSS

body {
  font-size: 16px;
}

ul {
  font-size: .8em;
}

HTML

<ul>
  <li>Top level
    <ul>
      <li>Second level
        <ul>
          <li>Third level
            <ul>
              <li>Fourth level
                <ul>
                  <li>Fifth level li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Each list has a font size 0.8 times that of its parent. This means the first list has a font size of 12.8 px, but the next one down is 10.24 px (12.8 px × 0.8), and the third level is 8.192 px, and so on. Similarly, if you specified a size larger than 1 em, the text would continually grow instead.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 4

How can you solve the shrinking font problem?

Answer 4

Using rems to specify the font-size of the nested element with em-based font size.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 5

What are Rems?

Answer 5

rem is short for root em. Instead of being relative to the current element, rems are relative to the root element.

No matter where you apply it in the document, 1.2rem has the same computed value: 1.2 times the font size of the root element.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 6

When should we use rems, ems and pixels?

Answer 6

When in doubt, use:

Rems - for font sizes and paddings.
Pixels - for borders, and
Ems - for most other properties.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 7

What is wrong with he font-size: .626em; anti-pattern?

Answer 7

This takes the browser’s default font size, 16px, and scales it down to 10px. This practice simplifies the math: If your designer tells you to make the font 14px, you can easily divide by 10 in your head and type 1.4rem, all while still using relative units.

But there are two problems:

1. It forces you to write a lot of duplicate styles. Ten pixels is too small for most text, so you’ll have to override it throughout the page.
2. The second problem is that when you do this, you’re still thinking in pixels. You might type 1.4rem into your code, but in your mind, you’re still thinking “14 pixels.” On a responsive web, you should get comfortable with “fuzzy” values.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 8

List all Viewport-relative units and some of its uses

Answer 8

• vh—1/100th of the viewport height
• vw—1/100th of the viewport width
• vmin—1/100th of the smaller dimension, height or width (IE9 supports vm instead of vmin)
• vmax—1/100th of the larger dimension, height or width (not supported in IE)

The viewport-relative lengths are great for things like making a large hero image fill the screen. Your image can be inside a long container, but setting the image height to 100vh, makes it exactly the height of the viewport.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 9

How can you make a site’s font size responsive to the viewport width?

Answer 9

One application for viewport-relative units that may not be immediately obvious is font size.

If you applied font-size: 2vw to an element. On a desktop monitor at 1200px, this evaluates to 24px (2% of 1,200). And, the nice thing is, the element scales smoothly between the all sizes. This means there’re no sudden breakpoint changes; it transitions incrementally as the viewport size changes.

Unfortunately, 24px is a bit too large on a big screen. And worse, it scales all the way down to 7.5px on an iPhone 6.

You can use calc() to combine em units with vw units. Avoiding the need to use media queries to define the base font size.

\:root {
  font-size: calc(0.5em + 1vw);
}

The 0.5em here operates as a sort of minimum font size, and the 1vw adds a responsive scalar.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 10

What properties allow for unitless values?

Answer 10

Some properties allow for unitless values (that is, a number with no specified unit).
Properties that support this include:

line-height, z-index, and font-weight (700 is equivalent to bold; 400 is equivalent to normal, and so on).

You can also use the unitless value 0 anywhere a length unit (such as px, em, or rem) is required because, in these cases, the unit does not matter, 0px equals 0% equals 0em.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 11

What are unitless values?

Answer 11

When you use a unitless number, that declared value is inherited, meaning its computed value is recalculated for each inheriting child element. This will almost always be the result you want.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 12

Why should you use unitless values to define the line-height property?

Answer 12

When you use a unitless number, that declared value is inherited, meaning its computed value is recalculated for each inheriting child element. Using a unitless number lets you set the line height on the body and then forget about it for the rest of the page, unless there are particular places where you want to make an exception.

Therefore always define the default line-height unitless

\:root {
  line-height: 1.2;
}

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 13

How do you define a custom property aka CSS variables?

Answer 13

To define a custom property, you declare it much like any other CSS property. For example:

\:root {
  --main-font: Helvetica, Arial, sans-serif;
}

The name must begin with two hyphens (--) to distinguish it from CSS properties, followed by whatever name you’d like to use. Variables must be declared inside a declaration block.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 14

How can you use a CSS custom property (CSS variable)?

Answer 14

A function called var() allows the use of variables.

\:root {
  --main-font: Helvetica, Arial, sans-serif;
  --brand-color: #369;
}

p {
  font-family: var(--main-font);
  color: var(--brand-color, blue);
}

Note: The var()function accepts a second parameter, which specifies a fallback value. If the variable specified in the first parameter is not defined, then the second value is used instead.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 15

What happens if a var() function evaluates to an invalid value?

Answer 15

The property will be set to its initial value.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 16

How can you change custom properties dynamically?

Answer 16

You can define the same variable inside multiple selectors, and the variable will have a different value for various parts of the page.

\:root {
  --main-bg: #fff;
  --main-color: #000;
}

.panel {
  font-size: 1rem;
  padding: 1em;
  border: 1px solid #999;
  border-radius: 0.5em;
  background-color: var(--main-bg);
  color: var(--main-color);
}

.dark {
  --main-bg: #333;
  --main-color: #fff;
}

The panel class makes use of the previously defined variables but, there is a second css ruleset with selector .dark that overwrites the values of the :root selector.

Any element that uses panel and dark classes will have a dark background and white text.

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.

Question 17

How can you change custom properties with javascript?

Answer 17

Assuming you have this custom property:

\:root {
  --main-bg: #fff;
}

You could get the value of “–main-bg” with the following JS code:

const rootElement = document.documentElement;
const styles = getComputedStyle(rootElement);
const mainColor = styles.getPropertyValue('--main-bg')

And you can overwrite the value with the following JS code:

var rootElement = document.documentElement;
rootElement.style.setProperty('--main-bg', '#cdf')

Source: Keith J. Grant (2018). CSS in Depth. Manning Publications.