Esiste un polyfill per l’attuale modulo flessibile CSS Layout Module come da W3C CR (display: flex ecc.)?

Flexiejs.com ha il polyfill del browser per i CSS box flessibili, ma si basa su una bozza precedente sull’argomento, che è incompatibile con l’attuale modulo di layout della scatola flessibile CSS raccomandato da Candidati del W3C. Esiste un polyfill, almeno parziale, per le scatole flessibili come definito nel CR?

Al momento non esiste un polyfill che implementa la W3C Candidate Recommendation.

L’autore di flexie.js ha menzionato qualche tempo fa che stava lavorando all’aggiornamento di flexie.js ma da allora non è stato pubblicato nulla. Quindi è difficile dire se o quando si concretizzerà.

2014 risposta aggiornata

In breve: al momento della scrittura (2014 ottobre), non esiste un polyfill javascript che implementa la W3C Candidate Recommendation.

Esistono 2 implementazioni di polyfill javascript:

  1. Flexie.js avuto a malapena qualche aggiornamento da metà 2012 – guarda il grafico dei contributi – e supporta solo il modello Flexbox 2009 , che significa un insieme limitato di proprietà.

  2. Reflexie.js è ancora intatto al momento della stesura (2014 ottobre) e, come sottolineato da Ilya Streltsyn nel commento di un’altra risposta, “è ancora ‘Sooooo non pronto per la prima serata'”, come ha affermato l’autore nella pagina principale di il progetto . L’ultimo impegno è stato effettuato il 1 ° novembre 2012 …

risorse

  • Flexie.js su Github
  • Reflexie.js su Github

C’è una fantastica risorsa di Chris Coyier su:

http://css-tricks.com/using-flexbox/

Il problema è che ci sono tre bozze in uso per la flexbox. L’articolo di Chris Coyier ripercorre tutte e tre le versioni e spiega come interlacciale per il supporto cross-browser. Ho estratto i bit rilevanti di seguito.

Per la display:flex :

 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; 

Per flex:1 :

 -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

Per order:1 :

 -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; 

Sostiene il supporto per:

  • Chrome qualsiasi
  • Firefox qualsiasi
  • Safari any
  • Opera 12.1+
  • IE 10+
  • qualsiasi iOS
  • Qualsiasi Android

Penso che il resto delle proprietà di flexbox non siano state sottoposte a revisioni, quindi puoi semplicemente usare il set di prefissi “standard” ( -ms , -moz , -webkit , non prefisso).