PostCSS Sparrow Clamp Fallback
A PostCSS plugin that creates fallback of clamp()
for you.
/* Before transformations */
/* After transformations *//* If you set fallback: "media" *//* Coming soon */{} {}
/* After transformations *//* If you set fallback: "minmax" */
Why do I need this plugin?
clamp()
is a very powerful tool for creating a responsive design. Nevertheless, its support is limited at the moment. As of Sept 2020, this rule is only supported by 77% of all browsers.
This plugin will help you transform clamp()
with the combination of min()
and max()
or media queries for more browser support.
Browser support for various fallback
-
Falling back with
min()
andmax()
will give you 87.79% browser support. -
Falling back with
media queries
will give you 98.67% browser support, which would also support up to IE 9 (Coming soon)
Installation
This plugin require you to use PostCSS Sparrow for matching with selectors you want.
Download both postcss-sparrow
and this plugin through NPM.
npm i postcss postcss-sparrow postcss-sparrow-clamp-fallback
Then import this plugin as the callback for PostCSS Sparrow.
//postcss.config.jsmoduleexports = plugins: //Other plugins... transformations: selectors: '*' inclusion: true callbacks: fallback: 'minmax'
API Reference
options.fallback
: String
Choose the way to fallback clamp()
. Set it to 'minmax'
to fallback with the combination of min()
and max()
; set it to 'media'
to fallback with media queries.
This option is default to 'minmax'
.
Option for 'media'
coming soon.