search

dvtng / jss

JavaScript library for getting and setting CSS stylesheet rules
335 stars 54 forks source link

Css background values with vendor prefixes #33

Open joshuaboshi opened 9 years ago

joshuaboshi commented 9 years ago

Hello,

I wanted to use JSS to generate CSS rule like this:

body.mystyle {
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65));
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65));
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65));
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65));
    background-image: linear-gradient(top, rgba(0,0,0,0) 75%, rgba(0,0,0,0.65));
}

The API of JSS is great. But usage of Objects for css properties will not work in case like above. Maybe there could be a new set method which will accept strings directly?

I would like to avoid browser detection and setting just the correct rule.

Thanks!

barneycarroll commented 9 years ago

@joshuaboshi the reason you need to do things like that in static CSS is because it's impossible to know ahead of time which property the receiving browser will need: with JSS you have the advantage of executing in the browser, so you can determine which syntax is necessary and avoid specifying the unnecessary ones each time. You might want to use something like Modernizr to parse unprefixed CSS and return code compliant with the host browser.

joshuaboshi commented 9 years ago

@barneycarroll hello and thanks for your prompt response! And sorry for my late response :) I know, I could do both of the suggested solutions. It would be much cleaner. But I wanted to avoid browser detection, or adding more libraries to the project at that point.