Jak mogę sprawdzić, czy CSS calc() jest dostępny przy użyciu JavaScript?

Question

Czy istnieje sposób sprawdzenia, czy the CSS function calc jest dostępna przy użyciu JavaScript?

Znalazłem wiele pytań i artykułów dotyczących uzyskania tego samego zachowania, co calc za pomocą jQuery, ale jak mogę tylko sprawdzić, czy jest dostępny?

Answer 1

W Modernizr można znaleźć test jako css-calc obecnie w wykrywaczach nie rdzeniowych. Oni użyć następującego kodu:

Modernizr.addTest('csscalc', function() { 
    var prop = 'width:'; 
    var value = 'calc(10px);'; 
    var el = document.createElement('div'); 

    el.style.cssText = prop + Modernizr._prefixes.join(value + prop); 

    return !!el.style.length; 
}); 

Answer 2

Wykrywanie wyskalowań zostało dodane do modernizatora zgodnie z ich aktualnościami. http://modernizr.com/news/

Jak również zaostrzenie wsparcie dla istniejących badań, Dodaliśmy również szereg nowych wykrywa wiele przedłożony przez społeczność:

[...] 
css-calc 

Answer 3

trochę późno do partii, ale pomyślałem, muszę podzielić się tym, bo byłem sam zmaga się z nim. Dzięki pomysłowi użycia jQuery mogę utworzyć element div, który używa wartości calc() we właściwości CSS (takiej jak szerokość w tym przypadku), a także szerokości zastępczej w przypadku, gdy przeglądarka nie obsługuje funkcji calc(). Teraz, aby sprawdzić, czy to obsługuje, czy nie, właśnie to zrobiłem:

Stwórzmy styl CSS dla "nieistniejącego" elementu div.

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

Teraz, jeśli przeglądarka nie obsługuje calc() element powróci szerokość wartość 10. Jeśli nie obsługuje, to wrócić z 20. Nie ma znaczenia, jakie wartości są dokładnie , ale tak długo, jak właściwości dwóch szerokości mają na końcu różne wartości (w tym przypadku 10 i 20).

Teraz dla właściwego skryptu. Jest to dość proste i sądzę, że to możliwe regularne JavaScript zbyt, ale tutaj jest skrypt jQuery:

// 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 

---

Alternatywnie, native check JavaScript i szerokość:

#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;