CSS icons fallback

[hatemhosny]

Type of feature

✨ Feature

Current behavior

hey @gigamaster

I really like the CSS icons you introduced.
I just noticed that CSS masking has baseline compatibility: "newly available".

I generally target this compatibility level for the full app since the users are developers I expect them to have updated browser versions.
However, for embeds I aim to target compatibility level: "widely available" since the users might be less tech-savvy or running in more restricted environments.

In this situtation I prefer to provide fallbacks to make it usable even for older browsers.
CSS isons are used in embeds.

Suggested feature

I'm suggesting a fallback based on your code to use the svg as a background image instead of masks and use invert filter to show hover/active state for light and dark themes.

This would be placed in a @supports block to only work if masks are not supported.
It should otherwise require no code changes.

The icons should appear (without the theme color), but respond with shades of grey on hover/active and for dark/light themes.

This is a demo for the suggestion (icon size is enlarged for the demo): https://livecodes.io/?x=id/ncvsjhnzvep

Please let me know what you think.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[hatemhosny]

If you agree with the approach, I can start a PR with the proposed changes.

[gigamaster]

@hatemhosny
I haven't had any problems using mask. Over the last few years, major browsers implemented mask so quickly that I've stripped out prefixes, e.g. -web-kit, down to the things that matter. But the way you're extending support seems good.

[hatemhosny]

@hatemhosny I haven't had any problems using mask. Over the last few years, major browsers implemented mask so quickly that I've stripped out prefixes, e.g. -web-kit, down to the things that matter. But the way you're extending support seems good.

Thank you @gigamaster

I really like the mask approach. Very neat.

I just think that this addition is an easy win since it adds very little code and might extend support as you say.

By the way, LiveCodes build pipeline uses autoprefixer, so you don't need to manually add vendor prefixes anyway, even for other features.