How can I check if CSS calc() is available using JavaScript?


Tags: javascript,css

Problem :

Is there a way to check if the CSS function calc is available using JavaScript?

I found lot of questions and articles about getting the same behaviour as calc using jQuery, but how can I only check if it's available?



Solution :

In Modernizr you can find the test as css-calc currently in the non-core detects. They use the following code:

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

    CSS Howto..

    How to call am (image) div inside of a list?

    Using jquery to swap text, how to revert other text to original?

    How to set the CSS content property with a Google Material Icon?

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    toggle show/hide for hidden menu buttons (responsive)

    How to adjust contents to automatically fit size of the screen?

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    How to generate CSS with loop in less

    How to edit css margin-top for a text in mobile version

    How to animate CSS with a delay between an unknown number of elements [duplicate]

    How to create css classes which are “stronger” that elements?

    How to position css sprite play button within video image

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How to set margin for elements in my case

    How to add css in post? [closed]

    How to remove pipe separator of the first list item on the line?

    How to remove dotted border around active hyperlinks in IE8 with CSS

    how to make a CSS animation end point the right edge of the browser

    CSS - How to make
    side by side not wrap when user make browser size changing?

    How to make my words not go under my picture in css

    How can I create a CSS “well” effect similar to bootstap but deeper?

    How to align text differently inside a single inline element with CSS?

    Jquery Cycle Plugin issue with extending the slideshow “outside” the page boundary

    how to make a list float left or not according to the size of the browser?

    How to hide classes on some pages in WordPress?

    CSS- how to give an object with scooped corners a border colour?

    How to hide specific TD borders in a TABLE using CSS

    How to add dynamic CSS style sheet for single xhtml file

    How hard is it to master semantic markup and good CSS?

    How to change iframe pages without the parent page changing with external links using CSS