A PostCSS plugin that creates fallback of clamp()
for you.
/* Before transformations */
.foo {
font-size: clamp(20px, 2vw, 40px);
}
/* After transformations */
/* If you set fallback: "media" */
/* Coming soon */
@media (width <= 1000px) {
.foo{
font-size: 20px; /*min*/
}
}
.foo{
font-size: 2vw;
}
@media (width >= 2000px) {
.foo{
font-size: 40px; /*max*/
}
}
/* After transformations */
/* If you set fallback: "minmax" */
.foo {
font-size: max(20px, min(2vw, 40px));
}
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.
-
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)
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.js
module.exports = {
plugins: [
//Other plugins...
require('postcss-sparrow')({
transformations: [
{
selectors: ['*'],
inclusion: true,
callbacks: [
require('postcss-sparrow-clamp-fallback')({
fallback: 'minmax'
})
]
}
]
})
]
}
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.