The new (and old) CSS units you've never heard about
Tags: css, webdev
Published: 2018-06-11 21:56:08

---
title: The new (and old) CSS units you've never heard about
published: true
description: Exploring the newly defined CSS units that have been recently or are going to be implemented in browsers. Plus some other older trivia.
tags: css, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sf8of1f9oxajsj3bsehn.jpg
---

JavaScript is evolving *fast*, recently, but it's not like the other web development language companions are set to stone either.

CSS is evolving too, and even though Houdini is probably going to set a new breakthrough in CSS development, it's unfortunately far beyond wide adoption. So we have the usual drill of expert meetings, that produce new specifications and so on... Not like TC39's fast-paced progression, but still.

Talking about CSS that you might - but more probably might not! - have heard, and even less used, about the units described in this article. And no, not like the "old" `vw` and `vh` (which I happen to *still* have to explain to those less proficient in CSS).

The ones listed below are the new CSS units that are going to be specified in the upcoming [CSS Values and Units Module Level 4](https://drafts.csswg.org/css-values-4/).

## `lh` and `rlh`

Things get interesting right from the start. `lh` is equal to the **current line height**, and that could become a very neat ally when computing the height of text content. Unfortunately, *no browser* supports it.

`rlh` is, on the other hand, the equivalent of what `rem` is to `em`: the line height on the root element.

![Many of the font glyph metrics is an image](https://i.stack.imgur.com/crGOe.png)

## `vi` and `vb`

Another interesting addition, and similar to `vw` and `vh`, they're percentages relative to the viewport. Specifically:

* `vi` is 1% of the size of the viewport in the *inline* direction;
* `vb` is 1% of the size of the viewport in the *block* direction.

What are these ["inline" and "block" axes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties#Block_vs._inline)? For those languages that are written horizontally, like English or Arabic (as a right-to-left example), they're respectively the horizontal and the vertical direction, making these two units the equivalent of `vw` and `vh`.

But for those languages that are written *vertically* (Japanese comes to mind), those directions are *switched*.

We've used this distinction in CSS since the beginning (as in the `display` property, for example), so now they're used coherently as more language-aware CSS specifications are created.

Too bad *no browser*, again, support these units so far 👎.

## `ic`

Talking about internationalization, `ic` is the Eastern equivalent of `ch`, which represents the size of the character `0`. `ic` is, instead, the size of the CJK (Chinese/Japanese/Korean) ideograph `水` ("water", U+6C34), so it can be roughly interpreted as "ideograph count".

But what's this "size"? It's the so-called ["advance measure"](https://drafts.csswg.org/css-values-4/#length-advance-measure): if the text is laid out horizontally, it's the width; otherwise it's the height. Notice that the same concept *applies to `ch` too!*

Aaand still no support from browser vendors.

## `cap`

It's the measure of the so called *cap-height*. [The spec](https://drafts.csswg.org/css-values-4/#cap) defines cap-height as "approximately equal to the height of a capital Latin letter". There's an algorithm to compute that, even for fonts that do *not* include Latin letters, but I won't report the details.

Also because, again, we can't still use them in any browser.

# Now something more anecdotal...

Let's have a look at the older spec (Level 3), because even if it *should* be widely supported and used, it still has some less known parts...

## `turn` and brothers

This is for warming you up, as it should be a little more known than the others.

We've used `deg` to rotate things with `transform`, right? Well, one `turn` is equivalent to 360 `deg`. It's as simple as that. Quite useful for animations (especially for 360-rotations) and progression values computed in JavaScript.

But wait, there's more! Also `grad` and `rad` are specified, and yes, you guessed it: they're gradians and radians, respectively.

And they're *all* supported by every browser (IE since version 9), although I don't see a real place for gradians, whereas radians can be used for a direct usage from JavaScript's trigonometric functions.

## `Q`

This one *should* be supported by every browser, as it's part of Level 3. As a matter of fact, only Firefox supports it, since the relatively recent version 49 (September 2016). *Edit: apparently, Chrome supports too it since version 63.*

So, what's a `Q`? It's simply **0.25mm**, a quarter of millimeter.

And why did we feel the need for this? Apparently, it's used in printing typography. *In Japan.* Where, apparently, they don't use points or any other imperial unit whatsoever (and that's a 👍 for me).

## Aspect ratio

Not really a unit as it should be a pure value, but a measure anyway. It's specifically expressed as two positive integers separated by a `/` (a slash, or "solidus" in Unicode terms).

Where can we use it? Why, in media queries of course! Example:

```css
@media screen and (min-aspect-ratio: 16/10) {
  /* something for wide screens */
}
```

And the good news is: it's supported by every browser! Hooray! 🎉

## `Hz` and `kHz`

... Wait, what? As we've learnt in high school, aren't those units of *frequency*? What do they have to do with CSS?

To answer the questions: yes, they are; and nothing, as *no CSS property*, as I'm writing, requires a frequency. And yet, frequency units have been defined: why?

Probably for future usage in case of a specification of a module targetting speech synthesis or some other aural output. At that time, there actually *was* a [CSS Aural style sheets module](https://www.w3.org/TR/CSS21/aural.html) in the works, which does define properties that make use of a frequency, but that module has never seen the light.

That module has been superseded by a new one, compatible with the [Speech Synthesis Markup Language (SSML)](https://www.w3.org/TR/speech-synthesis/), which responds to the name of [CSS Speech](https://www.w3.org/TR/css3-speech/). It's still in the works and again defines properties (like `voice-pitch`) that require frequencies, but it's not ready yet.

So it's pretty understandable if no browser supports frequency units: we wouldn't be able to use them anyway!

## Future plans?

In conclusion, dear reader, have you ever used or planned to use one of the above units? Or maybe, you're planning it right now?