search

gavinmcfarland / flex-gap-polyfill

A PostCSS plugin to emulate flex gap using margins
https://gavinmcfarland.github.io/flex-gap-polyfill/
Creative Commons Zero v1.0 Universal
147 stars 6 forks source link

Update: It's not possible to detect if flex-gap is supported #29

Closed jamesst20 closed 3 years ago

jamesst20 commented 3 years ago

From the documentation Known issues No way to detect browsers which support flex-gap, so polyfill is always used.

Found possible detection

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/flexgap.js

gavinmcfarland commented 3 years ago

Thanks @jamesst20. I'll look at how I could add support for this. The trouble is, that is a JavaScript method of detecting if a browser has support for flex-gap and this is a CSS only polyfill. I could maybe integrate a class into the polyfill which turns off/on the polyfill if this class is present.

gavinmcfarland commented 3 years ago

Just an update on this. The next release has an option to specify a class if you're using JS to detect support for flex gap that will avoid the polyfill being used if flex gap is supported natively.

jamesst20 commented 3 years ago

Just an update on this. The next release has an option to specify a class if you're using JS to detect support for flex gap that will avoid the polyfill being used if flex gap is supported natively.

Thanks for the feedback ! :) I will wait for the README update and try it

gavinmcfarland commented 3 years ago

Hi @jamesst20. Thanks for this suggestion. The latest version now allows you to pass in a class selector like .flex-gap-not-supported when used with the Modernizr technique to add a class when flex gap is not supported.

In theory, you could also apply the polyfill with PostCSS in the browser rather than the server but I haven't had time to try this yet.