当我们想用某个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); }
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- [雨果唱片]李冰《地方民歌·戏曲系列-爱的颂歌》WAV
- 《模拟人生》真人电影官宣!玛格特·罗比担任制片人
- 《星战绝地》系列玩家数超4000万!续作表现超预期
- EA称AI是其业务核心!能提高开发效率、节约成本
- 《十年经典成名好歌 高品质最佳音乐 2CD》[WAV/分轨][1GB]
- 《8个男人的故事 2CD》[WAV/分轨][1GB]
- 《粤语超白金 百听不厌的经典金曲 2CD》[WAV/分轨][1.3GB]
- 群星.1994-全世界精丫华星】【WAV+CUE】
- 杜德伟.1997-知.解2CD【滚石】【WAV+CUE】
- 群星.2022-一不小心喵上你原声大碟【TME影音】【FLAC分轨】
- 《战锤40K星际战士2》卡在正在加入服务器解决方法
- 《勇者斗恶龙怪物仙境3》玩法内容介绍
- 《幸福工厂》无限报错解决方法
- 交错战线原始交易所推荐角色一览
- 战锤40K星际战士2战术职业介绍|战术职业技能效果一览