4

@support{...}フレックスボックス ソリューションがサポートされている場合はレイアウトに実装する予定であり、CSS3 のクエリでサポートされているかどうかを機能検出する予定です。

しかし、何をテストすればサポートされていますか? 機能@supportクエリは特定のスタイルのサポートを探し、サポートされている場合はスタイルを実装するため、何をサポートする必要がありますか?

言い換えれば、フレックスボックスのすべての実装がサポートするスタイルは何ですか?

display:box;2009 年のフレックスボックスの実装、display:flexbox;2011 年の短命の実装display:flex;、仕様の現在および最終的な実装のためのものになると思いますか?

4

2 に答える 2

3

フレックスボックス (標準ドラフト) のサポート + 機能クエリのサポート:

  • Opera は同じバージョン (12.1) で両方のサポートを追加しました
  • Firefox は同じバージョン (22) で両方のサポートを追加しましたが、28 ま​​では flex-wrap をサポートしていませんでした
  • Android は、同じバージョン (4.4) で両方のサポートを追加しました
  • Chrome は 21 年に Flexbox のサポートを追加しましたが、機能クエリは 28 年までサポートしていませんでした

古い Flexbox ドラフトのいずれかを排他的にサポートするブラウザーは、機能クエリをサポートしていません。

現時点で機能クエリを Flexbox と組み合わせて実際に使用する唯一の方法は、ブラウザが をサポートしているかどうかを検出することですflex-wrap: wrap。ただし、サポートしているブラウザーとサポートdisplay: flexしていないブラウザーの数をいまだに使用しているというflex-wrap: wrapことは、それらが統計的に重要でないと見なすことができる点です。

.foo {
    display: -ms-flexbox;
    display: -webkit-flex;
}

@supports (flex-wrap: wrap) {
    display: flex;
}

関連:フレキシブル ボックス モデル - 表示: フレックス、ボックス、フレックスボックス?

于 2015-02-14T13:40:16.247 に答える
2

display:box/display:flexboxを実装display:flexし、サポートする可能性が低いブラウザ@supports。さらに、昨日まで Firefox は をサポートしていませんでしたflex-wrap。一方、Internet Explorer 11 は、 をサポートしていますが、 をサポートdisplay:flexしていません@supports。

そのため、Modernizr のような JavaScript ソリューションを使用するdisplay:flexか、ユーザーが任意のプラットフォームで Firefox/Chrome を使用するか、Windows 8 で MSIE11 を使用する可能性が高い場合は、ブラウザーがサポートしていると想定することをお勧めします。iPhone をサポートする場合は、-webkit-プロパティのプレフィックスとフレックスを忘れずにと使用しますdisplay:-webkit-flex。

flexbox は float を自動的に上書きし、flexプロパティは width を上書きできるので、ブラウザー以外の CSS とそうする CSS を混在させることができる可能性がありますdisplay:flex。

于 2014-03-20T15:07:51.537 に答える