(What a mess to find all the below setup infos already :-/ )
I could get autoprefixer to run with docpad, but I (guess I) did not succeed in setting the browsers
value...
What I tried so far (docpad install with plugins: jade, less, livereload, marked):
browsers
setup):docpad install autoprefix
I got some style.css.less
file with some imports and especially some background: radial-gradient(...) ; background: linear-gradient(...)
rules.
style.css.less
to style.css.autoprefix.css.less
(style.css.autoprefix.less
did not work)Till here it worked only with warning(s) about that the less->css
or css->autoprefix
conversions did not do anything which should be ok.
autoprefixer added some -webkit...
versions of my ...gradient...
rules above.
browsers
without docpad stylus plugin?... it seemed to me ... so I continued like this:
docpad install stylus
added the autoprefixer stylus setup to my docpad.coffee
setup file:
docpadConfig = {
#...
plugins:
stylus:
stylusLibraries:
'autoprefixer-stylus': true
options:
use: [
#() -> require('autoprefixer-stylus')('ie 6')
() -> require('autoprefixer-stylus')('ff > 3')
#() -> require('autoprefixer-stylus')('last 2 versions')
]
}
# Export our DocPad Configuration
module.exports = docpadConfig
The effect is, that now my style.css
is obviously autoprefixed again, but switching between the options above does not have an effect.
browsers
settings work from here?All the setup info to here I collected from different sources so I likely missed something. Maybe it is already possible to configure the browsers
settings without the stylus plugin?
Here the sources that helped me more or less to get to this point:
Adding the additional -moz-radial-gradient...
/-moz-linear-gradient...
rules in my css manually shows me the proper gradients. Removing them doesn't show any gradient (not even from the standard syntax and independent of using the autoprefixer ... this may be an unrelated/left problem, because I would expect the much more complex style.css to change on the above browsers
options changes at least gradually.)
It works - the problem layed somewhere else!
Thus the question already contains the answer how to set it up ...
The following gradient-related issue made me check for my gradient-syntax:
https://github.com/artpolikarpov/fotorama/issues/91
And following the specs: http://www.w3schools.com/css/css3_gradients.asp
more thoroughly and since changing
background: linear-gradient( top, red, yellow);
background: radial-gradient( top right, red, yellow);
to
background: linear-gradient( to bottom left, red, yellow )
background: radial-gradient( ellipse farthest-corner at top right, red, yellow )
it works like a charm :-)