问题
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