检测浏览器对样式的支持

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

//by 司徒正美
//http://www.cnblogs.com/rubylouvre/archive/2011/03/28/1998223.html
    　　　　　  var getStyleProperty =  new function (css, el) {
                    var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];
                    var reg_cap = /-([a-z])/g;
                    return function(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;
                    }
                }

好了，我们对以下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'));

点我执行代码