当前位置:编程学习 > 网站相关 >>

检测浏览器对样式的支持

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

//by 司徒正美 

//http://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));

 

补充:综合编程 , 其他综合 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,