source: trip-planner-front/node_modules/postcss-image-set-function/README.md@ 6c1585f

Last change on this file since 6c1585f was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 4.7 KB
Line 
1# PostCSS image-set() Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS image-set() Function] lets you display resolution-dependent images
9using the `image-set()` function in CSS, following the [CSS Images]
10specification.
11
12```pcss
13.example {
14 background-image: image-set(
15 url(img.png) 1x,
16 url(img@2x.png) 2x,
17 url(img@print.png) 600dpi
18 );
19}
20
21/* becomes */
22
23.example {
24 background-image: url(img.png);
25}
26
27@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
28 .example {
29 background-image: url(img@2x.png);
30 }
31}
32
33
34@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
35 .example {
36 background-image: url(my@print.png);
37 }
38}
39
40.example {
41 background-image: image-set(
42 url(img.png) 1x,
43 url(img@2x.png) 2x,
44 url(img@print.png) 600dpi
45 );
46}
47```
48
49## Usage
50
51Add [PostCSS image-set() Function] to your project:
52
53```bash
54npm install postcss-image-set-function --save-dev
55```
56
57Use [PostCSS image-set() Function] to process your CSS:
58
59```js
60const postcssImageSetFunction = require('postcss-image-set-function');
61
62postcssImageSetFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
63```
64
65Or use it as a [PostCSS] plugin:
66
67```js
68const postcss = require('postcss');
69const postcssImageSetFunction = require('postcss-image-set-function');
70
71postcss([
72 postcssImageSetFunction(/* pluginOptions */)
73]).process(YOUR_CSS /*, processOptions */);
74```
75
76[PostCSS image-set() Function] runs in all Node environments, with special
77instructions for:
78
79| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
80| --- | --- | --- | --- | --- | --- |
81
82## Options
83
84### preserve
85
86The `preserve` option determines whether the original declaration using
87`image-set()` is preserved. By default, it is preserved.
88
89```js
90postcssImageSetFunction({ preserve: false })
91```
92
93```pcss
94.example {
95 background-image: image-set(
96 url(img.png) 1x,
97 url(img@2x.png) 2x,
98 url(img@print.png) 600dpi
99 );
100}
101
102/* becomes */
103
104.example {
105 background-image: url(img.png);
106}
107
108@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
109 .example {
110 background-image: url(img@2x.png);
111 }
112}
113
114
115@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
116 .example {
117 background-image: url(my@print.png);
118 }
119}
120```
121
122### onvalid
123
124The `oninvalid` option determines how invalid usage of `image-set()` should be
125handled. By default, invalid usages of `image-set()` are ignored. They can be
126configured to display a `warning` or `throw` an error.
127
128```js
129postcssImageSetFunction({ oninvalid: 'warning' }) // warn on invalid usages
130```
131
132```js
133postcssImageSetFunction({ oninvalid: 'throw' }) // throw on invalid usages
134```
135
136## Image Resolution
137
138The `image-set()` function allows an author to provide multiple resolutions of
139an image and let the browser decide which is most appropriate in a given
140situation. The `image-set()` also never fails to choose an image; the
141`<resolution>` just helps determine which of the images is chosen.
142
143Since this plugin is not a browser, the image options are sorted by device
144pixel ratio and the lowest ratio is used as the default, while the remaining
145images are pushed behind media queries.
146
147Therefore, this plugin can only approximate native browser behavior. While
148images should typically match the resolution as the device they’re being viewed
149in, other factors can affect the chosen image. For example, if the user is on a
150slow mobile connection, the browser may prefer to select a lower-res image
151rather than wait for a larger, resolution-matching image to load.
152
153[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-image-set-function.svg
154[cli-url]: https://travis-ci.org/jonathantneal/postcss-image-set-function
155[css-img]: https://cssdb.org/badge/image-set-function.svg
156[css-url]: https://cssdb.org/#image-set-function
157[git-img]: https://img.shields.io/badge/support-chat-blue.svg
158[git-url]: https://gitter.im/postcss/postcss
159[npm-img]: https://img.shields.io/npm/v/postcss-image-set-function.svg
160[npm-url]: https://www.npmjs.com/package/postcss-image-set-function
161
162[CSS Images]: https://drafts.csswg.org/css-images-4/#image-set-notation
163[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
164[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
165[PostCSS]: https://github.com/postcss/postcss
166[PostCSS Loader]: https://github.com/postcss/postcss-loader
167[PostCSS image-set() Function]: https://github.com/jonathantneal/postcss-image-set-function
Note: See TracBrowser for help on using the repository browser.