JavaScript框架设计
上QQ阅读APP看书,第一时间看更新

4.3 样式的支持侦测

CSS3带来许多好用的样式,但麻烦的是每个浏览器都有自己的私有前缀。在mass Framework提供了一个cssName方法处理它们。有就返回可用的驼峰风格样式名,没有就null。

      var prefixes = ['', '-webkit-', '-o-', '-moz-', '-ms-'];
      var cssMap = {
          "float": $.support.cssFloat ? 'cssFloat' : 'styleFloat',
          background: "backgroundColor"
      };
      function cssName(name, host, camelCase) {
          if (cssMap[name]) {
              return cssMap[name];
          }
          host = host || document.documentElement
          for (var i = 0, n = prefixes.length; i < n; i++) {
              camelCase = $.String.camelize(prefixes[i] + name);
              if (camelCase in host) {
                  return (cssMap[name] = camelCase);
              }
          }
          return null;
      }

一个样式名可以对应N种样式值,如display的值就有N多种取值。如果要探知浏览器是否支持某一种,会吐血的。为此,浏览器做了一个善举,最近给出一个叫CSS.supports的API。如果不支持,则尝试一下这个开源项目,显然它还有很多探不出来的。

https://github.com/termi/CSS.supports