check-css-prop-support

check-css-prop-support.js

// via:
//   * https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations/Detecting_CSS_animation_support
//   * https://gist.github.com/jackfuchs/556448
$.support.cssProperty = function(prop) {
    var domPrefixes = ',Webkit,Moz,O,ms,Khtml'.split(','),
        domPrefixesLength = domPrefixes.length,
        isSupport = false;

    for (var i = 0; i < domPrefixesLength; i++) {
        // i = 0, standard method, do not trans to uppercase
        if (i) {prop = prop.charAt(0).toUpperCase() + prop.substr(1); }
        isSupport = (domPrefixes[i] + prop) in document.body.style;

        if (isSupport) {
            break;
        }
    }

    return isSupport;
}

僅針對 property 判斷 support
不包含 value 判斷

ex: display: flex;

use it with jQuery query set:

jqEleCollection.addClass(function checkCssPropSupport() {
    var properties = [
            $.support.cssProperty('animation'),
            $.support.cssProperty('borderRadius'),
            $.support.cssProperty('boxShadow')
        ],
        classes = [
            'cssanimations',
            'borderradius',
            'boxshadow'
        ];

    for (var i = properties.length - 1; i >= 0; i--) {
        if (!properties[i]) {
            classes[i] = 'no-' + classes[i];
        }
    }

    return classes.join(' ');
});