判读浏览器是否支持 CSS 属性

更新日期: 2021-11-24阅读量: 33标签: 浏览器

css属性的兼容性,是有两类的,一类是,css属性本身,如position;另一类是,css属性值,如,对于position属性的sticky值。

只需要你把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);
}
摘自 https://juejin.im/post/5e58f398f265da574a1eb569


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10857

主流浏览器对ES6的支持情况

现在使用的js语法,基本是ES5的规范 ,15年出的ES6的规范增加了很多其他语法,要看浏览器的支持情况,如果浏览器不支持那么就会报错,ES6 块级作用域 关键字let, 常量const,对象字面量的属性赋值简写,赋值解构,函数参数

浏览器是多进程还是单进程?

浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种。

javascript判断浏览器类型与版本

除了另无它法,肯定不使用navigator.userAgent来判定浏览器。因为在第一次浏览器大战初期,Netscape占绝对统计地位,大部分人们不愿意兼容其他浏览器,并通过检测其UA让他们的网站只允许Netscape访问

浏览器指纹追踪技术,如何完整修改浏览器指纹?

人手上的指纹之所以具有唯一性,是因为每个指纹具有独特的纹路、这个纹路由凹凸的皮肤所形成。每个人指纹纹路的差异造就了其独一无二的特征。那么浏览器指纹也是同理,获取浏览器具有辨识度的信息,进行一些计算得出一个值

防止用户在浏览器下调试查看js代码

浏览器可以通过F12或者鼠标右键的形式打开html页面,然后就可以看到页面的的信息,如dom结构,加载文件、请求信息等。那有没有办法禁止掉这一行为呢?

总结整理HTML5浏览器支持情况总结整理HTML5浏览器支持情况

HTML5浏览器支持情况:现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等,通过对这些主流web浏览器的发展策略调查,发现它们都支持HTML5上采取了措施。

GeckoView:Mozilla面向移动浏览器打造的渲染引擎

Mozilla 现已推出面向 Android 的全新移动浏览器 Firefox Preview。与大多数浏览器所采用的 Bink 渲染引擎不同,Firefox Preview 的渲染引擎 GeckoView 由 Mozilla 自行开发

Vue单页面应用阻止浏览器记住密码

现象1:路由切换时再次提示是否记住密码,解决办法:这其实是个代码bug,在登录页面,用form把输入框都包起来就行了。现象2:autocomplete=off无效

浏览器会内置类react框架

从Prototype.js到风靡全球的jQuery.js,都是在解决浏览器间DOM操作的差异化问题,同时也提供了简洁友好的API,但是随着标准的不断的推进,现在浏览器间的差异化可以说已经没有了

JS检测CSS属性浏览器是否支持的多种方法

原生CSS.supports语法返回布尔值 true 或者 false ,用来检测是否支持某CSS属性。不考虑兼容性,对CSS的进行检测使用 CSS.supports() 方法,要检测IE浏览器使用赋值取值法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!