Question 215608 in Html Question posted in
Some basic documentation can be found here.

Html – css –variable strange behavior whith multiple use

This css working OK

.my_div{
    display: inline-block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    border: solid 1px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.bg1{
    background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
    background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
    background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}

html

<div class="my_div bg1">
    .bg1
</div>

If I try :root{--color2: 23;} and background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%); it’s ok too.

but if I add another line with -moz-radial-gradient or -o-radial-gradient or ms-radial-gradient or simply radial-gradient with hsla(var(--color2), 100%, 56%, 1) that fail in all navigators

See code snippet for live results:

:root{
    --color2: 23;
}

.my_div{
    display: inline-block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    border: solid 1px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.bg1{
    background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
    background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
    background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}

.bg2{
    background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
    background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
    background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
}

.bg3{
    background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
    background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
    background-image: radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}
<div class="my_div bg1">
    .bg1
</div>
<div class="my_div bg2">
    .bg2
</div>
<div class="my_div bg3">
    .bg3
</div>

I have tried also :

:root{
    --color2: 23;
    --compozite-color: hsla(var(--color2), 100%, 56%, 1);
}

And in css for multiple navigators not working … only work for one

This work:

background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, var(--compozite-color) 100%);

This NOT WORK: (nor in webkit that worked before)

background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, var(--compozite-color) 100%);
background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, var(--compozite-color) 100%);

I have tried also (but not work):

.bg_webkit{
    background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}

.bg_moz{    
    background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%); 
}

.bg{
    background-image: radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}

…

<div class="my_div bg_webkit bg_moz bg">
    .bg1
</div>
<div class="my_div bg_webkit bg_moz bg">
    .bg2
</div>
<div class="my_div bg_webkit bg_moz bg">
    .bg3
</div>

This (for only one navigator) work (but it doesn’t help me)

<div class="my_div bg_webkit">
    .bg1
</div>
Tags:

2

Answers


  1. 0 
    :root {
  --color2: 23;
}

.my_div {
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  border: solid 1px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.bg_color {
  background-color: hsla(var(--color2), 100%, 56%, 1);
}

.bg1 {
background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
background-image: radial-gradient(center center, circle contain, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}
    <div class="my_div bg_color bg1">.bg1</div>
<div class="my_div bg_color bg1">.bg2</div>
<div class="my_div bg_color bg1">.bg3</div>
    Login or Signup to reply.
  2. 0

    Short Answer:

    The CSS property (unprefixed version) should be:

    background-image: radial-gradient(circle closest-side at center center, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);

    More explanation:

    Your original property background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%); is not valid. It does not match the description here.

    I googled "center center, circle contain" and found this link which says the syntax for radial gradients has changed (that was 2012, by the way).
    So, while -webkit-radial-gradient and -moz-radial-gradient still support the old syntax, radial-gradient doesn’t.

    However, (in the case where there is no variable), when that invalid syntax is encountered, the browser will ignore it. For example, in Chrome, as you can see from the Developer Tools, what is applied to .bg1 is background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);.enter image description here
    Note that it also ignores -moz-radial-gradient one.

    However, when there is a variable, it will not "simply ignore the invalid value". Instead, it uses the property value with a variable anyway (overriding the previous values), and only fails after substituting (see this other thread).

    That also explains why .bg2 does not work in Chrome (it tries to load -moz-radial-gradient then fails), but it works in Firefox anyway.

    And .bg3 does not work for Chrome and Firefox, as both will try to use your unprefixed radial-gradient(...) and fail.

    So, the solution is use a valid value for the unprefixed one. You can replace center center, circle contain with circle closest-side at center center.

    Also, since you are using var(), that means you don’t need to use -moz-radial-gradient or -webkit-radial-gradient anymore. By checking caniuse: "radial-gradient" and caniuse: "custom properties", we can see that radial-gradient is supported even earlier than var (except that we lack data for "radial-gradient" for some less common browsers, greyed out in the link above)

    :root{
    --color2: 23;
}

.my_div{
    display: inline-block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    border: solid 1px;
    border-radius: 50%;
}

.bg4{
    background-image: radial-gradient(circle closest-side at center center, #fedc3f 0%, hsla(var(--color2), 100%, 56%, 1) 100%);
}
    <div class="my_div bg4">
    .bg4
</div>

    (And in case someone is curious about the case of ‘cover’, center center, circle cover should be replaced with circle farthest-corner at center center)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search