2

I'm trying to style progress bars using SCSS. To get this working in both Webkit and Gecko browsers I need to use both -webkit and -moz prefixes:

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
    
    &::-moz-progress-bar,
    &::-webkit-progress-value {
        background-color: orange;
    }
    
    &::-webkit-progress-bar {
        background-color: cyan;
    }
}

which renders to

progress {
  height: 50px;
  -webkit-appearance: none;
  appearance: none;
  background: cyan;
}
progress::-moz-progress-bar, progress::-webkit-progress-value {
  background-color: orange;
}
progress::-webkit-progress-bar {
  background-color: cyan;
}

This works great in Firefox, but Chrome doesn't seem to like it. Compare the following two implementations:

Comma separated selectors

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
}

progress::-moz-progress-bar, progress::-webkit-progress-value {
    background-color: orange;
}

progress::-webkit-progress-bar {
    background-color: cyan;
}
<progress max="1" value="0.5"></progress>

Entirely separate declarations

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
}

progress::-webkit-progress-value {
    background-color: orange;
}

progress::-moz-progress-bar {
    background-color: orange;
}

progress::-webkit-progress-bar {
    background-color: cyan;
}
<progress max="1" value="0.5"></progress>

The above code snippets render in Firefox and Chrome as shown below

Firefox Chrome
comma separated Comma separated rendered in Firefox Comma separated rendered in Chrome
separate declarations Separate declaration rendered in Firefox Separate declaration rendered in Chrome

It seems like the problem comes from rendering the CSS with vendor-specific pseudos in comma-separated lists. Is there any way to force the SASS processor to render each selector in a comma separated list as its own declaration?

It would be nice to not use mix-ins, but if it's the only way it's the only way.

Sandy Gifford
  • 5,112
  • 2
  • 26
  • 53
  • 1
    Oh how the tables turn... used to be that both Firefox and Chrome dropped the rule and Safari would accept it. See https://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on/16982510#16982510 - it's worth noting the rules have been relaxed in order to allow :is() and :where() to gracefully degrade. – BoltClock Apr 15 '21 at 18:30
  • @BoltClock The slow awful march of progress... – Sandy Gifford Apr 15 '21 at 18:31

1 Answers1

0

Yes, you are able to do so! If you want to render SASS to seperate CSS rules simply divide the comma seperated list into two seperate rules. SASS keeps different rules seperate and will not wrap them together. Example:


// ### > SASS

xprogress {
    height: 50px;
    appearance: none;
    background: cyan;
  
  //## divide comma seperated selectors
  //## into different rules
  &::-moz-progress-bar {
    background-color: orange;
  }
  &::-webkit-progress-value {
    background-color: orange;
  }
  &::-webkit-progress-bar {
    background-color: cyan;
  }
}



// ### > compiles to css

progress {
  height: 50px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: cyan;
}

//## when compiling CSS
//## different rules will survive
progress::-moz-progress-bar {
  background-color: orange;
}
progress::-webkit-progress-value {
  background-color: orange;
}
progress::-webkit-progress-bar {
  background-color: cyan;
}
Brebber
  • 2,221
  • 2
  • 6
  • 15
  • I understand this, but was hoping to keep my defs in one place (without having to create a mix-in). In my actual code I do a lot more than just set the background-color. Still, it appears that this (with mixins) is my best bet. – Sandy Gifford Apr 17 '21 at 12:59