prefixfree.js是一款css无需写浏览器兼容前缀的js插件-BFW插件库

prefixfree.js是一款css无需写浏览器兼容前缀的js插件

日常开发中，经常碰到一些css属性需要浏览器器兼容写法，一个语句为了兼容要重复写好几遍，prefixfree就是解决这个问题的

例如：keyframes和transform需要加前缀-webkit-表示如果在chrome浏览器运行的话，还有火狐的前缀是-moz-

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(15deg) }
    to { -webkit-transform: rotate(375deg) }    
}

那么通过引入prefixfree就能解决上面的问题，不需要写兼容前缀

首页在页面上引入prefixfree

  <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>

然后编写无前缀css

@keyframes rotate {
        from {
            transform: rotate(10deg)
        }
        to {
            transform: rotate(375deg)
        }
    }

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prefixfree.js"></script>

    <style>
@keyframes rotate {
        from {
            transform: rotate(10deg)
        }
        to {
            transform: rotate(375deg)
        }
    }

        .testobj {
            position: absolute;

            background: #2596cc;
            background-image: linear-gradient(190deg, transparent,blue),linear-gradient(transparent, transparent);
            color: white;
            line-height: 3em;
            font-size: 140%;
            text-align: center;
            text-decoration: initial;
            text-shadow: .08em .08em .2em rgba(0,0,0,.6);
            border-radius: 50%;
            box-shadow: .1em .2em .4em -.2em black;
            box-sizing: border-box;
            top: 3em;
            left: 4em;
            width: 6em;
            height: 6em;
            padding: 1em 0;
            animation: rotate 5s infinite;
       
        }

    </style>
</head>
<body>
    <div class="testobj">
        %_%
    </div>
</body>
</html>

prefixfree.js是一款css无需写浏览器兼容前缀的js插件

网友评论0

selectivizr-min.js

html5shiv.js

jquery.placeholder.js

prefixfree.js

hand.js