Can someone tell me why this CSS calc function isn't working? When I inspect element on Chrome, it says 'Invalid property value'.
width: calc((100vw - 14px * 2) / (270px + 11px * 2));
For future googlers:
The unhelpful "invalid property value" message in DevTools might just mean that you need white space around your + - / * operators.
Incorrect (invalid property value):
width:calc(100vh-60px) <== no spaces around minus sign
Correct:
width:calc(100vh - 60px) <== white space around the minus sign
The OP's question above does not have this problem, but while googling an answer to this error message this is the first resource I found, so it should have an answer dedicated to this common error.
References:
CSS3 calc() not working in latest chrome
https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
You can't divide by units like px, only numbers.
When using calc() you can't divide by pixels, you can only divide by unitless numbers. Also, the number you are dividing has to have a certain unit like px, em, vh, vw.
For example, if you need to set a width of an element you should use:
width: (100px / 2); //this equals to 50px
An important note is to make sure you put spaces between the operator signs. This calc() article provides further detailed explanation on the function.
As #cssyphys noted above, you have to have spaces around your minus sign. However, if you are using ASP.NET MVC's bundler/minifier you find that it removes the spaces so you get the noted error.
If you are using plain CSS3, the following expression can be used in CSS and won't get minified:
width: calc((100%) - 50px);
HOWEVER, if you are using LESS (and perhaps other CSS preprocessors?), the preprocessor will "optimize" your expression and rip out your inner parens, again resulting in something ASP.NET will botch up. To get around that, use LESS's "don't process" tilde expression:
width: calc(~"(100%) - 50px");
I had to go back and change a bunch of calc() statements but so worth it to get back my ASP.NET minification.
As Stephen Thomas has answered, you can't divide by units. To get around this, just divide the numbers as numbers and then assign the unit of measurement by multiplying the result by 1 unit of the units you're interested in. In your nested scenario you'd need to figure out what unit of measurement you were after in the end so that you could divide the numbers and then assign the result to a px or vw unit of measurement.
I just came across this error because one SCSS variable was set to zero:
WRONG:
$card-border-width: 0;
This eventually provoked Chrome's message Invalid property value in answer to the CSS result border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0).
RIGHT:
$card-border-width: 0rem;
(giving border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem))
Related
I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px). I've tried several variations of this:
top: max(0, 120vh - 271px);
top: max(0, (120vh - 271px));
top: max(0, calc(120vh - 271px));
Is there something wrong with my syntax? I keep getting Chrome telling me that this is an invalid property error.
In practice, I'm actually using CSS variables for the numbers. so 120vh is actually var(--height) or something like that. When I use CSS variables, the line just doesn't do anything. It doesn't apply the style, and I don't get any warnings. What am I doing wrong here?
I'm using the newest version of Chrome (83 I believe), so this should be supported.
You need to add a unit to 0 otherwise it's confusing for the browser to handle the comparison between a uniteless value (a <number>) and a value with unit (a <length>) and the top property accept a <length> not a <number>
top: max(0px, 120vh - 271px)
To understand this, you need to follow the specification:
The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.
Then for calculations:
A calc() function contains a single calculation which is a sequence of values interspersed with operators, and possibly grouped by parentheses (matching the <calc-sum> grammar),
So the content of min()/max() is treated like the one of calc() then from the type checking
A math function can be many possible types, such as <length>, <number>, etc., depending on the calculations it contains, as defined below. It can be used anywhere a value of that type is allowed.
and
Note: Altho there are a few properties in which a bare <number> becomes a <length> at used-value time (specifically, line-height and tab-size), <number>s never become "length-like" in calc(). They always stay as <number>s.
You may get surprised but using top:0 is valid while top:min(0) or top:max(0) is not. To make them valid you need to add the unit.
But you can use opacity: min(0) for example since opacity accept a number as argument.
Worth to note that the same also apply to clamp() since it's equivalent to max(MIN, min(VAL, MAX))
Related: Why doesn't css-calc() work when using 0 inside the equation?
I'm using calc() to set the top: attribute in a class. I need some help understanding how calc() gets used - two equations I believe should have the same result don't. (The top equation isn't practical, I'm just trying to debug a larger issue and noticed these two don't have the same result)
calc(-10px + ((1 - 1) * 0));
calc(-10px);
The first equation is invalid because it will lead to calc(-10px + 0)
Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ref
And if the result was non-zero you will fall into this:
At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.
The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.
Related question: Why doesn't min() (or max()) work with unitless 0?
Recently I've started using the calc(...) method within CSS. I quickly learned that code such as: width: calc(100%-2) will not work, though adding white-space before and after the - operator will fix the problem and the calc method will function properly.
After doing a bit of research I found multiple blog posts reference that the white-space is required and many have even pointed to the specification (CSS3 8.1.1) which states:
In addition, whitespace is required on both sides of the + and -
operators. (The * and / operaters can be used without whitespace
around them.)
Now, clearly, the spec tells us that these operators must be wrapped in white-space, but why? I've read further within the spec (through sections 8.1.2-4) and if it's explained in these additional portions, I'm not understanding the reasoning.
In simple terms, could someone explain why it was specified that calc(100% - 1) or even calc(100%/2) is acceptable syntax but not calc(100%-1)?
The - character is one of the allowed characters in CSS idents. Judging by the resolution given here, it seems they wanted to prevent syntactic ambiguities that could arise from using - without whitespace, especially with keyword values such as min-content (although AFAIK keyword values aren't yet allowed within calc() — correct me if I'm wrong).
Not everyone agrees with this resolution, though.
The Mozilla Developer Network explains it quite well:
Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage.
The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.
I think you should first consider how do CSSs identify a length. A length is defined as an optional sign followed by a module and an optional unit of measure (although many properties actually require it):
<CSSlength> := [<sign>]<module>[<unit>]
So, for example, valid CSS lengths are:
-3px
100em
+10pc
0
91
5%
Defining a length like this, the CSS engine parses the following:
calc(100% -1px);
as a length followed by another length. In this case it would be 100% followed by -1px, which doesn't make sense to calc() at all. This is also explained in the relative MDN documentation page.
In order to put two lengths in relation you need to use a distinct operator, therefore, following the above logic, you'll need to use whitespaces:
calc(100% - 1px);
I'm trying to use LESS css to do the following:
width: ((480/1366)*100)+'%';
The problem though is that the output becomes:
width: 35.13909224011713 '%';
How do I make it workable? ie.:
width: 35.13909224011713%;
It is possible to use string interpolation:
#myvar: ((480/1366)*100);
width: ~"#{myvar}%";
That will output
width: 35.13909224011713%;
Additionally, if you want it to be rounded, you can use round().
Even though this question is quite old, I want to add a few more examples about adding. Less will set your units to whatever is being operated on.
10px + 20px
will output 30px
(20/200) * 100%
will output 10%
So with units you dont need to concatenate the unit measurement.
I have found that adding 0 helps when you dont know what the unit value might be.
.mixin(#x, #y){
#result: (#x / #y) * 100;
}
.my_class {
.mixin(20, 100);
width: #result + 0%; // you can use any unit here
}
The above class will have a width of 20%. If we added with px, it would be 20px.
For some reason the least verbose and most obvious method is sort of missing here (it's in Richard Testani answer actually but there it's hindered with further code leading to a wrong direction). So...
The answer to original:
width: ((480/1366)*100)+'%';
is as simple as:
width: (480/1366*100%);
Speaking of percentage:
it does the trick too but personally I'd never use it for its verbosity and non-readability. At quick scanning percentage(480/1366) reads just like peekabooze(480/1366) so you have to stop and stare at it to get a clue. Contrary the explicit appearance of % in 480/1366*100% (or 480 / 1366 * 100%) makes it more easily noticeable.
I've seen this notation used a lot, and I was wondering, is there is any notable difference between these two notations?
element#id
{
property: 0;
}
and
element#id
{
property: 0px;
}
I use property: 0px; all the time, as I find it cleaner looking, but I'm not really sure if the browser interprets 0px differently than 0.
Does anyone know which one is better or correct?
Unit identifiers are optional, but there is no noted performance increase (although you are saving two characters).
CSS2 - From W3C CSS 2.1 Specification for Syntax and basic data types:
The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.
(Emphasis mine)
CSS3 - From W3C CSS Values and Units Module Level 3 (Currently in Candidate Recommendation at the time of this writing)
For zero lengths the unit identifier is optional (i.e. can be syntactically represented as the 0).
While the unit is optional when the value is 0, I tend to leave it in, as I can then tweak the values with Chrome's Developer Tools by clicking on the value and pressing the up/down arrow keys. Without a unit, that isn't really possible.
Also, CSS minifiers strip the units off of 0 values anyways, so it won't really matter in the end.
They are the same. The browser interprets both as 0, so go with whatever is more readable for you.
Zero of anything is zero. 0px = 0% = 0em = 0pt = 0
Most people leave the unit off because it is simply unnecessary clutter.
As far as I'm aware there is no difference between them, since 0px = 0em = 0ex = 0% = 0. It's purely up to you, as the developer, to decide what you like best (unless you have corporate coding standards that you need to follow, of course).
From most of the code samples I've seen, most people use the unitless version. To me, it just looks cleaner. If you're pushing a significant amount of data (say, if you're Google), those two bytes can add up to a lot of bandwidth, especially since you're quite likely to repeat them multiple times in your stylesheet.
Zero pixels is equal to zero inches and zero meters and so forth. 0 is all you need.
I personally find 0 cleaner than 0px. That's two extra characters that can add up. Why add extra bytes when you don't need to. I have see padding: 0px 0px 0px 0px which can easily be expressed as padding: 0 way too often.
You can use either - my best advice is not to worry too much but be consistent in doing it either one way or the other. I personally prefer to specify '0px' for the following reasons:
Using 0px makes things more consistent with all of the other 'px' sizes you've specified
It's also more verbose and makes it very clear that you're setting a zero length rather than a 'switch this off' flag
It's slightly easier to tweak a '0px' value to make it another value if required
zero-units Zero values don't need units. An easy way to save bytes in CSS is not include units when a value is 0. For instance, 0px and 0 are the exact same ...
http://csslint.net/index.html
If somebody gives you 0 EUR. It is that same like 0 Dollar or 0 Zloty etc. What you got is nothing = 0. That is why in the case of 0 you dont need to set a unit.
As the others say, it doesn't really matter if its 0, though I choose to add the measurements to all of my values so anyone else looking at my CSS files can gauge what measurements they're likely to deal with elsewhere.
I know that there should be no difference between 0px and 0 but I've found that sometimes there is.
I was trying to center an object like this:
position: absolute;
left: max(0px, calc((100vw - 400px)/2));
max-width: 400px;
It works but if you substitute 0px with 0 it doesn't.