I try to use custom variables inside my CSS.

Under FireFox: everything is okay.

Under Google Chrome or Microsoft Edge: it works pretty well on linear-gradient but not on -moz-linear-gradient

Here is my code: https://codepen.io/Bronzato1/pen/VwWBJjP?editors=1100

To show you the problem, I created the first class which works as expected and the second class with the usage of a variable inside -moz-linear-gradient breaks the style !

HTML

<div class="first red"></div>
<div class="second red"></div>

CSS

.red {
    --custom-color: #FF0000;
}
.first::before{
  content:'';
  position: absolute;
  width: 19rem;
  height: 14rem;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left; 
  /*FF*/
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, black 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}
.second::before{
  content:'';
  position: absolute;
  top: 250px;
  width: 19rem;
  height: 14rem;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left; 
  /*FF*/
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}

CodePudding user response：

You need to put your prefixed styles above the standard style, e.g.

background: -moz-linear-gradient(...) no-repeat bottom left;
background: linear-gradient(...) no-repeat bottom left; 

Otherwise the browser will attempt to use the last valid style, which I believe causes problems since background is a combined style so you end up overwriting your linear-gradient with a -moz-linear-gradient that Chrome doesn't understand.

Working example:

.red {
  --custom-color: #FF0000;
}

.first::before {
  content: '';
  position: absolute;
  width: 19rem;
  height: 14rem;
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, red 70%, transparent 72%) no-repeat bottom left;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}

.second::before {
  content: '';
  position: absolute;
  top: 250px;
  width: 19rem;
  height: 14rem;
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}

<div class="first red"></div>
<div class="second red"></div>

CodePudding user response：

Try this:

.red {
    --custom-color: #FF0000;
}
.first::before, .second::before{
  content:'';
  position: absolute;
  width: 19rem;
  height: 14rem;
  background: linear-gradient(128deg, transparent 51%, black 53%, var(--custom-color) 70%, transparent 72%) no-repeat bottom left; 
  /*FF*/
  background: -moz-linear-gradient(128deg, transparent 51%, black 53%, red 70%, transparent 72%) no-repeat bottom left;
  background-color: #000000;
}

.second::before{
  top: 250px;
}