feat: Fallback for older browsers

[csshugs]

Browsers that don’t support custom properties are completely locked out. The generated font-size and line-height declarations are simply ignored and the browser default styles are inherited. This can lead to very inappropriate font-sizes for certain elements.

We should try to find a sensible fallback solution that can be enabled via a Sass feature flag, that provides at least some sort of reasonable font-size declaration for older browsers.

[fuhlig]

How would a fallback look like?
Static values as fallbacks for custom properties?

PostCSS could be utilized here to add the static values in postprocess in order to keep the mixins simpler.
This could also use globally set browser-support (via browserlist)

[csshugs]

Static values as fallbacks for custom properties?

Yes, that’s what I thought. Generate an output that looks something like this:

h1 {
    font-size: 1.77156rem;
    font-size: calc(var(--ms6-ratio) * 1rem);
    line-height: 1.5;
    line-height: var(--ms6-line-height); 
}

PostCSS could very well be used, but I’m not sure if we should bake that into FluidMS, as this is mostly implementation-specific.

[fuhlig]

Depends on how the package should be contributed or consumed.

When distributing a compiled CSS version, the processing should be doable without any issues.

When distributing the Sass version (which makes most sense in order to configure it) the users either depend on a similar build system or need to do it themselves...

I'm tending to not provide legacy-browser support out-of-the-box but give instructions on how it can be achieved.

[csshugs]

I'm tending to not provide legacy-browser support out-of-the-box but give instructions on how it can be achieved.

We could at least put it behind a flag to provide a somewhat sensible fallback on top of instructions of how to do it “properly”.

[csshugs]

Since the version 1.0.0 update and its usage of the clamp() function, I guess a fallback is not necessary, as this already is kind of a fallback in itself.

[fuhlig]

custom props and math functions (clamp) is supported very well (Safari 13.1 / iOS 13.4), should be good to go