Flexbox-Fallback zur Anzeige der Tabelle in älteren Browsern

Question

Gibt es einen besseren Weg als unten, um sicherzustellen, dass ich nur Browser anvisiere, die flexbox nicht unterstützen. Ich denke, das könnte funktionieren, aber vielleicht brauche ich einige Styles nur für ie8 und 9, die zum Beispiel auch moderne Browser betreffen könnten. Wäre es am besten, ein separates Stylesheet zu erstellen?

.flex{ 
    display:table; 
    display:flex; 

    .column{ 
    display:table-cell; 
    display: inline-block; 
    } 
} 

Vielen Dank!

Answer 1

Die lange Antwort ist kompliziert. Das Gute daran ist, dass IE10 und die meisten älteren Browser, die heute verwendet werden, flexbox unterstützen. Aber eine alte Syntax mit einer ganz anderen Spezifikation und einem anderen Verhalten. Siehe flexbox support Tabelle. Ich schlage auch vor, Sie haben einen Blick und/oder verwenden Sie diese tool mit der Generate Legacy Flexbox Stile Kontrollkästchen aktiviert, um eine Vorstellung von dem, was beteiligt ist. Es wird Ihnen eine ziemlich kreuzkompatible CSS-Syntax zur Verfügung stellen.

Wenn Ihnen die Kompatibilität mit älteren Browsern so wichtig ist, wie Sie sollten *, wird display:flex; allein nicht empfohlen. Sie müssen diese alten Flexbox-Präfixe hinzufügen. Wie bei IE8 und 9 können Sie ein Tabellen-Fallback verwenden, das in der Tat auf IE8-Desktop-Browser abzielt, wenn Sie müssen. Welche kommt zu folgenden Regelsatz:

.flex-container { 
    display: table;  /* IE < 10, Opera *Presto* Desktop (Now dead) */ 
    display: -webkit-box; /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */ 
    display: -moz-box;  /* Firefox 2 - 27 (2009 Spec), UCMini Android */ 
    display: -ms-flexbox; /* IE10 (2012 Syntax) */ 
    display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */ 
    display: flex;   /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */ 
} 

Anbetracht dessen, dass die Hauptmerkmal Unterschiede zwischen neuen und alten Flexbox spec und support ist der Mangel an flex-wrap. Also neben den vielen ["Flexbugs"] (https://github.com/philipwalton/flexbugs) und zu beachtenden Unterschieden. Beachten Sie, dass Sie nichtflex-wrap verwenden können, wenn Sie umfangreiche Abwärtskompatibilität über 2012 Browser oder IE9 wollen.

* Es ist auch erwähnenswert, dass, wenn Ihre Zielbenutzer in Asien oder Afrika sind, Sie das -webkit-box Modell für den UCBrowser für Android definitiv benötigen, das die neue Syntax derzeit noch nicht unterstützt. (Ab 2016 hat UCBrowser über 10% der weltweiten Nutzung von mobilen Browsern und 25% in Asien). -moz-box wird wohl auch für UCMini benötigt, die auf älteren Firefox basiert (Nutzungsdaten und Aufenthaltsorte sind jedoch öffentlich unbekannt).

Für die Flex-Elemente table-cell oder table-row Fallbacks. Besonders bei der Flexbox-Verschachtelung wird es schwierig.

Allerdings gibt es drei Möglichkeiten zur Verfügung:

1) Verwenden Sie Feature-Erkennung mit einem Skript wie Modernizr. Verwenden Sie den CSS-Dokumententwurf von Modernizr, um die IE8-9-Fallbackregeln über die JS-Featureerkennung zu deklarieren. Wie folgt aus:

html.no-flexbox .flex-item { 
    display: table-cell; 
} 

2) Verwenden Sie IE CSS bedingte Styling:

<!--[if lte IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" /> 
<![endif]--> 

OR

3) Die andere nicht-JS Weg CSS hacks verwendet. Mit einem Anzeigewert, der von anderen Browsern ignoriert und nur von IE8-9 analysiert und angewendet wird.

mit: a)

.flex-item { 
    display: block; 
    display: table-cell\0/; /*IE8-10 */ 
} 

und/oder: b)

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */ 
    .flex-item { display: table-cell; } 
}