rfs
rfs copied to clipboard
Make use of the css `min()` function
Hopefully one day the min()
function will be implemented by all major browsers and that could simplify RFS a lot. Instead of the mixin, we can make use of a function to generate the value.
For example:
.title {
padding: rfs(2rem);
font-size: rfs(4rem);
}
would generate:
.title {
padding: min(2rem, calc(1.325rem + 0.9vw));
font-size: min(4rem, calc(1.525rem + 3.3vw));
}
Other positive side effects are:
- We can use the same syntax in every language (sass, scss, less, stylus & PostCSS)
- It's a bit more predictable than the
mixin
because you know it's going to a value and not "some lines of code" - Mixins don't work with plugins like stylelint-order, the function would fix this.
- Custom properties (css variables) can be set to a value which can be reused in css.
Only downside is that the disabled/enabled classes won't work anymore, but I have no clue if this feature is even used.
Currently Safari kind of supports min()
, but it's still not perfect when resizing without the safari iframe hack (https://github.com/twbs/rfs/issues/14): https://codepen.io/MartijnCuppens/pen/ywaJpW
Browser support
Browser support is still an issue. Browser support so far:
- [x] Safari
- [x] Chrome (development has started, see https://bugs.chromium.org/p/chromium/issues/detail?id=825895)
- [x] Firefox
- [x] Edge
Firefox already supports this https://caniuse.com/#feat=css-math-functions
For the early adopters out here, you can now install this implementation with:
npm install twbs/rfs#min-function
Docs: https://github.com/twbs/rfs/tree/min-function
Planning to release this on npm as an alpha in the comming days/ weeks. Descided to make an alpha release since the support is still not big enough
Hi @MartijnCuppens , any issue in having this rolled out in main? The min seems supported in most browsers and works great and it shrinkens the css.
Could also adopt clamp()
by pushing 3 values into the mixin. This would allow a 'stop' value so font sizes don't grow infinitely.
example output:
font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem);
In version 10.0.0-alpha.0 I had for rfs(2.5rem)
the result
h1 { font-size: min(2.5rem, calc(1.375rem + 1.5vw)); }
with the known issues about the division warnings.
But now I am getting only the calc
with an additional media query.
Is switching back to alpha.0 the only way to have the min as per this post? min is very well supported to my taste.
Here is a loosely worked out function which does the job with version 10.0.0
@use "../../node_modules/rfs/scss" as rfs;
/*
Adapted helper inspired from 10.0.0-alpha.0 version which uses min instead of media queries
*/
@function rfs-value-min($value) {
$rfs-val: rfs.rfs-value($value);
$rfs-fluid-val: rfs.rfs-fluid-value($value);
@if $rfs-val == $rfs-fluid-val {
@return $rfs-val;
}
@return min($rfs-val, $rfs-fluid-val);
}
Usage
h1 {
font-size: rfs-value-min(2.5rem);
}
h5 {
font-size: rfs-value-min(1.25rem);
}
Output
h1 {
font-size: min(2.5rem, calc(1.375rem + 1.5vw));
}
h5 {
font-size: 1.25rem;
}
To me, it seems with clamp
and min
now universally supported, this entire project is pointless now. I have not looked that deep into it, but it seems the complexity of this entire thing is not worth it at all if you can just achieve the same with writing some basic CSS on your own.