Flexiejs.comにはCSSフレックスボックス用のブラウザポリフィルがありますが、これはこのトピックに関する以前のドラフトに基づいており、現在のW3C候補推奨CSSフレキシブルボックスレイアウトモジュールと互換性がありません。CRで定義されているフレックスボックスのポリフィルは、少なくとも部分的にありますか?
3 に答える
2014年更新の回答
つまり、執筆時点 (2014 年 10 月) では、W3C 勧告候補を実装する JavaScript ポリフィルはありません。
2 つの JavaScript ポリフィルの実装があります。
Flexie.js
は 2012 年半ば以降、ほとんど更新されていません -貢献グラフを参照してください- 2009 Flexbox モデルのみをサポートしています。つまり、プロパティのセットが限られています。Reflexie.js
Ilya Streltsyn
執筆時点(2014年10月)ではまだ手付かずであり、別の回答のコメントで指摘されているように、 「まだ「プライムタイムの準備ができていない」」と著者がプロジェクトのメインページで述べているように. 最新のコミットは 2012 年 11 月 1 日に行われました...
資力
現在、W3C Candidate Recommendation を実装するポリフィルはありません。
flexie.js の作成者は、少し前に flexie.js の更新に取り組んでいると述べましたが、それ以来何も公開されていません。したがって、それが実際に実現するかどうか、またはいつ実現するかはわかりません。
Chris Coyier による素晴らしいリソースが次の場所にあります。
http://css-tricks.com/using-flexbox/
問題は、フレックスボックスに使用されている 3 つのドラフトがあることです。Chris Coyier の記事では、3 つのバージョンすべてと、クロスブラウザー サポートのためにそれらをインターリーブする方法について説明しています。以下に関連するビットを抜粋しました。
の場合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;
の場合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+ */
の場合order:1
:
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
彼は次のサポートを主張しています。
- クローム
- Firefox 任意
- サファリ
- オペラ 12.1+
- IE10+
- iOS 任意
- アンドロイド
残りのフレックスボックス プロパティは改訂されていないと思うので、「標準」のプレフィックス セット ( -ms
、-moz
、-webkit
、プレフィックスなし) をそのまま使用できます。