clamp() fallback

[dangelion]

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?

[AleksandrHovhannisyan]

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.

[esbeto]

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;
  }
}

[esbeto]

By the way, I got to say that I discovered this website just now, and I'm in love. 💌

[dangelion]

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;
  }
}

Yeah @esbeto! That's what I did, glad that your answer confirms I was on the right road! 😉

[AleksandrHovhannisyan]

Thanks @dangelion @esbeto! I've added an option to generate fallback CSS.