假如你现在正学习着强大的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. Twenty Newsgroups Classification任务之二seq2sparse(3)

    接上篇,如果想对上篇的问题进行测试其实可以简单的编写下面的代码: package mahout.fansy.test.bayes.write; import java.io.IOException; ...

  2. Android权限设置android.permission完整列表

    android.permission.ACCESS_CHECKIN_PROPERTIES允许读写访问"properties”表在checkin数据库中,改值可以修改上传( Allows re ...

  3. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  4. log_slave_updates在线修改

    http://planet.mysql.com/entry/?id=20450 mysql> show variables like 'log_slave_updates'; +-------- ...

  5. GNU bash实现机制与源代码简析

    http://www.cnblogs.com/napoleon_liu/archive/2011/04/01/2001886.html http://blog.csdn.net/ruglcc/arti ...

  6. Mantis 安装与配置

    1. 适用范围 a. 本文介绍基于 Windows 下的缺陷管理平台 Mantis. 2. 软件准备 a. 下载 EasyPHP:http://www.easyphp.org/easyphp-devs ...

  7. Making the impossible: 3 nodes intercontinental replication--转载

    原文:http://www.percona.com/blog/2012/01/11/making-the-impossible-3-nodes-intercontinental-replication ...

  8. FactoryBean的使用--转

    一般情况下,Spring通过反射机制利用bean的class属性指定实现类来实例化bean .在某些情况下,实例化bean过程比较复杂,如果按照传统的方式,则需要在<bean>中提供大量的 ...

  9. JavaScript高级程序设计(第三版)学习笔记6、7章

    第6章,面向对象的程序设计 对象: 1.数据属性 configurable,表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true ‚en ...

  10. 多个DIV让float:left属性,最后一个DIV填满剩余的部分

    <DIV style="border:1px solid red; overflow:hidden;zoom:1;">      <DIV style='floa ...