readme.md 3.88 KB
Newer Older
Oskar Kalbag's avatar
Oskar Kalbag committed
1
2
3
4
5
6
7
8
9
10
11
12
13
Pixel‐parity rems
===

‘Because web development shouldn’t require a calculator.’

Why do we need a new unit?
---

Pixels are easy to work with but have two major drawbacks:

1. They are absolute values (and hence may require lots of redeclaration in breakpoints of responsive designs)
2. They do not scale properly in older browsers.

Oskar Kalbag's avatar
Oskar Kalbag committed
14
Because of this, the web development community has embraced ems. Ems have advantages because they:
Oskar Kalbag's avatar
Oskar Kalbag committed
15

Oskar Kalbag's avatar
Oskar Kalbag committed
16
17
1. Are relative units and hence it is easy to scale properties of child elements in proportion by changing a property of their parent element.
2. Scale properly in older browsers.
Oskar Kalbag's avatar
Oskar Kalbag committed
18
19
20
21
22
23

However, ems are a pain in the posterior to work with because they are set relative to the font‐size of the element, which is affected by the cascade. What does that mean? It means that you end up needing a calculator to do basic design. You also lose the ability to visualise the dimensions of things.

Thankfully, rems (root ems) make things much easier by basing their values off of the font‐size of the root HTML element. They are:

1. Relative units
Oskar Kalbag's avatar
Oskar Kalbag committed
24
2. Easy to use
Oskar Kalbag's avatar
Oskar Kalbag committed
25
26
27

However, they are not supported on older browsers. Which is why, you should provide pixel fallbacks when you are using them.

Oskar Kalbag's avatar
Oskar Kalbag committed
28
Also, since the base font size is 16px by default in browsers, you still have to do some math (specifically, you need to divide values in pixels by 16 to arrive at values in rems). That’s not ideal.
Oskar Kalbag's avatar
Oskar Kalbag committed
29
30
31
32
33
34
35
36

Enter pixel‐parity rems
---

Think about it: what would happen if you set the root font size to 1px? You’d get parity between rems and pixels. 1 rem = 1 pixel. And you know what that means? No maths! And you can visualise the dimensions of your elements again.

This is exactly what Chris Jacob suggested in [his Elastic Pixels gist](http://jsbin.com/acide4/8). And I started doing just that. And life was good. For a while.

Oskar Kalbag's avatar
Oskar Kalbag committed
37
Unfortunately, not all browsers let you set the root font size to 1px. This is a bug, not a feature. On some browsers it erroneously conflicts with the minimum font size setting in the accessibility settings (even if the actual font sizes of your elements are all larger than it). This results in your elements rendering in horrendously large proportions. And some browsers  especially some console browsers (thank‐you, [Anna Debenham](http://maban.co.uk), for letting me test with your toys)  appear to completely ignore any change to the root font size. Gotta love browsers.
Oskar Kalbag's avatar
Oskar Kalbag committed
38
39
40
41

CSS preprocessors to the rescue
---

Oskar Kalbag's avatar
Oskar Kalbag committed
42
Since we cannot reliably change the root em across browsers, the only thing left to do is to use a CSS processor to do the maths for us. A big thank‐you to [Laura Kalbag](http://laurakalbag.com) as her work with pixel fallbacks for rems via mixins is what inspired the idea and we’ve been playing with pixel‐parity rems together ever since.
Oskar Kalbag's avatar
Oskar Kalbag committed
43
44
45
46

Using a CSS pre‐processor, we can:

1. Use relative units
Oskar Kalbag's avatar
Oskar Kalbag committed
47
48
2. Have pixel parity (no need for complicated maths)
3. Have pixel fallbacks for older browsers
Oskar Kalbag's avatar
Oskar Kalbag committed
49

Oskar Kalbag's avatar
Oskar Kalbag committed
50
Ah, CSS nirvana!
Oskar Kalbag's avatar
Oskar Kalbag committed
51

Oskar Kalbag's avatar
Oskar Kalbag committed
52
So pixel‐parity rems are rems where 1 rem = 1 pixel. They behave as if you set the root em to 1px without actually doing that by using CSS preprocessor mixins to automatically divide the values you pass by 16 (the default root em).
Oskar Kalbag's avatar
Oskar Kalbag committed
53
54
55

I was hesitant to publicise this until I had used it in a few real‐world projects in case any issues cropped up but Laura and I have both used the technique in multiple projects now and we’re both confident that it works. It also makes our lives much easier by reducing our cognitive load so we can concentrate on, you know, actually designing and developing sites.

Oskar Kalbag's avatar
Oskar Kalbag committed
56
This repository will, in time, contain implementations of pixel‐parity rems in difference CSS preprocessors. For the time being it has the one that I am working on, which is written in [Stylus](http://learnboost.github.com/stylus/). Laura’s been working with pixel‐parity rems in SASS, so an implementation in Sass should be added shortly.