Как проверить, доступен ли CSS calc() с помощью JavaScript?

Ответ 1

В Modernizr вы можете найти тест как css-calc в настоящее время в неосновных обнаружениях. Они используют следующий код:

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;
});

Ответ 2

Немного поздно для вечеринки, но я решил, что должен поделиться этим, потому что я сам боролся с этим. С идеей использования jQuery я могу создать div, который использует значение calc() в свойстве CSS (например, ширина в этом случае), а также резервную ширину, если браузер не поддерживает calc(). Теперь, чтобы проверить, поддерживает ли он это или нет, это то, что я сделал:

Создайте стиль CSS для текущего "несуществующего" элемента div.

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

Теперь, если браузер не поддерживает calc(), элемент вернет значение ширины 10. Если он его поддерживает, он вернется с 20. Не имеет значения, какие значения указаны в точности, но как долго так как два свойства ширины имеют разные значения в конце (в этом случае 10 и 20).

Теперь для фактического script. Это довольно просто, и я полагаю, что это возможно с помощью обычного JavaScript, но здесь jQuery script:

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

В качестве альтернативы, встроенная проверка JavaScript и ширина:

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

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

Ответ 3

Обнаружение Calc было добавлено в модернизатор согласно их странице новостей.  http://modernizr.com/news/

Как и ужесточение поддержки существующих тестов, мы также добавили ряд новых детективов, многие из которых представлены сообществом:

[...]
css-calc

Ответ 4

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