New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
clamp() fallback #44
Comments
I'd have to give this a bit more thought. In the meantime, you could use Utopia's calculator and opt for the fallback method: https://utopia.fyi/type/calculator. Alternatively, you could use feature queries in CSS and define a set of fallback font sizes that switch on hard breakpoints if clamp is not supported. |
Safari on iOS 12 supports Feature queries, so you can create your own fallback by picking the mobile sizes (the first values of clamp) Example @supports (font-size: clamp(1rem, 1vw, 2rem)) {
:root {
--font-size-fluid-sm: clamp(0.8rem, 0.08vw + 0.78rem, 0.84rem);
--font-size-fluid-p: clamp(1rem, 0.23vw + 0.94rem, 1.13rem);
--font-size-fluid-h6: clamp(1.25rem, 0.45vw + 1.14rem, 1.5rem);
--font-size-fluid-h5: clamp(1.56rem, 0.79vw + 1.36rem, 2rem);
--font-size-fluid-h4: clamp(1.95rem, 1.29vw + 1.63rem, 2.66rem);
--font-size-fluid-h3: clamp(2.44rem, 2.02vw + 1.94rem, 3.55rem);
--font-size-fluid-h2: clamp(3.05rem, 3.06vw + 2.29rem, 4.73rem);
--font-size-fluid-h1: clamp(3.81rem, 4.54vw + 2.68rem, 6.31rem);
}
}
/* Fallback for browsers that don't support it */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
:root {
--font-size-fluid-sm: 0.8rem;
--font-size-fluid-p: 1rem;
--font-size-fluid-h6: 1.25rem;
--font-size-fluid-h5: 1.56rem;
--font-size-fluid-h4: 1.95rem;
--font-size-fluid-h3: 2.44rem;
--font-size-fluid-h2: 3.05rem;
--font-size-fluid-h1: 3.81rem;
}
} |
By the way, I got to say that I discovered this website just now, and I'm in love. 💌 |
Yeah @esbeto! That's what I did, glad that your answer confirms I was on the right road! 😉 |
Thanks @dangelion @esbeto! I've added an option to generate fallback CSS. |
Hi
just discovered that clamp is not supported on iOS 12 and many people use it yet. :(
It would be fine to generate a fallback too, as explained here https://www.bronco.co.uk/our-ideas/creating-a-clamp-fallback-function-in-sass-scss/
or any other fallback you know.
What do you think?
The text was updated successfully, but these errors were encountered: