Calculating square-roots with CSS

Question

Is it possible to do a square-root function in the calc() function of my CSS file? I've read that calc() only supports the basic operators like + - * and /.

Ideally, it'd look something like this:

width: calc(50% - (sqrt(7200))px); 

If calc() do not have a sqrt function, what can I do?

Answer 1

As others suggested, if dealing with repeat values, just use a preprocessor, or copy/paste if from the calculator directly, e.g. sqrt(2) = 1.4142135623730950488016887242097.

But if you really have to use a dynamic way to calculate the square root in CSS dynamically and without JS, there is of course. While a precision of 5 seems enough for most cases, for the number 7200 in your example we should bump it up to a precision of 9+, unless you could make an initial guess, which is closer to the result, but that’s out of question for now.

But without optimization this will bloat your document by 50.000+ extra characters, if using the generated output from the other answer/suggestion.

Since we use it dynamically, we ought to use CSS variables, which limits the browser compatibility a bit, but it already has a global support of about 88% by now (Mar/2018).

Here we go:

#test {      --number: 7200;      --guess01: calc((var(--number) + ( var(--number) / var(--number))) / 2);      --guess02: calc((var(--guess01) + ( var(--number) / var(--guess01))) / 2);      --guess03: calc((var(--guess02) + ( var(--number) / var(--guess02))) / 2);      --guess04: calc((var(--guess03) + ( var(--number) / var(--guess03))) / 2);      --guess05: calc((var(--guess04) + ( var(--number) / var(--guess04))) / 2);      --guess06: calc((var(--guess05) + ( var(--number) / var(--guess05))) / 2);      --guess07: calc((var(--guess06) + ( var(--number) / var(--guess06))) / 2);      --guess08: calc((var(--guess07) + ( var(--number) / var(--guess07))) / 2);      --guess09: calc((var(--guess08) + ( var(--number) / var(--guess08))) / 2);      --guess10: calc((var(--guess09) + ( var(--number) / var(--guess09))) / 2);        width:calc(50% - (var(--guess10) * 1px));      height:200px;      background: black;      padding:20px;      color:#fff;  }

<div id="test">Width is 50% - sqrt(7200) in px</div>

Answer 2

You can use a preprocessing system for CSS. For example, you can use Compass and Sass. Compass has a sqrt function.

Why? Perhaps for print styling, or maybe to experiment with the golden mean.