js判断并告知支持css属性（值）的 情况分析CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现css浮动 float属性详解css选择器四大类：基本、组合、属性、伪类详解CSS3新增的背景属性

 /** * 告知浏览器支持的指定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属性值（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]; }

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