example - ¿Hay algún código de javascript(polyfill) disponible que habilite Flexbox(2012, css3), como modernizr?

modernizr npm

Question

Estoy buscando cualquier biblioteca de JavaScript que me guste modernizr ( que en realidad no lo hace ) habilita flexbox para "navegadores más antiguos" (un relleno múltiple).

Sí, sé que esta es una característica realmente nueva (de hecho "no hay" es una respuesta válida), pero estoy esperando algo como esto, siempre tengo dificultades con el centrado horizontal + vertical, esto realmente ayudará y acortará la obra.

Me refiero a este flexbox: http://weblog.bocoup.com/dive-into-flexbox/ (el más nuevo)

Answer 1

Puede ser demasiado temprano para esto. WebKit lo implementó bastante recientemente, no hay ningún indicio de soporte en ningún WebKit móvil en absoluto, Opera acaba de lanzar soporte para él, y la implementación de Gecko todavía está en alfa. ¿ES DECIR? Hah.

Pero, por lo que puedo decir, no, no hay polyfill para la nueva flexbox. Flexie admite el viejo flexbox y tiene un ticket abierto para admitir la nueva sintaxis ... ¿quizás podría ayudarlos?

Siempre puedes usar el viejo flexbox, supongo, pero luego te vuelves obsoleto. Sucky situación.

Answer 2

Tendrás que crear el tuyo propio. http://www.sitepoint.com/detect-css3-property-browser-support/ tiene una sección titulada "Rolando su propio código de detección"

Básicamente necesitarás algo como esto:

// 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");
}

Para expandir eso y crear una función:

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");
}
}