PostCSS plugin for fallback image-set
npm install postcss-image-set-polyfill[PostCSS] plugin for polyfilling image-set CSS function.
[PostCSS]: https://github.com/postcss/postcss
``css`
/ Input example /
.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}
`css
/ Output example /
.foo {
background-image: url(img/test.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.foo {
background-image: url(img/test-2x.png);
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
.foo {
background-image: url(my-img-print.png);
}
}
`
→Try it online←
❗️ Resolution media query is supported only by IE9+.
npm i postcss-image-set-polyfill -D
> ️❕ NodeJS version must be 6+.
`js
var postcssImageSet = require('postcss-image-set-polyfill');
postcss([postcssImageSet]).process(YOUR_CSS, / options /);
``
See [PostCSS] docs for examples for your environment.
If you use autoprefixer, place this plugin before it to prevent styles duplication.