postcss-image-set-polyfill

PostCSS plugin for fallback image-set

MIT 16 个版本
安装
npm install postcss-image-set-polyfill
yarn add postcss-image-set-polyfill
pnpm add postcss-image-set-polyfill
bun add postcss-image-set-polyfill
README

postcss-image-set-polyfill Build Status npm version

PostCSS plugin for polyfilling image-set CSS function.

/* 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);
    }
}

→Try it online←

❗️ Resolution media query is supported only by IE9+.

Installation

npm i postcss-image-set-polyfill -D

️❕ NodeJS version must be 6+.

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.

版本列表
1.0.0 2019-03-07
0.4.4 2017-09-07
0.4.3 2017-07-16
0.4.2 2017-07-16
0.4.1 2017-07-16
0.4.0 2017-07-14
0.3.5 2017-06-12
0.3.4 2017-05-23
0.3.3 2017-05-06
0.3.2 2017-05-01
0.3.1 2017-02-25
0.3.0 2017-02-25
0.2.3 2017-02-14
0.2.2 2017-02-11
0.2.1 2017-02-09
0.2.0 2017-02-06