1

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;.

user1438038
  • 5,821
  • 6
  • 60
  • 94
  • 1
    MDN is a wiki - perhaps you could fix this :) – Joe Clay Dec 19 '17 at 13:48
  • 4
    Looking back in the history, [it originally had](https://developer.mozilla.org/en-US/docs/Web/CSS/calc$revision/1305127) 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. – James Thorpe Dec 19 '17 at 13:48
  • To be honest, that whole example is a bit odd. I'd just use `left: 40px;` and `right: 40px;` for the same result. – Lucas Dec 19 '17 at 13:50
  • 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. – domsson Dec 19 '17 at 13:51

2 Answers2

3

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.)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

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().

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
  • 2
    Hm, I always thought a [value was an expression](https://en.wikipedia.org/wiki/Expression_(computer_science)), too? – domsson Dec 19 '17 at 13:54
  • 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](https://stackoverflow.com/questions/47888846/is-a-single-constant-value-considered-an-expression). – domsson Dec 19 '17 at 14:14
  • 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`. – Racil Hilan Dec 19 '17 at 14:22