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.

回答1:

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

回答2:

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/

回答3:

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.

来源：https://stackoverflow.com/questions/26417968/how-to-test-for-css-properties-like-modernizr-js

标签

javascript

css

modernizr