频道栏目
首页 > 程序开发 > 综合编程 > 其他综合 > 正文
检测浏览器对样式的支持
2011-03-29 13:35:18      个评论      
收藏   我要投稿

真不知谁开了个坏头,搞了什么-xxx-前缀,CSS3上大量充斥着这样的私有实现,因此检测样式变得非常麻烦。参考外国的一些实现,搞出自己的测试程序:

//by 司徒正美 

//https://www.cnblogs.com/rubylouvre/archive/2011/03/28/1998223.html 

      var getStyleProperty = (function(){ 

        var prefixes = [, -ms-,-moz-, -webkit-, -khtml-, -o-]; 

        var reg_cap = /-([a-z])/g; 

        function getStyleProperty(css, el) { 

          el = el || document.documentElement; 

          var style = el.style,test; 

          for (var i=0, l=prefixes.length; i < l; i++) { 

            test = (prefixes[i] + css).replace(reg_cap,function($0,$1){ 

              return $1.toUpperCase(); 

            }); 

            if(test in style){ 

              return test; 

            } 

          } 

          return null; 

        } 

        return getStyleProperty; 

      })();

好了,我们对以下CSS属性进行测试:(发现IE9真是加班出来的鬼东西......)

log(getStyleProperty(column-count));
log(getStyleProperty(column-gap));
log(getStyleProperty(column-rule));
log(getStyleProperty(column-rule-color));
log(getStyleProperty(column-rule-style));
log(getStyleProperty(column-rule-width));
log(getStyleProperty(column-span));
log(getStyleProperty(column-width));
log(getStyleProperty(columns));
log(getStyleProperty(float-offset));

log(getStyleProperty(animation));
log(getStyleProperty(animation-delay));
log(getStyleProperty(animation-direction));
log(getStyleProperty(animation-duration));
log(getStyleProperty(animation-iteration-count));
log(getStyleProperty(animation-name));
log(getStyleProperty(animation-play-state));
log(getStyleProperty(animation-timing-function));


log(getStyleProperty(grid-columns));
log(getStyleProperty(grid-rows));


log(getStyleProperty(hanging-punctuation));
log(getStyleProperty(line-break));
log(getStyleProperty(punctuation-trim));
log(getStyleProperty(text-align-last));
log(getStyleProperty(text-autospace));
log(getStyleProperty(text-decoration));
log(getStyleProperty(text-decoration-color));
log(getStyleProperty(text-decoration-line));
log(getStyleProperty(text-decoration-skip));
log(getStyleProperty(text-decoration-style));
log(getStyleProperty(text-emphasis));
log(getStyleProperty(text-emphasis-color));
log(getStyleProperty(text-emphasis-position));
log(getStyleProperty(text-emphasis-style));
log(getStyleProperty(text-justify));
log(getStyleProperty(text-outline));
log(getStyleProperty(text-shadow));
log(getStyleProperty(text-underline-position));
log(getStyleProperty(white-space-collapsing));
log(getStyleProperty(word-break));
log(getStyleProperty(word-wrap));


log(getStyleProperty(target));
log(getStyleProperty(target-name));
log(getStyleProperty(target-new));
log(getStyleProperty(target-position));

log(getStyleProperty(border-image));
log(getStyleProperty(border-image-outset));
log(getStyleProperty(border-image-repeat));
log(getStyleProperty(border-image-slice));
log(getStyleProperty(border-image-source));
log(getStyleProperty(border-image-width));
log(getStyleProperty(border-radius));

log(getStyleProperty(box-align));
log(getStyleProperty(box-decoration-break));
log(getStyleProperty(box-direction));
log(getStyleProperty(box-flex));
log(getStyleProperty(box-lines));
log(getStyleProperty(box-ordinal-group));
log(getStyleProperty(box-orient));
log(getStyleProperty(box-pack));
log(getStyleProperty(box-shadow));
log(getStyleProperty(rotation));
log(getStyleProperty(rotation-point));

log(getStyleProperty(marquee-direction));
log(getStyleProperty(marquee-loop));
log(getStyleProperty(marquee-play-count));
log(getStyleProperty(marquee-speed));
log(getStyleProperty(marquee-style));
log(getStyleProperty(overflow-style));


log(getStyleProperty(box-sizing));
log(getStyleProperty(nav-index));
log(getStyleProperty(nav-x));
log(getStyleProperty(outline));
log(getStyleProperty(outline-color));
log(getStyleProperty(outline-offset));
log(getStyleProperty(outline-style));
log(getStyleProperty(outline-width));
log(getStyleProperty(resize));
log(getStyleProperty(text-overflow));

log(getStyleProperty(transform));
log(getStyleProperty(transform-origin));
log(getStyleProperty(transform-style));


log(getStyleProperty(background-clip));
log(getStyleProperty(background-origin));
log(getStyleProperty(background-size));

log(getStyleProperty(transition));
log(getStyleProperty(transition-delay));
log(getStyleProperty(transition-duration));
log(getStyleProperty(transition-property));
log(getStyleProperty(transition-timing-function));

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 样式 浏览器
上一篇:信XML,得自信
下一篇:互联网产品设计进阶(16)灵活使用层布局页面
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站