justin-c (36) [Avatar] Offline
#1
Hi,

Great book so far smilie

I made a note of a few things while reading chapter 2:

- - -

Just below Listing 2.19, could you please spell out how we get to a base font size that scales from `11.75.px` on an iPhone 6 up to 20px in a 1200px browser window? (i.e. the math of `calc(0.5em + 1vw)` given an, I guess, default font size of 16px and a viewport of X for iPhone 6 and a viewport 1200px for the browser).

- - -

Right before section 2.6:

> When you use a unitless number, that declared value is inherited, meaning its computed value is re-calculated for each inheriting child element. This will almost always the result you want. Using a unitless number allows you to set the line-height on the body and then forget about it on the rest of the page, unless there are particular places where you want to make an exception.

I understand that if you include the unit, the value is computed and then inherited. If you do not include the unit, the value is computed for each inheriting child element... but I don't understand *how* the value is calculated without a unit. Is it `1.2em` or `1.2px` or something else? `em` is what makes most sense but how is this decision made by the browser?

So in the case of the example given before the snippet above:

1. Case line-height is 1.2em:
a) body has line-height of 1.2. * 16 = 19.2
b) .about-us has line-height of 19.2 because it's inherited
2. Case line-height is 1.2:
a) body has line-height of 1.2. * 16 = 19.2
b) .about-us has line-height of (2 * 16) * 1.2 = 38.4

That makes sense (I suggest doing the side-by-side comparison of the two cases like above). But I still don't understand why `1.2` is multiplied in 2b (i.e. assuming `em`). Why isn't it added (assuming `px` - it was not specified so that's valid right?).

- - -

Re the following note just before section 2.6.1:

> If a var() function evaluates to an invalid value, the property will be set to its initial value. For example, if the variable in padding: var(--brand-color) evaluates to a color, it would be an invalid padding value. Thus the padding would be set to 0 instead.

If `padding` were `1.2em` before an attempt at setting it to `var(--brand-color)` is made, will it be kept at `1.2em` after, or will it be set to `0`?

I tried something similar and it seems its previous value is kept (i.e. `1.2em` in this case). It's probably worth being more explicit about this in the note.

- - -

Re custom properties: How can we get started using this feature today? Is there a way to detect support for this and fall back to something else? Is the suggested way `@supports`? Is `var()` function part of "custom properties"? (if not, does it make sense to use `var()`'s default to fall back on if custom properties are not supported?).

- - -

Cheers
Keith J Grant (27) [Avatar] Offline
#2
Thanks for the feedback! I’ll see if I can clarify those points a bit more in the book.

A unitless line-height is interpreted much like an em value. So if the computed font size is 32px (e.g. 2em * 16px inherited font size), a line height of 1.2 is 32px * 1.2 = 38.4px.


I will also address the issue of fallback values more clearly, especially in regards to custom properties.
justin-c (36) [Avatar] Offline
#3
Cool thanks Keith!