Qual è un modo corretto per rilevare il supporto di css "flex-box" e "flex-wrap"?

Question

Sto cercando una soluzione su come possiamo detect il supporto di css flex-box e flex-wrap da JavaScript.

Sono a conoscenza di modernizr che può eseguire il lavoro ma il mio client non ci consente di caricare alcun script nella sezione head, sfortunatamente questo non funziona durante il caricamento nel footer.

Qual è un modo corretto per ottenere questo rilevamento su tutti i tipi di browser/dispositivi?

Answer 1

come è possibile rilevare il supporto di css flex-box e flex-wrap tramite JavaScript.

Creare un elemento e controllare la proprietà di stile. Se è supportato, non restituirà nulla, ad esempio '' altrimenti restituirà undefined.

Ad esempio, se si esegue il frammento di seguito in Chrome otterrete undefined per columns e '' per flex-wrap.

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>

---

Anche se lei ha detto solo JavaScript nella tua domanda, ma c'è un modo CSS di rilevamento funzione pure.

@supports rule, also called CSS Feature Queries.

Fornisci la dichiarazione CSS come condizione e il browser la eseguirà per restituire se supporta o meno. Ad esempio, il seguente CSS applicherà il colore di sfondo verde se flex è supportato.

@supports (display: flex) { 
    div { background-color: #0f0; } 
} 

Il supporto del browser è buono tra tutti i browser moderni, tranne IE (come al solito). Per IE e (Safari < 9), è necessario mantenere un'opzione di fallback quando la regola @supports non riesce.

---

Combinando due precedenti, there is an API around that così che è possibile utilizzare in JavaScript per fare il rilevamento funzione.

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>