js判断并告知支持css属性（值）的何种状况

前言

当咱们想用某个css新特性时，老是会在乎它的兼容性状况，或许咱们会去搜索它的兼容性，哪些浏览器合适哪些不合适，在这些已知的状况下再选择是否是使用或如何使用，这是一个已知咱们即将用于什么浏览器下做出的选择。

但咱们每每不知道本身开发的页面用户会在哪一个浏览器上进行打开，这时咱们须要根据实际使用浏览器状况来判断采用何策略。这时就须要用js来判断，咱们要使用css属性可否起效。

css属性的兼容性，是有两类的，一类是，css属性自己，如position；另外一类是，css属性值，如，对于position属性的sticky值

目标

咱们想知道某个css属性（值）是否起效，通常被告知结果是“起效”或“不起效”。可是css属性存在浏览器私有属性一说，即会有加了浏览器前缀才会生效的css属性。

因此你更加须要知道，对于目前浏览器来讲，哪一个前缀或不须要前缀的css属性才会起效，而不单单是知道起效与否（本身每一个前缀做为输入值进行校验，是繁琐的！网络上的不少资料每每会告诉你是否支持你指定的css，返回的boolean值）

因此下面的方法，只须要你把css属性（值）做为输入值，不须要带上前缀，便能告知你，当前使用的浏览器支持哪一个前缀的用法或压根不须要前缀。

检查css属性名

该方法检查的是css的属性自己，即属性名，即写css的时候:的左侧。若是返回值是空，那么证实浏览器不支持该属性。

/** * 告知浏览器支持的指定css属性状况 * @param {String} key - css属性，是属性的名字，不须要加前缀 * @returns {String} - 支持的属性状况 */
function validateCssKey(key) {
    const jsKey = toCamelCase(key); // 有些css属性是连字符号造成
    if (jsKey in document.documentElement.style) {
        return key;
    }
    let validKey = '';
    // 属性名为前缀在js中的形式，属性值是前缀在css中的形式
    // 经尝试，Webkit 也但是首字母小写 webkit
    const prefixMap = {
        Webkit: '-webkit-',
        Moz: '-moz-',
        ms: '-ms-',
        O: '-o-'
    };
    for (const jsPrefix in prefixMap) {
        const styleKey = toCamelCase(`${jsPrefix}-${jsKey}`);
        if (styleKey in document.documentElement.style) {
            validKey = prefixMap[jsPrefix] + key;
            break;
        }
    }
    return validKey;
}

/** * 把有连字符号的字符串转化为驼峰命名法的字符串 */
function toCamelCase(value) {
    return value.replace(/-(\w)/g, (matched, letter) => {
       return letter.toUpperCase();
   });
}
复制代码

检查css属性值

该方法检查的是css的属性的值，即写css的时候:的右侧。若是返回值是空，那么证实浏览器不支持该属性值。

这里分为两个版本，一个是es6版本，一个是基础的js版本。

纯属本身多余写了两个版本

/** * 检查浏览器是否支持某个css属性值（es6版） * @param {String} key - 检查的属性值所属的css属性名 * @param {String} value - 要检查的css属性值（不要带前缀） * @returns {String} - 返回浏览器支持的属性值 */
function valiateCssValue (key, value) {
    const prefix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    const prefixValue = prefix.map(item => {
        return item + value;
    });
    const element = document.createElement('div');
    const eleStyle = element.style;
    // 应用每一个前缀的状况，且最后也要应用上没有前缀的状况，看最后浏览器起效的何种状况
    // 这就是最好在prefix里的最后一个元素是''
    prefixValue.forEach(item => {
        eleStyle[key] = item;
    });
    return eleStyle[key];
}

/** * 检查浏览器是否支持某个css属性值 * @param {String} key - 检查的属性值所属的css属性名 * @param {String} value - 要检查的css属性值（不要带前缀） * @returns {String} - 返回浏览器支持的属性值 */
function valiateCssValue (key, value) {
    var prefix = ['-o-', '-ms-', '-moz-', '-webkit-', ''];
    var prefixValue = [];
    for (var i = 0; i < prefix.length; i++) {
        prefixValue.push(prefix[i] + value)
    }
    var element = document.createElement('div');
    var eleStyle = element.style;
    for (var j = 0; j < prefixValue.length; j++) {
         eleStyle[key] = prefixValue[j];
    }
    return eleStyle[key];
}
复制代码

总结

咱们能够简单地上述对于两种形式的css兼容性进行合并，不用显式地采用调用检查属性名仍是属性值的方法，直接传入css，告知浏览器支持的状况。

function validCss (key, value) {
    const validCss = validateCssKey(key);
    if (validCss) {
        return validCss;
    }
    return valiateCssValue(key, value);
}
复制代码

未经容许，请勿私自转载