Vendor Prefix:为什么需要浏览器引擎前缀

简介:

浏览器引擎前缀(Vendor Prefix)是什么?

Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。

浏览器引擎前缀(Vendor Prefix)有哪些?

 
 
  1. -moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */ 
  2.  
  3. -webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */ 
  4.  
  5. -o- /* Opera浏览器(早期) */ 
  6.  
  7. -ms- /* Internet Explorer (不一定) */ 

为什么需要浏览器引擎前缀(Vendor Prefix)?

这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。可以总结为以下3点:

  • 试验一些还未成为标准的的CSS属性——也许永远不会成为标准
  • 对新出现的标准的CSS3属性特征做实验性的实现
  • 对CSS3中一些新属性做等效语义的个性实现

这些前缀并非所有都是需要的,但通常你加上这些前缀不会有任何害处——只要记住一条,把不带前缀的版本放到最后一行:

 
 
  1. -moz-border-radius: 10px; 
  2.  
  3. -webkit-border-radius: 10px; 
  4.  
  5. -o-border-radius: 10px; 
  6.  
  7. border-radius: 10px; 

有些新的CSS3属性已经试验了很久,一些浏览器已经对这些属性不再使用前缀。Border-radius属性就是一个非常典型的例子。最新版的浏览器都支持不带前缀的Border-radius属性写法。

需要使用Vendor Prefixes的CSS3属性

主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括:

  • @keyframes
  • 移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
  • 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
  • border-radius
  • box-shadow
  • backface-visibility
  • column属性
  • flex属性
  • perspective属性

完整的列表不只这些,而且还会增加。

浏览器引擎前缀(vendor-prefix)的用法

当需要使用浏览器引擎前缀(vendor-prefix)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:

 
 
  1. /* 简单属性 */ 
  2.  
  3. .myClass { 
  4.  
  5. -webkit-animation-name: fadeIn; 
  6.  
  7. -moz-animation-name: fadeIn; 
  8.  
  9. -o-animation-name: fadeIn; 
  10.  
  11. -ms-animation-name: fadeIn; 
  12.  
  13. animation-name: fadeIn; /* 不带前缀的放到最后 */ 
  14.  
  15.  
  16. /* 复杂属性 keyframes */ 
  17.  
  18. @-webkit-keyframes fadeIn { 
  19.  
  20. 0% { opacity: 0; } 100% { opacity: 0; } 
  21.  
  22.  
  23. @-moz-keyframes fadeIn { 
  24.  
  25. 0% { opacity: 0; } 100% { opacity: 0; } 
  26.  
  27.  
  28. @-o-keyframes fadeIn { 
  29.  
  30. 0% { opacity: 0; } 100% { opacity: 0; } 
  31.  
  32.  
  33. @-ms-keyframes fadeIn { 
  34.  
  35. 0% { opacity: 0; } 100% { opacity: 0; } 
  36.  
  37.  
  38. /* 不带前缀的放到最后 */ 
  39.  
  40. @keyframes fadeIn { 
  41.  
  42. 0% { opacity: 0; } 100% { opacity: 0; } 
  43.  

Internet Explorer

Internet Explorer 9 开始支持很多(但并不是全部)CSS3里的新属性。比如,你也可以在IE里使用不带浏览器引擎前缀(vendor-prefix)的border-radius属性。

IE6到IE8都不支持CSS3,很遗憾的是,使用这些低版本浏览器的用户还很多。所以,确保你的网站设计在不支持CSS3的情况下也能正常显示。对于一些属性:border-radius , linear-gradient, 和 box-shadow, 你可以使用CSS3Pie,它是一个很小的文件,把它放到你的网站的根目录下,就能让你的页面中IE6,IE8中也支持这些属性。






本文作者:佚名
来源:51CTO
目录
相关文章
|
5月前
|
Web App开发 前端开发 JavaScript
认识WebKit浏览器引擎
WebKit是一款开源的浏览器引擎,用于渲染网页内容。它负责将HTML、CSS和JavaScript等网络资源转换为用户在屏幕上看到的图形界面。WebKit是一个跨平台的引擎,可以在多种操作系统上运行,如Windows、macOS、Linux等。
64 2
CSS3 浏览器适配(私有化前缀)
CSS3 浏览器适配(私有化前缀)
46 0
|
前端开发 JavaScript API
浏览器原理 19 # JavaScript 引擎是如何实现 async / await 以同步的方式来编写异步代码的?
浏览器原理 19 # JavaScript 引擎是如何实现 async / await 以同步的方式来编写异步代码的?
182 0
浏览器原理 19 # JavaScript 引擎是如何实现 async / await 以同步的方式来编写异步代码的?
|
自然语言处理 JavaScript 前端开发
浏览器原理 09 # 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
浏览器原理 09 # 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
110 0
浏览器原理 09 # 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
|
Web App开发 JavaScript 前端开发
浏览器渲染引擎工作原理|学习笔记
快速学习浏览器渲染引擎工作原理
浏览器渲染引擎工作原理|学习笔记
|
Web App开发 存储 移动开发
浏览器内核(渲染引擎)介绍|学习笔记
快速学习浏览器内核(渲染引擎)介绍
|
Web App开发 存储 JavaScript
浏览器渲染引擎与阻塞
浏览器渲染引擎与阻塞
|
JavaScript
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
JS:样式转换工具PostCSS使用浏览器前缀插件autoprefixer
152 0
|
移动开发 自然语言处理 JavaScript
浏览器之 javaScript 引擎
此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。 书接上文 浏览器之硬件加速机制 本章主要讲解 WebKit 中广泛使用的 JavaScriptCore 引擎和 V8 引擎。
158 0
浏览器之 javaScript 引擎
|
编译器 C语言 C++
采用QWebEngineView引擎设计web浏览器
采用QWebEngineView引擎设计web浏览器
606 0
采用QWebEngineView引擎设计web浏览器