Wie erkennt man die Unterstützung von css "flex-box" und "flex-wrap"?

Question

Ich bin auf der Suche nach einer Lösung, wie wir detect die Unterstützung von CSS flex-box und flex-wrap von JavaScript.

Ich bin bewusst von modernizr, die den Job erledigen können, aber mein Client erlaubt uns nicht, Skripte in den Kopfbereich zu laden, leider funktioniert das nicht beim Laden in der Fußzeile.

Was ist ein geeigneter Weg, um diese Erkennung auf allen Arten von Browsern/Geräten zu erreichen?

Answer 1

Wie können wir die Unterstützung von Css Flex-Box und Flex-Wrap von JavaScript erkennen.

Erstellen Sie ein Element und überprüfen Sie die Stileigenschaft. Wenn es unterstützt wird, gibt es nichts zurück, d. H. '', andernfalls wird undefined zurückgegeben.

Zum Beispiel, wenn Sie den folgenden Code-Schnipsel in Chrome laufen Sie undefined für columns und '' für flex-wrap bekommen.

Snippet:

snippet.log('flex = ' + document.createElement("p").style.flex); 
 
snippet.log('columns = ' + document.createElement("p").style.columns); 
 
snippet.log('flex-wrap = ' + document.createElement("p").style.flexWrap);

<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

---

Obwohl Sie nur Javascript in Ihrer Frage erwähnt haben, aber es gibt einen CSS-Weg als auch der Feature-Erkennung.

Die @supports rule, also called CSS Feature Queries.

Sie geben die CSS-Deklaration als Bedingung an, und der Browser führt das aus, um zurückzugeben, ob er unterstützt wird oder nicht. Das folgende CSS wendet beispielsweise eine grüne Hintergrundfarbe an, wenn flex unterstützt wird.

Die Browser-Unterstützung ist gut unter allen modernen Browsern, abgesehen von IE (wie üblich). Für IE und (Safari < 9) müssen Sie eine Fallback-Option beibehalten, wenn die @supports Regel fehlschlägt.

---

die beiden oben genannten Kombination there is an API around that und die Sie in Javascript verwenden können Feature-Erkennung zu tun.

var isColumnSupported = CSS.supports('columns', ''); 
 
snippet.log(isColumnSupported); 
 

 
var isFlexWrapSupported = CSS.supports('flex-wrap', 'wrap'); 
 
snippet.log(isFlexWrapSupported);

<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>