Unnecessary Use Of Calc() In Mdn Example?

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: cal

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

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