Change Details

`.background-image-svg()` was a [[ https://pauginer.com/post/36614680636/invisible-gradient-technique | fantastic solution ]] and has provided peace of mind on the usage of SVGs with PNG fallbacks for browsers since 2013 (3a4f17059). But it's time – as it is true for every technical solution in this world – to say goodbye. The original article states, the browsers currently [[ https://caniuse.com/#feat=svg-css | being supported by this technique are basically ]] - Internet Explorer 8 and - Android 2.1-2.3 We need to rethink this support out of practicality and current realities, which I've just proposed in T248061 **Cons** - Icons in icon-only interactive elements might not be visible to these users, but we have sparely put such elements into our interfaces outside of Grade A support. **Pros** - Removal of PNG fallbacks and duplication of work for designers/implementors - Removal of extra mixin calls, it will be enough to rely on normal `background-image` property. - Removal of CSS code, with an impact slightly smaller, but still measurable similar to 792ba935677

`.background-image-svg()` was a [[ https://pauginer.com/post/36614680636/invisible-gradient-technique | fantastic solution ]] and has provided peace of mind on the usage of SVGs with PNG fallbacks for browsers since 2013 (3a4f17059). But it's time – as it is true for every technical solution in this world – to say goodbye. The original article states, the browsers currently [[ https://caniuse.com/#feat=svg-css | being supported by this technique are basically ]] - Internet Explorer 8 and - Android 2.1-2.3 Reduced testcase: https://codepen.io/Volker_E/full/JjdZVpj – you should see - “SVG” labelled when SVG is visible - “PNG” labelled when PNG is visible We need to rethink this support out of practicality and current realities, which I've just proposed in T248061 **Cons** - Icons in icon-only interactive elements might not be visible to these users, but we have sparely put such elements into our interfaces outside of Grade A support. **Pros** - Removal of PNG fallbacks and duplication of work for designers/implementors - Removal of extra mixin calls, it will be enough to rely on normal `background-image` property. - Removal of CSS code, with an impact slightly smaller, but still measurable similar to 792ba935677 - Additionally IE 9 and Fx 3.6 would start showing SVGs as the technique is currently excluding them

`.background-image-svg()` was a [[ https://pauginer.com/post/36614680636/invisible-gradient-technique | fantastic solution ]] and has provided peace of mind on the usage of SVGs with PNG fallbacks for browsers since 2013 (3a4f17059). But it's time – as it is true for every technical solution in this world – to say goodbye. The original article states, the browsers currently [[ https://caniuse.com/#feat=svg-css | being supported by this technique are basically ]] - Internet Explorer 8 and - Android 2.1-2.3 Reduced testcase: https://codepen.io/Volker_E/full/JjdZVpj – you should see - “SVG” labelled when SVG is visible - “PNG” labelled when PNG is visible We need to rethink this support out of practicality and current realities, which I've just proposed in T248061 **Cons** - Icons in icon-only interactive elements might not be visible to these users, but we have sparely put such elements into our interfaces outside of Grade A support. **Pros** - Removal of PNG fallbacks and duplication of work for designers/implementors - Removal of extra mixin calls, it will be enough to rely on normal `background-image` property. - Removal of CSS code, with an impact slightly smaller, but still measurable similar to 792ba935677 - Additionally IE 9 and Fx 3.6 would start showing SVGs as the technique is currently excluding them