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 fonnt-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 traditional viewport-relative units

Answer 8

• vh - 1% of the viewport height
• vw - 1% of the viewport width
• vi - 1% of the size of the viewport’s inline axis.
• vb - 1% of the size of the viewport’s block axis.
• vmin - 1% of the smaller dimension, height or width (IE9 supports vm instead of vmin)
• vmax - `% 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

List all the new large/small viewport-relative units

Answer 9

• lvh - 1% of the large viewport height
• lvw - 1% of the large viewport width
• lvi - 1% of the size of the large viewport’s inline axis.
• lvb - 1% of the size of the large viewport’s block axis.
• svh - 1% of the small viewport height
• svw - 1% of the small viewport width
• svi - 1% of the size of the small viewport’s inline axis.
• svb - 1% of the size of the small viewport’s block axis.

Large viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted.

Small Viewport: The viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be expanded.

“The large, small, and dynamic viewport units | Blog | web.dev” (web.dev). Retrieved October 18, 2024.

Question 10

Explain dynamic viewport-relative units

Answer 10

Dynamic viewport-relative units are units that have dynamic consideration of the UA UI:

• When the dynamic toolbars are expanded, the dynamic viewport is equal to the size of the small viewport.
• When the dynamic toolbars are retracted, the dynamic viewport is equal to the size of the large viewport.

Its accompanied units have the dv prefix: dvw, dvh, dvi, dvb, dvmin, and dvmax. Their sizes are clamped between their lv* and sv* counterparts.

• dvh - 1% of the dynamic viewport height
• dvw - 1% of the dynamic viewport width
• dvi - 1% of the size of the dynamic viewport’s inline axis.
• dvb - 1% of the size of the dynamic viewport’s block axis.
• dvmin - 1% of the smaller dimension, height or width
• dvmax - `1% of the larger dimension, height or width

“The large, small, and dynamic viewport units | Blog | web.dev” (web.dev). Retrieved October 18, 2024.

Question 11

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

Answer 11

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 rem units with vw units. Avoiding the need to use media queries to define the base font size.

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

The 0.5rem 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 12

What properties allow for unitless values?

Answer 12

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 13

What are unitless values?

Answer 13

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 14

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

Answer 14

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 15

How do you define a custom property aka CSS variables?

Answer 15

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 16

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

Answer 16

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 17

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

Answer 17

The property will be set to its initial value.

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

Question 18

How can you change custom properties dynamically?

Answer 18

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 19

How can you change custom properties with javascript?

Answer 19

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.