Introduction

And then your buttons and elements can go like:

.button {
  width: calc(2.5 * var(--inch)); /* Two and a half inch long! */
  height: calc(1 / 3 * var(--inch));
}

Do not use this in production This is an experimental chapter with an immature technology. It is not safe for use in production for any kind of service that your users may rely on. :::

CSS Standard In the past, CSS standards required browsers to display absolute units correctly even on a computer screens. But since the number of incorrect implementations always outnumbered the correct ones… the requirement was finally dropped in 2011. source

CSS Custom Properties can potentially reverse and solve for this past requirement via crowdsourcing digital mappings for as many hardware as possible. Read more. :::