假如你现在正学习着强大的Css3,你知道Css3的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀。可能你默默忍受了,因为还没到统一的时间。有没想过给自己减下负,偶然间在网上看到一个js解决方案,正好可以解决这个问题。他会帮你自动识别浏览器,生成对应的Css3样式前缀,这样你就可以直接当作标准属性来使用了。

举个例子:

原先:
-webkit-transform: rotate(15deg);

-o-transform: rotate(15deg);

-moz-transform: rotate(15deg);

-ms-transform: rotate(15deg);

-webkit-border-radius: 50%;

-o-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

现在:

transform: rotate(15deg);

border-radius: 50%;

是不是很棒,使用方法也很简单,简单到和平常引用jQuery一样,不用任何配置,而且文件大小也仅有几K。

引用方式:<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>

该js项目地址为http://leaverou.github.com/prefixfree/。事物总是有两面性,带来方便的同时,也引入了一些问题,因为是基于js的,所以对于一些不支持或者禁用js的浏览器用户是很不友好的,很可能会打乱布局,而且有时候会影响你使用Css的一些技巧(比如你只是想针对某个浏览器使用某个Css3属性,由于这个js的作用,所有浏览器都会应用该条属性,明显这不是你想要的结果)

总结:用于学习练手我很赞成(少敲了好多代码哈哈),用于实际项目的话还是得考虑清楚其中的得失利弊。

prefixfree.js介绍的更多相关文章

  1. CSS3无前缀脚本prefixfree.js与Animatable使用介绍

    要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...

  2. CSS3无前缀脚本prefixfree.js与Animatable使用

    现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...

  3. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  4. js介绍

    ---恢复内容开始--- js介绍 最近学习了js,那么我今天给大家介绍下js.希望对初学者有些帮助. js就是常说的JavaScript.JavaScript是目前世界上最流行的编程语言之一.这门语 ...

  5. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  6. node.js介绍和npm的使用

    Node.js介绍 打开Nodejs英文网:https://nodejs.org/en/ 中文网:http://nodejs.cn/ 我们会发现这样一句话: 翻译成中文如下: Node.js 是一个基 ...

  7. Node.js 介绍及安装

    Node.js是一个Javascript运行环境(runtime environment),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装.本文详细介绍了No ...

  8. 1. vue.js介绍

    1. 什么是vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助 ...

  9. Node.js介绍、优势、用途

    一.Node.js介绍Node.js是一个javascript运行环境.它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与PHP.Java.Python..NET.R ...

随机推荐

  1. cocos 3.0 一键打包android平台应该注意的细节

    cocos2d-x 移植越来越便捷,走到cocos2d-x-3.0rc2,能够说移植已经非常完好了,我们仅仅要进行适当的适配,cocos能够直接帮助我们生成apk 我网络不好无法上传图片:(无图无捷豹 ...

  2. FloatingActionButton

    https://github.com/Clans/FloatingActionButton    

  3. [MODx] Build a CMP (Custom manager page) using MIGX in MODX 2.3 -- 2

    We are not finishing yet... 1. Under MIGX Management, we need to add some "Actionbuttons" ...

  4. iOS快速集成检查更新

    一直以为Appstore有了检查版本是否更新的机制,我们在APP上做这个更新功能会被拒,但是也有看到一些APP也是做了这个更新功能的.因为在网上没有找到完全正确的方法能获取到iTunes里的数据的,于 ...

  5. JQuery Mobile navbar动态刷新创建

    今天突然用到须要动态改变tab页, 布局代码例如以下: <div data-role="navbar" id='divtab'> <ul id='divtabul ...

  6. VC6.0设置选项解读(转)

    其实软件调试还是一个技术熟练过程,得慢慢自己总结,可以去搜索引擎查找一些相关的文章看看,下边是一篇关于VC6使用的小文章,贴出来大家看看: 大家可能一直在用VC开发软件,但是对于这个编译器却未必很了解 ...

  7. CSS3 旋转的八卦图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 在IOS中 NSRange类详解

    NSRange的定义 typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange; NSRange是一个结构 ...

  9. 如何在C#中循环一个枚举

      在C#中要想迭代循环一个枚举,最容易想到的办法是直接进行循环,如下代码所示:   public enum Suit { Spades, Hearts, Clubs, Diamonds } publ ...

  10. myeclipse安装本地maven fastdfs_client.jar

    为了方便应用程序的访问FastDFS,官网提供了fastdfs-client-java,以便更好的与应用程序结合使用. 下载fastdfs-client-java源码添加到项目工程里面,添加配置文件: ...