Unnecessary use of calc() in MDN example?

Question

I just read up on the CSS function calc() in Mozilla's Developer Network.

The first example in this article uses the following CSS code:

.banner {
  position: absolute;
  left: calc(40px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

And this HTML markup:

<div class="banner">This is a banner!</div>

Pardon me, if this is an overly trivial question, but is there any reason to use left: calc(40px) or is that simply a mistake? Since there is nothing to compute, I'd just put left: 40px;.

Luthanen

MDN is a wiki - perhaps you could fix this :) – Flatiron

Looking back in the history, it originally had non-calc based fallback properties too. Looks like it dates from then, so the fixed 40px would match with the actual calc property, ie it's either based on percentages or px based calculations depending on what the browser supports. – Pistol

To be honest, that whole example is a bit odd. I'd just use left: 40px; and right: 40px; for the same result. – Stellite

I could only imagine that this is in place in order to show that calc() can - theoretically - be used like this, even if it has little relevance in practice. – Fern

Answer 1

You are correct. calc(40px) is equivalent to 40px. It's not clear if the example actually meant to demonstrate exactly that, and if so, why it felt the need to do so, as it's clearly not how calc() was intended to be used.

Perhaps it's a way to hide the left declaration from older browsers that don't understand calc(), since browsers that don't understand it would ignore the width declaration, but still apply a left: 40px (sans calc()) declaration, with adverse effects. But this is just an educated guess on my part. This is exactly the kind of situation @supports was created for; however, since calc() pre-dates @supports by several years, @supports can't be used here, and so the only other option is to take advantage of CSS's well-defined error-handling rules.

(In fact, I recently created a CSS hack that makes use of a lone calc(0s) expression to hide rules from older versions of Firefox. Ironically, that expression does reside in a @supports feature query, as Firefox introduced support for calc() with <time> values several years after @supports.)

Duly

Looking at the comments in the revision linked by @JamesThorpe, I'd guess you're right about the adverse effects of not inerpreting calc – Adlei

Answer 2

You are correct. calc() is intended to be used with expressions, and 40px is a value, not an expression. Using calc() with a value is pointless and wasteful of resources. I have no idea why it is there in the example, but most likely it is an error.

Note: The use of calc() with single values as described by BoltClock's answer is a hack. It can be useful in some cases, but it is not the original intention of calc().

Engaged

Hm, I always thought a value was an expression, too? – Fern

Reading Wikipedia and the Microsoft docs, I get a different impression. This got me curious enough to actually ask this as a question here on SO. – Fern

I think you're misinterpreting the docs. A single value alone is not an expression, but there are expressions that only have a single value. Example: In this expression var x = 5;, the value 5 itself is not an expression, but x = 5 is. Similarly, if we take the example in this question, the value 40px is not an expression, but calc(40px) is. Also left: 40px can be considered an expression since it is like saying left = 40px. – Engaged