Css display property set to inherit with variable doesn't work
up vote
1
down vote
favorite
I set the display property for divs to in
. I then created four classes:
line-block
- no-var, which sets display to
inherit
- var, which sets display to a variable set to
inherit
- var-none, which sets display to a variable set to
none
- var-default, which sets display to a variable set to
inherit
and a default ofgrid
The actual style that is used by each class doesn't seem to be correct, though:
- The no-var class correctly inherits display to
block
- The var class doesn't get the
inherit
value from the variable and displays asinline-block
- The var-none class correctly sets display to
none
and is hidden - The var-default class doesn't get the
inherit
value from the variable and sets display to the default
For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit
and unset
values?
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}
<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>
html css css3 css-variables
add a comment |
up vote
1
down vote
favorite
I set the display property for divs to in
. I then created four classes:
line-block
- no-var, which sets display to
inherit
- var, which sets display to a variable set to
inherit
- var-none, which sets display to a variable set to
none
- var-default, which sets display to a variable set to
inherit
and a default ofgrid
The actual style that is used by each class doesn't seem to be correct, though:
- The no-var class correctly inherits display to
block
- The var class doesn't get the
inherit
value from the variable and displays asinline-block
- The var-none class correctly sets display to
none
and is hidden - The var-default class doesn't get the
inherit
value from the variable and sets display to the default
For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit
and unset
values?
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}
<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>
html css css3 css-variables
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I set the display property for divs to in
. I then created four classes:
line-block
- no-var, which sets display to
inherit
- var, which sets display to a variable set to
inherit
- var-none, which sets display to a variable set to
none
- var-default, which sets display to a variable set to
inherit
and a default ofgrid
The actual style that is used by each class doesn't seem to be correct, though:
- The no-var class correctly inherits display to
block
- The var class doesn't get the
inherit
value from the variable and displays asinline-block
- The var-none class correctly sets display to
none
and is hidden - The var-default class doesn't get the
inherit
value from the variable and sets display to the default
For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit
and unset
values?
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}
<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>
html css css3 css-variables
I set the display property for divs to in
. I then created four classes:
line-block
- no-var, which sets display to
inherit
- var, which sets display to a variable set to
inherit
- var-none, which sets display to a variable set to
none
- var-default, which sets display to a variable set to
inherit
and a default ofgrid
The actual style that is used by each class doesn't seem to be correct, though:
- The no-var class correctly inherits display to
block
- The var class doesn't get the
inherit
value from the variable and displays asinline-block
- The var-none class correctly sets display to
none
and is hidden - The var-default class doesn't get the
inherit
value from the variable and sets display to the default
For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit
and unset
values?
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}
<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}
<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>
:root {
--display: inherit;
--display-none: none;
--color: red;
}
div {
display: inline-block;
color: green;
}
.no-var {
display: inherit;
color: red;
}
.var {
display: var(--display);
color: var(--color);
}
.var-none {
display: var(--display-none);
}
.var-default {
display: var(--display, grid);
color: var(--color, purple);
}
<div class="no-var">
No variable
</div>
<div class="no-var">
No variable
</div>
<div class="var">
Variable
</div>
<div class="var">
Variable
</div>
<div class="var-none">
None
</div>
<div class="var-none">
None
</div>
<div class="var-default">
Default
</div>
<div class="var-default">
Default
</div>
html css css3 css-variables
html css css3 css-variables
edited Nov 8 at 19:15
Temani Afif
62.1k93572
62.1k93572
asked Nov 8 at 18:19
GammaGames
649
649
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
In such situation, inherit
is used as a value for the custom property and will not be evaluted to the inherit
value using var()
.
Here is a basic example to understand the issue:
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.
In other words, inherit
will be considered for the custom property and not for the property where you will evalute the custom property using var()
. You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.
From the specification:
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
1
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
In such situation, inherit
is used as a value for the custom property and will not be evaluted to the inherit
value using var()
.
Here is a basic example to understand the issue:
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.
In other words, inherit
will be considered for the custom property and not for the property where you will evalute the custom property using var()
. You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.
From the specification:
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
1
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
add a comment |
up vote
2
down vote
accepted
In such situation, inherit
is used as a value for the custom property and will not be evaluted to the inherit
value using var()
.
Here is a basic example to understand the issue:
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.
In other words, inherit
will be considered for the custom property and not for the property where you will evalute the custom property using var()
. You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.
From the specification:
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
1
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
In such situation, inherit
is used as a value for the custom property and will not be evaluted to the inherit
value using var()
.
Here is a basic example to understand the issue:
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.
In other words, inherit
will be considered for the custom property and not for the property where you will evalute the custom property using var()
. You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.
From the specification:
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules
In such situation, inherit
is used as a value for the custom property and will not be evaluted to the inherit
value using var()
.
Here is a basic example to understand the issue:
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.
In other words, inherit
will be considered for the custom property and not for the property where you will evalute the custom property using var()
. You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.
From the specification:
Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
.box {
--c:inherit;
color:var(--c,red);
}
<div>
<div class="box">I am a text</div>
</div>
<div style="--c:blue">
<div class="box">I am a text</div>
</div>
edited Nov 10 at 13:25
answered Nov 8 at 18:59
Temani Afif
62.1k93572
62.1k93572
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
1
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
add a comment |
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
1
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
That's interesting and makes sense when explained like that, thank you!
– GammaGames
Nov 8 at 21:24
1
1
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
@GammaGames you can check this stackoverflow.com/questions/53239880/… in case you need a way to use inherit value within CSS variable
– Temani Afif
Nov 11 at 9:53
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f53213870%2fcss-display-property-set-to-inherit-with-variable-doesnt-work%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