Are there any javascript code (polyfill) available that enable Flexbox (2012, css3), like modernizr?

Question

I'm looking for any javascript library that like modernizr (which actually does not) enables flexbox for "older browsers" (a polyfill).

Yea I know this is a really new feature (infact "there aren't" is a valid answer), but I'm hoping for something like this, I always have hard time with horizontal + vertical centering, this will really help and shorten the work.

I mean this flexbox: http://weblog.bocoup.com/dive-into-flexbox/ (the newest)

Answer 1

It might be too early for this. WebKit implemented it fairly recently, there's no hint of support in any mobile WebKit at all, Opera just released support for it, and Gecko's implementation is still in alpha. IE? Hah.

But as far as I can tell, no, there's no polyfill for the new flexbox. Flexie supports the old flexbox, and has a ticket open to support the new syntax... maybe you could give them a hand?

You could always use the old flexbox, I suppose, but then you're obsolete out of the gate. Sucky situation.

Answer 2

You're going to have to create your own. http://www.sitepoint.com/detect-css3-property-browser-support/ has a section titled "Rolling Your Own Detection Code"

Basically you'll need something like this:

// detect CSS display:flex support in JavaScript
var detector = document.createElement("detect");
detector.style.display = "flex";
if (detector.style.display === "flex") {
    console.log("Flex is supported");
}
else
{
    console.log("Flex is not supported");
}

To expand on that and create a function:

function DetectDisplayValue(val)
{
  // detect CSS display:val support in JavaScript
  // 
  var detector = document.createElement("detect");
  detector.style.display = val;
  if (detector.style.display === val) {
    console.log("Display value: " + val + " is supported");
  }
  else
  {
      console.log("Display value: " + val + " is not supported");
  }
}