CSS3前缀
我们经常会遇到写的有些css3属性会在不同的浏览器下呈现不兼容的情况,那是因为浏览器内核不同而导致的兼容性问题。
首先我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox浏览器),WebKit(熟悉的有Chrome,Safari等浏览器),Trident(IE浏览器),
CSS3的前缀是一个浏览器内核常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分,所以浏览器在没有支持标准的CSS3之前都会有自己的方法,就是加前缀:
常用的css前缀有 -webkit /*Chrome/Safari*/
-moz /*Firefox*/
-ms /*IE*/
当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候,就不需要前缀了。
目前常用的前缀属性: 1.省略
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
2.变型转换
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
3.渐变
background: -webkit-gradient(linear,00,0100%, from(#eee), to(#aaa));/** Chrome Safari **/
background: -moz-linear-gradient(top,#eee,#aaa);/** FireFox **/
background: -o-linear-gradient(top,#eee,#aaa); /** Opear **/
background: -ms-linear-gradient(#eeeeee0%,#aaaaaa100%); /** IE9 IE10 **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);/** IE7 **/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);/** IE8 **/
CSS3前缀的更多相关文章
- 第 20 章 CSS3 前缀和 rem
学习要点: 1.CSS3 前缀 2.长度单位 rem 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 在发展中实行标准化的一些问题,重点探讨 CSS3 中新属性前缀问题和新的单位 rem. 一 ...
- (转)css3前缀
CSS3的前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.看看都有哪些前缀: -webkit(chrome) -moz(firefox) -ms(ie) ...
- 第七十七节,CSS3前缀和rem长度单位
CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...
- 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)
正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- 主流浏览器内核,以及CSS3前缀识别码
现在国内常见的浏览器有:IE.Firefox.QQ浏览器.Safari.Opera.Google Chrome.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.UC浏览器.遨游浏览器.世界之窗浏览器 ...
- html5--6-24 css3前缀
html5--6-24 css3前缀 学习要点 掌握css3前缀的使用 CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属性前加上前缀词,也将其称之为浏览器 ...
- webpack打包css自动添加css3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- CSS3前缀自动补全方案和插件
第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...
随机推荐
- 关于Windows8.1更新后Sql Server服务消失的处理办法
前言 微软在17日发布了windows8.1,兴致勃勃地花了半天的时间更新了,不过不知所云的是,在20日又被卸下Windows Store.此为背景. 影响 更新完毕做开发的时候,发现SqlServe ...
- CSS的一些思考(一)
迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个 ...
- 一篇详细的 Mysql Explain 详解
一.语法 explain < table_name > 例如: explain select * from t3 where id=3952602; 二.explain输出解释 +—-+— ...
- CoreData学习-最好的一片文章
CoreData学习-最好的一片文章 分类: IOS重新上路2014-05-25 18:00 1937人阅读 评论(0) 收藏 举报 目录(?)[+] 写的很好的一篇教程,我什么时候能写出这么 ...
- Box.net获5000万美元投资(SAAS博士)
9月29日,据国外媒体报道,“云”存储服务商Box.net已经从Salesforce等投资者获得新一轮融资5000万美元. Box.net过去的投资者也参与了新一轮的融资.最终,在CRM巨人Sales ...
- 【转】ubuntu下安装及设置FTP服务器!!
原文网址:http://hujizhou.blog.51cto.com/514907/1290915 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...
- wikioi1191 数轴染色
题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着 我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后 剩余黑色点的个 ...
- 原生javascript添加引用js文件
function addScriptTag(src) { var script = document.createElement(&qu ...
- 使用WCF实现SOA面向服务编程—— 架构设计
原文地址:http://www.cnblogs.com/leslies2/archive/2011/03/29/1997889.html SOA本身就是一种面向企业级服务的系统架构,简单来说,SOA就 ...
- 3 Sum 解答
Question Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Fi ...