zoukankan      html  css  js  c++  java
  • CSS 模块的侦测

    CSS 的规格发展太快,新的模块层出不穷。不同浏览器的不同版本,对 CSS 模块的支持情况都不一样。有时候,需要知道当前浏览器是否支持某个模块,这就叫做“CSS模块的侦测”。

    一个比较普遍适用的方法是,判断元素的style对象的某个属性值是否为字符串。

    typeof element.style.animationName === 'string';
    typeof element.style.transform === 'string';

    如果该 CSS 属性确实存在,会返回一个字符串。即使该属性实际上并未设置,也会返回一个空字符串。如果该属性不存在,则会返回undefined

    document.body.style['maxWidth'] // ""
    document.body.style['maximumWidth'] // undefined

    上面代码说明,这个浏览器支持max-width属性,但是不支持maximum-width属性。

    注意,不管 CSS 属性名的写法带不带连词线,style属性上都能反映出该属性是否存在。

    document.body.style['backgroundColor'] // ""
    document.body.style['background-color'] // ""

    另外,使用的时候,需要把不同浏览器的 CSS 前缀也考虑进去。

    var content = document.getElementById('content');
    typeof content.style['webkitAnimation'] === 'string'

    这种侦测方法可以写成一个函数。

    function isPropertySupported(property) {
      if (property in document.body.style) return true;
      var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
      var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);
    
      for(var i = 0; i < prefixes.length; i++){
        if((prefixes[i] + prefProperty) in document.body.style) return true;
      }
    
      return false;
    }
    
    isPropertySupported('background-clip')
    // true
  • 相关阅读:
    Linux下Socket编程之地址结构
    矫正Fedora 8中livna源Nvidia驱动托付关连
    Firefox3 RC1颁布各种新特征发扬阐发更平定
    Fedora 8中完全开启compizfusion特效
    编译安置gsopcast SVN版
    Sopcast for linux更新至3.01!
    措置惩罚Fedora 8中的装备权限标题成绩
    vsftp假造用户设置(Ubuntu8.04)
    QQ2008贺岁版 on FedoraBy wine 0.9.58
    vFU NET
  • 原文地址:https://www.cnblogs.com/ziyoublog/p/9914966.html
Copyright © 2011-2022 走看看