假如你现在正学习着强大的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. [React Fundamentals] Introduction to Properties

    This lesson will teach you the basics of setting properties in your React components. class App exte ...

  2. as3调用外部swf里的类的方法

    as3项目要调用外部swf里的类有3种方法: 1.将外部的swf发布为swc,使用时将swc引用添加到相应的项目中,这应该是最简单的一种引用.不过当项目中的类或组件比较多时就会使项目发布生成的swf文 ...

  3. mysql-connector-python

    wget http://cdn.mysql.com//Downloads/Connector-Python/mysql-connector-python-2.1.3.tar.gz tar mysql- ...

  4. mysql事务问题

    mysql事务: 若mysql 开启事务后START TRANSACTION ,不显示提交commit,则默认自动回滚,而不是默认自动提交.

  5. CSS内容

    选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 border-radius box-shadow border-image

  6. iptables配置说明

    1.iptables的发展:  对于TCP/IP的七层模型来讲,我们知道第三层是网络层,三层的防火墙会在这层对源地址和目标地址进行检测.iptables是网络层的防火墙.   iptables的前身叫 ...

  7. 分布式算法(一致性Hash算法)

    一.分布式算法 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法( ...

  8. sql查询某段时间内的数据

    查询半小时内数据的方法 1.select * from 表名 where datediff(minute,createtime,getdate())<30 2.select * from 表名 ...

  9. mysql复习---仅涉及单表的操作

    一.登录数据库 二.创建数据库: 三.删除数据库 四.使用数据库创建表 五.向表中插入数据 六.查询 1.查询所有数据: 2.姓名查询 3.性别查询 4.查询姓名 5.根据年龄大小查询 6.多个条件查 ...

  10. dagger和butterknife使用冲突

    两者会冲突的主要原因是因为两者都有:javax.annotation.processing.Processor 于是在build.gradle中添加如下配置即可: // 注释冲突 packagingO ...