CSS Calc with Variables and Multiplication
up vote
0
down vote
favorite
I'm validating my CSS using the Nu Html Checker:
https://validator.w3.org/nu/
Consider the following CSS:
:root {
--target-size: 48px;
}
.test1 {
flex: 0 0 calc(var(--target-size) + 1px);
}
.test2 {
min-height: calc(var(--target-size) - 0.5rem);
}
.test3 {
flex: 0 0 calc(320px - 3 * var(--target-size));
}
The validator reports no error with .test1 and .test2.
However, for .test3, the validator reports this error:
Error: flex: The types are incompatible.
I know that the CSS rules stipulates that for multiplication, at least one of the arguments must be a <number>. I don't see that violated. I've tried nesting the multiplication in another calc(), but the error persists.
Any idea what's wrong with that rule and how to correct it?
css3
asked Nov 10 at 23:39
claytoncarney
15714
add a comment |
up vote
0
down vote
favorite
I'm validating my CSS using the Nu Html Checker:
https://validator.w3.org/nu/
Consider the following CSS:
:root {
--target-size: 48px;
}
.test1 {
flex: 0 0 calc(var(--target-size) + 1px);
}
.test2 {
min-height: calc(var(--target-size) - 0.5rem);
}
.test3 {
flex: 0 0 calc(320px - 3 * var(--target-size));
}
The validator reports no error with .test1 and .test2.
However, for .test3, the validator reports this error:
Error: flex: The types are incompatible.
I know that the CSS rules stipulates that for multiplication, at least one of the arguments must be a <number>. I don't see that violated. I've tried nesting the multiplication in another calc(), but the error persists.
Any idea what's wrong with that rule and how to correct it?
css3
asked Nov 10 at 23:39
claytoncarney
15714
1
Have you triedflex: 0 0 calc(320px - (var(—target-size) * 3)))? I think it has to do with the loose ‘3’...
– Roy
Nov 10 at 23:48
You said it first, I didn't see this sorry
– Patrick
Nov 10 at 23:51
No, actually your suggestion pointed in the right direction. It is the operand order that appears to be critical. '3 * var(--target-size)' fails. 'var(--target-size) * 3' passes. Thanks!
– claytoncarney
Nov 10 at 23:55
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm validating my CSS using the Nu Html Checker:
https://validator.w3.org/nu/
Consider the following CSS:
:root {
--target-size: 48px;
}
.test1 {
flex: 0 0 calc(var(--target-size) + 1px);
}
.test2 {
min-height: calc(var(--target-size) - 0.5rem);
}
.test3 {
flex: 0 0 calc(320px - 3 * var(--target-size));
}
The validator reports no error with .test1 and .test2.
However, for .test3, the validator reports this error:
Error: flex: The types are incompatible.
I know that the CSS rules stipulates that for multiplication, at least one of the arguments must be a <number>. I don't see that violated. I've tried nesting the multiplication in another calc(), but the error persists.
Any idea what's wrong with that rule and how to correct it?
css3
asked Nov 10 at 23:39
claytoncarney
15714
I'm validating my CSS using the Nu Html Checker:
https://validator.w3.org/nu/
Consider the following CSS:
:root {
--target-size: 48px;
}
.test1 {
flex: 0 0 calc(var(--target-size) + 1px);
}
.test2 {
min-height: calc(var(--target-size) - 0.5rem);
}
.test3 {
flex: 0 0 calc(320px - 3 * var(--target-size));
}
The validator reports no error with .test1 and .test2.
However, for .test3, the validator reports this error:
Error: flex: The types are incompatible.
I know that the CSS rules stipulates that for multiplication, at least one of the arguments must be a <number>. I don't see that violated. I've tried nesting the multiplication in another calc(), but the error persists.
Any idea what's wrong with that rule and how to correct it?
css3
css3
asked Nov 10 at 23:39
claytoncarney
15714
asked Nov 10 at 23:39
claytoncarney
15714
edited Nov 10 at 23:49
asked Nov 10 at 23:39
claytoncarney
15714
asked Nov 10 at 23:39
claytoncarney
15714
asked Nov 10 at 23:39
claytoncarney
15714
15714
1
Have you triedflex: 0 0 calc(320px - (var(—target-size) * 3)))? I think it has to do with the loose ‘3’...
– Roy
Nov 10 at 23:48
You said it first, I didn't see this sorry
– Patrick
Nov 10 at 23:51
No, actually your suggestion pointed in the right direction. It is the operand order that appears to be critical. '3 * var(--target-size)' fails. 'var(--target-size) * 3' passes. Thanks!
– claytoncarney
Nov 10 at 23:55
add a comment |
1
Have you triedflex: 0 0 calc(320px - (var(—target-size) * 3)))? I think it has to do with the loose ‘3’...
– Roy
Nov 10 at 23:48
You said it first, I didn't see this sorry
– Patrick
Nov 10 at 23:51
No, actually your suggestion pointed in the right direction. It is the operand order that appears to be critical. '3 * var(--target-size)' fails. 'var(--target-size) * 3' passes. Thanks!
– claytoncarney
Nov 10 at 23:55
1
1
Have you tried
flex: 0 0 calc(320px - (var(—target-size) * 3)))? I think it has to do with the loose ‘3’...– Roy
Nov 10 at 23:48
Have you tried
flex: 0 0 calc(320px - (var(—target-size) * 3)))? I think it has to do with the loose ‘3’...– Roy
Nov 10 at 23:48
You said it first, I didn't see this sorry
– Patrick
Nov 10 at 23:51
You said it first, I didn't see this sorry
– Patrick
Nov 10 at 23:51
No, actually your suggestion pointed in the right direction. It is the operand order that appears to be critical. '3 * var(--target-size)' fails. 'var(--target-size) * 3' passes. Thanks!
– claytoncarney
Nov 10 at 23:55
No, actually your suggestion pointed in the right direction. It is the operand order that appears to be critical. '3 * var(--target-size)' fails. 'var(--target-size) * 3' passes. Thanks!
– claytoncarney
Nov 10 at 23:55
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
If you switch the order of multiplication it seems like it works:
flex: 0 0 calc(320px - var(--target-size) * 3);
Your right about the <number> argument but missed that the number has to be on the right side of the multiplication.
answered Nov 10 at 23:49
Patrick
808
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
If you switch the order of multiplication it seems like it works:
flex: 0 0 calc(320px - var(--target-size) * 3);
Your right about the <number> argument but missed that the number has to be on the right side of the multiplication.
answered Nov 10 at 23:49
Patrick
808
add a comment |
up vote
1
down vote
accepted
If you switch the order of multiplication it seems like it works:
flex: 0 0 calc(320px - var(--target-size) * 3);
Your right about the <number> argument but missed that the number has to be on the right side of the multiplication.
answered Nov 10 at 23:49
Patrick
808
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
If you switch the order of multiplication it seems like it works:
flex: 0 0 calc(320px - var(--target-size) * 3);
Your right about the <number> argument but missed that the number has to be on the right side of the multiplication.
answered Nov 10 at 23:49
Patrick
808
If you switch the order of multiplication it seems like it works:
flex: 0 0 calc(320px - var(--target-size) * 3);
Your right about the <number> argument but missed that the number has to be on the right side of the multiplication.
answered Nov 10 at 23:49
Patrick
808
answered Nov 10 at 23:49
Patrick
808
answered Nov 10 at 23:49
Patrick
808
answered Nov 10 at 23:49
Patrick
808
808
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244501%2fcss-calc-with-variables-and-multiplication%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Have you tried
flex: 0 0 calc(320px - (var(—target-size) * 3)))? I think it has to do with the loose ‘3’...– Roy
Nov 10 at 23:48
You said it first, I didn't see this sorry
– Patrick
Nov 10 at 23:51
No, actually your suggestion pointed in the right direction. It is the operand order that appears to be critical. '3 * var(--target-size)' fails. 'var(--target-size) * 3' passes. Thanks!
– claytoncarney
Nov 10 at 23:55