postcss-image-set-polyfill
![npm version](https://camo.githubusercontent.com/b8206c7b53870d557f53454af501e2633bd7bf5ffcbc4812f1562ac27f73a0a9/68747470733a2f2f62616467652e667572792e696f2f6a732f706f73746373732d696d6167652d7365742d706f6c7966696c6c2e737667)
PostCSS plugin for polyfilling image-set
CSS function for most browsers.
/* Input example */
.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}
/* 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);
}
}
Installation
npm i postcss-image-set-polyfill -D
Usage
var postcssImageSet = require('postcss-image-set-polyfill');
postcss([postcssImageSet]).process(YOUR_CSS, /* options */);
See PostCSS docs for examples for your environment.
⚠️
️ Warning
If you use autoprefixer, place this plugin before it to prevent styles duplication.