CODEWITHSUNDEEP
javascriptcssmodernizr
McShaman
McShaman

Reputation: 3985

How to test for css properties like modernizr.js

I would like to test if a browser supports a CSS property. I know I can use modernizr to do this but I don't want to install an entire library to test for one property.

How does modernizr test for properties? Say I want to test for support for the background-size property.

I scanned through the properties of the document object but couldn't see anything that looked like it would help.

Any ideas or help would be great.

Upvotes: 1

Views: 457

Answers (3)

Jeff
Jeff

Reputation: 2423

Modernizr works by creating an element, applying a css property and then checking the return value of the css property. For example, if you wanted to test for text shadow you would do this:

if (document.createElement("detect").style.textShadow === "") {
    document.getElementsByTagName("html")[0].className += " textshadow";
}

Upvotes: 2

Patrick
Patrick

Reputation: 13974

Modernizr is an open source project - you can literally view the code that powers it. here is background-size detect specifically.

This is a fairly trivial thing to check. You create a dom element, set background-size (both vanilla and all of the vendor prefixed versions) to 100%, and then check the value of backgroundSize on the dom element's style property to see if it kept that value.

That being said - modernizr is pretty lean. You just get the tests you want, and nothing more.

Upvotes: -1

TGH
TGH

Reputation: 39258

I think think this will be specific to each feature since you have to look for certain side effects in the DOM. Here is a link with some ideas http://www.sitepoint.com/detect-css3-property-browser-support/

Upvotes: 1

Related Questions