理解厂商前缀 -webkit- / -moz- / -ms- / -o-
CSS3规范如果想要达到W3C的推荐标准状态还需要不断改进。浏览器则通常在W3C开发标准的过程中就会体现这些特性。这样,标准在最终敲定之前就能知道哪些地方还能进一步改进。
在包含某个特性的的初始阶段,浏览器通常会使用厂商前缀实现这类特征,这样每个浏览器都可以引入自己的CSS属性支持方式,从而可以获取反馈,一旦标准发生改变也不会造成影响,例如:
使用border-radius属性示例
div{-webkit-border-radius:10px;
border-radius:10px;}
该属性需要使用-webkit前缀支持旧版本的Android、IOS和Safari浏览器。
这些浏览器的一些新版本已经不需要使用带有前缀的属性了,只需要使用无前缀的属性就行了(简单写成border-radius:10px)。
样式规则中的最后一条声明优先级别最高,这也是将无前缀版本放在最后的原因。
不过,这种方式会造成一定程度的混乱,因此很多浏览器都逐渐取消了厂商前缀的使用。
但是还有一些地方还是需要用到它的,比如说需要兼容一些旧的浏览器的时候。
每个主流浏览器都有自身的前缀,这些前缀放在css属性名的前面:
- -webkit- (Webkit / Safari / 旧版本的Chrome)
- -moz- (Firefox浏览器)
- -ms- (Internet Explorer 浏览器)
- -o- (Opera浏览器)
多数情况下一般只需要 -webkit- 前缀,但也并非所有的CSS属性都需要为浏览器准备的前缀。
理解厂商前缀 -webkit- / -moz- / -ms- / -o-的更多相关文章
- CSS属性前的 -webkit, -moz,-ms,-o
-moz-对应 Firefox, -webkit-对应 Safari and Chrome-o- for Opera-ms- for Internet Explorer(microsoft) 在CSS ...
- 好消息啊,有些c似乎不用加厂商前缀了
今天写程序,一个不小心,没写厂商前缀,然而,,,,,,, 可以运行了(我居然不知道这个消息!!!!) 赶紧写几个字纪念一下. (把鼠标移动到红色的字上边~~~) don' you think that ...
- css厂商前缀
在vue中写css,不要加厂商前缀,vue-cli会在打包时自动生成
- css3浏览器前缀 -mos/-webkit/-o/-ms
1.css3浏览器前缀的意思 -moz为firefox的前缀: -webkit为safari和chrome的前缀: -o为opera浏览器的前缀: -ms为ie浏览器的前缀: 2.常见的需要使用浏览器 ...
- 树状数组的理解(前缀和 and 差分)
二更—— 有神仙反映数星星那个题外链炸了,我决定把图给你们粘一下,汉语翻译的话在一本通提高篇的树状数组那一章里有,同时也修改了一些汉语语法的错误 这段时间学了线段树组,当神仙们都在学kmp和hash的 ...
- CSS3 学习小结
写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transitio ...
- [译]JavaScript检测浏览器前缀
原文地址: Detect Vendor Prefix with JavaScript 不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情.这些前缀可以用于CSS(比如 ...
- javascript获取CSS3浏览器前缀
var prefix = (function () { var styles = window.getComputedStyle(document.documentElement, ''), pre ...
- 使用Grunt启动和运行
开始使用Grunt 大多数开发人员都一致认为,JavaScript开发的速度和节奏在过去的几年里已经相当惊人.不管是Backbone.js和Ember.js的框架还是JS Bin社区,这种语言的发展变 ...
随机推荐
- Chrome 浏览器添加跨域支持
开发前端本地项目时,涉及到与后端服务器的通信联调,在使用 ajax 时由于浏览器的安全策略不允许跨域.一种方式是本地搭建转发服务器,今天又 GET 到一种更直接的方式,在 Chrome 浏览器开启时添 ...
- C# 获取当前网页HTML
//引用COM组件 //Microsoft HTML Object Library //Microsoft Internet Controls SHDocVw.ShellWindows shellWi ...
- vue 中滚动div至最底部
scrollToBottom: function () { this.$nextTick(() => { var container = this.$el.querySelector(" ...
- Chapter02 第一节 开始学习C++
2.1 进入C++ 第一个示例程序: //myfirst.cpp #include <bits/stdc++.h> using namespace std; int main() { co ...
- 2019 计蒜之道 初赛 第一场 商汤的AI伴游小精灵
https://nanti.jisuanke.com/t/39260 根据题意我们可以知道 这是一个树 我们只需要找到出度最大的两个点就好了 如果包含根节点的话要-- 两个点相邻的话也要-- 数据很 ...
- maven中央仓库太慢的解决办法
在.m2目录下创建settings.xml文件,文件内容如下: <?xml version="1.0" encoding="UTF-8"?> < ...
- Vue 实现手动刷新组件
Vue 实现手动刷新组件:https://www.jianshu.com/p/742142dc95f3
- re库的使用
re库的使用 精确匹配 如果直接给出字符,就是精确匹配.用\d可以匹配一个数字,\w可以匹配一个字母或数字 s1='00\d'#可以匹配'007',但是匹配不了'00A' s2='\d\d\d'#可以 ...
- 搜索专题: HDU1372Knight Moves
Knight Moves Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...
- echarts markLine 辅助线非直线设置
效果图: 用例option: option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' } ...