CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如:

div
{
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置:

1、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

last 7 versions:最新的浏览器的7个版本
cascade:缩进美化属性值
remove:是否去掉不必要的前缀

原文地址:https://www.cnblogs.com/jyue/p/10504017.html

时间: 2024-08-29 11:37:07

CSS3 浏览器前缀的相关文章

css3浏览器私有属性前缀使用详解

什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -ms- -o- -khtml-(现在基本都没有用了,被-webkit-取代) 举例来说,一个CSS3圆角的代码是: -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius

冰与火之歌:浏览器前缀

以下内容摘自<CSS揭秘>一书 在标准的开发过程中,总是有大大的"第22 条军规"1①挡在面前:标准的工作组需要网页开发者这一端的输入,以确保各项规范可以处理真实的开发需求:但是开发者往往没有兴趣尝试那些在生产环境中还不能使用的东西.当实验性的技术被广泛应用到生产时,工作组就被这些技术早期的.实验性的版本捆住手脚了,因为一旦这些技术有变动,那些已经在用这些技术的网站就挂了.显然,这完全否定了让开发者尝试早期标准的好处. 这些年来,为了解决这个难题,许多方案被提了出来,但都不

浏览器前缀-----[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform 1s } Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀: a{      -webkit-trans

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

现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,前缀少不了,每次都需要像盖高楼一样堆叠CSS3代码,如下图: .bg { width:400px; height:177px; margin:70px auto 0; padding-top:73px; position:relative; background-image:-we

如何处理CSS3属性前缀(转载)总结

今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin. 姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性.也这样让我在思考,那么有了Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是

Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以忘记CSS前缀了,按照最新的W3C标准尽情书写无前缀的CSS,像这样: a { transition: transform 1s } Autoprefixer使用一个浏览器流行度和属性支持度的数据库来给你的CSS添加前缀. a { -webkit-transition: -webkit-transf

如何处理CSS3属性前缀

CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准.为此,当一些CSS3样式语法还存在波动时,它们提供针对流星器的前缀.现在主要流行的浏览器内核主要有: Trident内核:主要代表为IE浏览器 Gecko内核:主要代表为Firefox Presto内核:主要代表为Opera Webkit内核:产要代表为Chrome和Saf

转:[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

原文来自于:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform

webpack通过postcss-loader添加浏览器前缀

在webpack中,我们可以很方便的使用autoprefixer来为css3属性添加不同的浏览器前缀. 首先,需要安装autoprefixer不用多说了,其次是安装postcss-loader(npm install --save-dev postcss-loader) 接下来在webpack.config.js文件里添加如下代码(红圈部分): 接下来,在webpack.config.js的同级目录下新建postcss.config.js文件,配置如下: module.exports = { p