How to create multple fallback attributes via inli

Question

For example, I have the following CSS:

.myClass {
  background: -moz-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #FFF 0%, #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #FFF 0%,  #000 100%), url("http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg"); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Where I am creating an image with a gradient over it. Note that I need to use three background attributes to handle support for different browsers. How would I do this using inline styles in React?

I understand that inline styles in React accept a dictionary to represent our CSS styles, but in this case, I would end up having duplicate background keys. For example, this would be my dictionary in this case:

const stylesDict = {
  background: "-moz-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* FF3.6-15 */
  background: "-webkit-linear-gradient(left, #FFF 0%, #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* Chrome10-25,Safari5.1-6 */
  background: "linear-gradient(to right, #FFF 0%,  #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg');", /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

So in this example, how do I avoid having duplicate keys while still supporting multiple browsers?

Note that unless I can break up the background attribute into a separate attribute for the gradient and a separate attribute for the image, then I still need to do all of this via inline Javascript because the image will vary based on the code.

Answer 1

const stylesDict = {
  background: "-moz-linear-gradient(left, #FFF 0%, #000 100%), -webkit-linear-gradient(left, #FFF 0%, #000 100%), linear-gradient(to right, #FFF 0%,  #000 100%), url('http://www.extremetech.com/wp-content/uploads/2011/06/firefox-logo-huge.jpg')"
}

Answer 2

You can use like this inline prefixer extension for jss: https://github.com/rofrischmann/inline-style-prefixer