Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inDemoInstall

postcss-image-set-function

Package Overview
Dependencies
1
Maintainers
2
Versions
14
Issues
File Explorer

Advanced tools

postcss-image-set-function

Display resolution-dependent images using the image-set() function in CSS

    5.0.1latest
    Github

Version published
Maintainers
2
Weekly downloads
7,311,876
increased by6.43%

Weekly downloads

Readme

Source

PostCSS image-set() Function PostCSS Logo

NPM Version CSS Standard Status Build Status Discord

PostCSS image-set() Function lets you display resolution-dependent images using the image-set() function in CSS, following the CSS Images specification.

'Can I use' table

.example { background-image: image-set( url(img.png) 1x, url([email protected]) 2x, url([email protected]) 600dpi ); } /* becomes */ .example { background-image: url(img.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .example { background-image: url([email protected]); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .example { background-image: url([email protected]); } } .example { background-image: image-set( url(img.png) 1x, url([email protected]) 2x, url([email protected]) 600dpi ); }

Usage

Add PostCSS image-set() Function to your project:

npm install postcss-image-set-function --save-dev

Use PostCSS image-set() Function as a PostCSS plugin:

const postcss = require('postcss'); const postcssImageSetFunction = require('postcss-image-set-function'); postcss([ postcssImageSetFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */);

PostCSS image-set() Function runs in all Node environments, with special instructions for:

NodePostCSS CLIWebpackGulpGrunt

Options

preserve

The preserve option determines whether the original declaration using image-set() is preserved. By default, it is preserved.

postcssImageSetFunction({ preserve: false }) .example { background-image: image-set( url(img.png) 1x, url([email protected]) 2x, url([email protected]) 600dpi ); } /* becomes */ @media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) { .example { background-image: url(img.png); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .example { background-image: url([email protected]); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .example { background-image: url([email protected]); } }

onInvalid

The onInvalid option determines how invalid usage of image-set() should be handled. By default, invalid usages of image-set() are ignored. They can be configured to emit a warning with warn or throw an exception with throw.

postcssImageSetFunction({ onInvalid: 'warn' }) // warn on invalid usages postcssImageSetFunction({ onInvalid: 'throw' }) // throw on invalid usages

Image Resolution

The image-set() function allows an author to provide multiple resolutions of an image and let the browser decide which is most appropriate in a given situation. The image-set() also never fails to choose an image; the <resolution> just helps determine which of the images is chosen.

Since this plugin is not a browser, the image options are sorted by device pixel ratio and the lowest ratio is used as the default, while the remaining images are pushed behind media queries.

Therefore, this plugin can only approximate native browser behavior. While images should typically match the resolution as the device they’re being viewed in, other factors can affect the chosen image. For example, if the user is on a slow mobile connection, the browser may prefer to select a lower-res image rather than wait for a larger, resolution-matching image to load.

Keywords

FAQs

What is postcss-image-set-function?

Display resolution-dependent images using the image-set() function in CSS

Is postcss-image-set-function popular?

The npm package postcss-image-set-function receives a total of 7,016,922 weekly downloads. As such, postcss-image-set-function popularity was classified as popular.

Is postcss-image-set-function well maintained?

We found that postcss-image-set-function demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 2 open source maintainers collaborating on the project.

Last updated on 28 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket[email protected]

Product

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc