Wie kann ich überprüfen, ob CSS calc() mit JavaScript verfügbar ist?

Question

Gibt es eine Möglichkeit zu überprüfen, ob the CSS function calc mit JavaScript verfügbar ist?

Ich habe viele Fragen und Artikel über das gleiche Verhalten wie calc mit jQuery gefunden, aber wie kann ich nur prüfen, ob es verfügbar ist?

Answer 1

In Modernizr finden Sie Der Test wird als css-calc derzeit im Nicht-Kern erkannt. Sie verwenden den folgenden Code:

Answer 2

Die Calc-Erkennung wurde dem Modernisierer gemäß ihrer Nachrichtenseite hinzugefügt. http://modernizr.com/news/

sowie Unterstützung für bestehende Tests Verschärfung, haben wir auch hinzugefügt eine Reihe neuer erfasst, die von der Community viele:

[...] 
css-calc 

Answer 3

Ein bisschen spät auf die Party, aber ich dachte mir, ich sollte dies teilen, weil ich selbst kämpfte mit ihm. Kam mit der Idee von jQuery, ich kann ein Div erstellen, das den Wert calc() in einer CSS-Eigenschaft (wie in diesem Fall Breite) und auch eine Fallbackbreite verwendet, falls der Browser calc() nicht unterstützt. Jetzt, um zu überprüfen, ob es es unterstützt oder nicht, das ist, was ich getan habe:

Lassen Sie uns den CSS-Stil für das derzeit "nicht vorhandene" div-Element erstellen.

/* CSS3 calc() fallback */ 
#css3-calc { 
    width: 10px; 
    width: calc(10px + 10px); 
    display: none; 
} 

Nun, wenn der Browser Calc nicht unterstützt(), würde das Element eine Breite Wert von 10 zurück, wenn es ihr nicht unterstützt, es mit 20 zurückkehren würde Spielt keine Rolle, was die Werte sind genau , aber solange die zwei Breiteneigenschaften am Ende unterschiedliche Werte haben (in diesem Fall 10 und 20).

Jetzt für das eigentliche Skript. Es ist ziemlich einfach, und ich nehme an, es mit regelmäßigen JavaScript möglich ist auch, aber hier ist der jQuery-Skript:

// CSS3 calc() fallback (for unsupported browsers) 
$('body').append('<div id="css3-calc"></div>'); 
if($('#css3-calc').width() == 10) { 
    // Put fallback code here! 
} 
$('#css3-calc').remove(); // Remove the test element 

---

Alternativ nativer JavaScript zu überprüfen, und die Breite:

#css3-calc { width: 1px; width: calc(1px + 1px); }

if(document.getElementById('css3-calc').clientWidth==1){ 
    // clientHeight if you need height 
    /* ... */ 
} 

Answer 4

var cssCheck = document.createElement("DIV"); 
cssCheck.style.marginLeft = "calc(1px)"; 
if (cssCheck.style.getPropertyValue("margin-left")) 
{ 
    alert("calc is supported"); 
} 
cssCheck = null;