问题
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.
回答1:
You can use like this inline prefixer extension for jss: https://github.com/rofrischmann/inline-style-prefixer
回答2:
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')"
}
来源:https://stackoverflow.com/questions/43528659/how-to-create-multple-fallback-attributes-via-inline-styles-in-react