2

This is a weird question, but I'm using flex on my website and question is: Is it possible to detect via JavaScript or jQuery or something like that if flex is working or not ?? Because flex is not supported on IE 10 and lower and if it would detect that it's being viewed on old web browsers or it's not working, there will be message like: Your web browser is too old, download a new one. Is this even possible ?? Thank you for answers.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
SenTisso
  • 579
  • 7
  • 18
  • simply detect the browser in this case and you will cover more properties (the common IE detection) – Temani Afif Apr 29 '18 at 21:11
  • 2
    I woudn't care about old browsers, but maybe check [this answer](https://stackoverflow.com/questions/21825157/internet-explorer-11-detection#answer-21825207). – skobaljic Apr 29 '18 at 21:12
  • 1
    Yes, use [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports). – steveax Apr 29 '18 at 21:13
  • supports is not supported in IE heh. – skobaljic Apr 29 '18 at 21:14
  • 1
    You can do something called feature detection, a popular one for javascript is Modernizer, https://modernizr.com/ – Keith Apr 29 '18 at 21:15
  • You're looking for [feature-detection](https://modernizr.com/docs/#what-is-feature-detection). – tao Apr 29 '18 at 21:15
  • @skobaljic, exactly! Browsers that do not support `@supports` will skip right over the style declarations in that block. – steveax Apr 29 '18 at 22:22

1 Answers1

1

As far as I remember css flex or order property is animatable, so you can trigger a class on an element with visibility hidden to turn on flex property. Then attach an eventListener for the transitionend event, and check if the property is from flex by checking event.propertyName, if this event is fired, it means it is supported. Here is a fiddle to illustrate, a class called active is turned on a div with #mock id and listened for transition:

https://jsfiddle.net/ibowankenobi/yLv39dsm/1/

document.getElementById("mock")
.addEventListener("transitionend",function(e){if(e.propertyName.match(/flex/gi)){alert("flex is supported")}});
setTimeout(function(){document.getElementById("mock").classList.add("active");},1000);

Apart from above, this question can help:

Detecting flex-wrap support in browsers

Also there seems to be an approach that seems to work:

https://gist.github.com/davidhund/b995353fdf9ce387b8a2

And of course, Modernizr probably has this already.

ibrahim tanyalcin
  • 5,643
  • 3
  • 16
  • 22
  • It returns this problem in the console: Uncaught TypeError: Cannot read property 'addEventListener' of null at scripts.js:2 – SenTisso Apr 30 '18 at 14:53
  • Does it say this in the fiddle I linked? Seems like the "mock" id div is not there or the script is in the head, so html is not parsed yet. – ibrahim tanyalcin Apr 30 '18 at 15:00
  • No it doesn't say it. – SenTisso Apr 30 '18 at 17:26
  • I cannot reproduce it in the fiddle, do you get the same error there as well? – ibrahim tanyalcin Apr 30 '18 at 17:28
  • No, it works fine in that fiddle. – SenTisso Apr 30 '18 at 17:33
  • Then would you make me your version of your fiddle?So i can see what is going on – ibrahim tanyalcin Apr 30 '18 at 17:37
  • The problem was I had that script in the head, basically before that divs, but now I just put it after that divs and it works just fine. Thank you. Btw. one more question, when I want something to happen when flex is NOT supported I just add `else {}` in that JS script right ? Just like in this fiddle: https://jsfiddle.net/a4fsd0rn/ ? – SenTisso Apr 30 '18 at 18:57
  • yes, replace the alert with whatever you wish to execute – ibrahim tanyalcin Apr 30 '18 at 18:58
  • I mean when it is **NOT** supported. I just add else there. Like in this fiddle: https://jsfiddle.net/a4fsd0rn/ ? – SenTisso Apr 30 '18 at 19:00
  • Ah, no, you cannot do that, because other transitions might be triggering it too. Start with a default setting assuming flex is not supported, if the if block triggers than override the default css or whatever behavior you want to execute – ibrahim tanyalcin Apr 30 '18 at 19:02
  • Ohhh... ok. So there is not possibility to somehow other way do that ?? – SenTisso Apr 30 '18 at 19:04
  • Ah man, I'm so stupid, we create this mock element with visibility hidden, and we know that the only transition will be from flex, so yes you can add an else block there and execute it too. My head wondered into other situations. Sorry, yes you can do it.After you do the check do not forget to remove the mock element. – ibrahim tanyalcin Apr 30 '18 at 19:05
  • No problem and thank you very much for your help and time. I appreciate that and have a nice rest of the day. – SenTisso Apr 30 '18 at 19:14