CODEWITHSUNDEEP
javascriptjquerycss
Babiker
Babiker

Reputation: 18798

How to check a certain CSS capability in a browser using JavaScript?

How to check a certain CSS capability in a browser using JavaScript without detecting its vendor, userAgent, or appName?

Upvotes: 4

Views: 1388

Answers (4)

Tom
Tom

Reputation: 34356

You could use a library like modernizr which can tell you which features are available for the current visitor.

Upvotes: 1

Tomgrohl
Tomgrohl

Reputation: 1767

I've used something like this when creating a cssHook in jQuery:

Testing for a CSS Property:

var div = document.createElement("div"),
    divStyle = div.style;

    $.support.boxSizing =
    divStyle.MozBoxSizing === ''? 'MozBoxSizing' : 
    (divStyle.WebkitBoxSizing === ''? 'WebkitBoxSizing' : 
    (divStyle.MsBoxSizing === ''? 'MsBoxSizing' :
    (divStyle.boxSizing === ''? 'boxSizing' : false)));

    div = divStyle = null; //release memory

Testing for a CSS Property Value:

var div = document.createElement( "div" ),
    css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";    

    div.style.cssText = css;

$.support.linearGradient =
    div.style.backgroundImage.indexOf( "-moz-linear-gradient" )  > -1 ? '-moz-linear-gradient' :
    (div.style.backgroundImage.indexOf( "-webkit-gradient" )  > -1 ? '-webkit-gradient' :
    (div.style.backgroundImage.indexOf( "gradient" )  > -1 ? 'gradient' : false));

    div= null; //release memory

Upvotes: 3

thirtydot
thirtydot

Reputation: 228152

The problem with this question is that the technique is different for each property.

The general idea is to use JavaScript to attempt to use the property, and then to test for some defined behaviour of the property.

See the source code to Modernizr, a feature detection library:

http://www.modernizr.com/ - http://www.modernizr.com/downloads/modernizr-2.0.3.js

For instance:

// http://css-tricks.com/rgba-browser-support/
tests['rgba'] = function() {
    // Set an rgba() color and check the returned value

    setCss('background-color:rgba(150,255,150,.5)');

    return contains(mStyle.backgroundColor, 'rgba');
};

In a browser that does not support rgba, the returned value would not contain rgba.

Also, as suggested by @DanielB, look at jQuery.support for more inspiration. Here's the source:

https://github.com/jquery/jquery/blob/master/src/support.js

Upvotes: 1

DanielB
DanielB

Reputation: 20210

See jQuery.support

Upvotes: 2

Related Questions