It's time to get back with your ex (units)

Have you ever looked up the available CSS units?
Well, you must have. But have you looked up all of them?
The basic ones, px, %, em
, are mostly very well known. But there are
some that have been there since CSS1, that you probably don't know at
all.
Have you ever heard of the ex
unit before?
The ex
unit
Browser support
Everything, right back to IE3.
For reference, this is what IE3 looks like:
What does it mean?
1ex
is equal to the height of the letter 'x' relative to the element's
font-size and font-family. If these are unspecified, they take the
closest defined ancestor's values.
<div style="font-size: 14px; font-family: Arial;">
Arial 14px
<div style="height: 1ex; width: 200px; background: red; display: inline-block;"></div>
</div>
<div style="font-size: 30px; font-family: Courier;">
Courier 30px
<div style="height: 1ex; width: 200px; background: blue; display: inline-block;"></div>
</div>
Why is it useful?
On the surface, it is very similar to the em
unit, as it is relative
to the active font-size of the element.
The key perks are:
2ex
is often the best CSS approximation of the actual height of the text as it is font specific, rather than the invisible box containing the glyph, known as the 'em-square' in typography.- Some people who use
em
don't know what it is, but they might look upex
. - It's useful for custom superscript text.
- You can be a length unit elitist hipster.
Here's some (highly constrived) examples:
You can use it to produce a simple cross-browser coloured underline:
Link 1
Link 2
Link 3a[href] { text-decoration: none; border-bottom: .12ex solid red; }
<a href='#' style='font-size: 12px'>Link 1</a> <a href='#' style='font-size: 18px'>Link 2</a> <a href='#' style='font-size: 24px'>Link 3</a>
Superscript:
x2
x2
x2
.super-me { font-size: 50%; /* half the size */ bottom: 2ex; /* twice the x-height, as the x is now half the size ^ */ position: relative; }
Letter spacing could be in
ex
:
BRAND
BRAND
BRAND.brand { letter-spacing: .5ex; }
~~Copy linebreaks (e.g. landing page multiline headers)~~
I have learnt since that it behaves inconsistently across browsers (Source)
Break line here and no later. Break line here and no later. Break line here and no later.#breaks-after-here { /* always breaks after 'here', even if font size changes */ max-width: 14ex; } .intro { font-size: 12px; } @media (min-width: 800px) { .intro { font-size: 18px; } } @media (min-width: 1200px) { .intro { font-size: 24px; } }