当前位置: 首页 > 科技观察

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

时间:2023-03-12 11:19:01 科技观察

供应商前缀:为什么需要浏览器引擎前缀?它只能在特定的浏览器渲染引擎下被识别并生效。GoogleChrome和Safari浏览器使用WebKit渲染引擎,Firefox使用Gecko引擎,InternetExplorer使用Trident引擎,而Opera在改用WebKit引擎之前一直使用Presto引擎。浏览器引擎一般不会实现其他引擎前缀标识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,Firefox等浏览器在其移动版本中也实现了一些以WebKit引擎为前缀的CSS属性。什么是浏览器引擎前缀(VendorPrefix)?-moz-/*Firefox等使用Mozilla浏览器引擎的浏览器*/-webkit-/*Safari、GoogleChrome等使用Webkit引擎的浏览器*/-o-/*Opera浏览器(早期)*/-ms-/*InternetExplorer(不一定)*/为什么需要浏览器引擎前缀(VendorPrefix)?这些浏览器引擎前缀(VendorPrefix)主要是被各种浏览器用来试验或者测试新兴的CSS3属性特性。可以概括为以下三点:试验一些尚未成为标准的CSS属性——也许它们永远不会成为标准试验实现新出现的标准CSS3属性特性对CSS3中的一些新属性做等效语义不是所有的这些前缀中的一部分对于个别实现是必需的,但通常添加它们不会造成任何伤害-只需记住将未加前缀的版本放在最后一行:-moz-border-radius:10px;-webkit-border-radius:10px;-o-边框半径:10px;边框半径:10px;一些新的CSS3属性已经试验了很长时间,一些浏览器不再为这些属性使用前缀。Border-radius属性就是一个非常典型的例子。所有现代浏览器都支持不带前缀的Border-radius属性。需要使用VendorPrefixes的CSS3属性需要添加浏览器引擎前缀(vendor-prefix)的主要属性包括:@keyframes移动和变换属性(transition-property,transition-duration,transition-timing-function,transition-delay)动画属性(animation-name,animation-duration,animation-timing-function,animation-delay)border-radiusbox-shadowbackface-visibilitycolumnpropertiesflexpropertiesperspectiveproperties完整列表不限于这些,还会陆续添加。浏览器引擎前缀(vendor-prefix)的使用当需要使用浏览器引擎前缀(vendor-prefix)时,最好把有各种前缀的写法放在前面,然后把没有前缀的标准写法放在***。例如:/*simpleattribute*/.myClass{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;-ms-animation-name:fadeIn;animation-name:fadeIn;/*不带前缀放在****/}/*复杂属性关键帧*/@-webkit-keyframesfadeIn{0%{opacity:0;}100%{opacity:0;}}@-moz-keyframesfadeIn{0%{opacity:0;}100%{opacity:0;}}@-o-keyframesfadeIn{0%{opacity:0;}100%{opacity:0;}}@-ms-keyframesfadeIn{0%{opacity:0;}100%{opacity:0;}}/*不加前缀到****/@keyframesfadeIn{0%{opacity:0;}100%{opacity:0;}}InternetExplorerInternetExplorer9开始支持CSS3中的许多(但不是全部)新属性。例如,您也可以在IE中使用不带vendor-prefix的border-radius属性。IE6到IE8不支持CSS3。不幸的是,仍然有很多用户在使用这些低版本的浏览器。因此,请确保您的网站设计可以在没有CSS3支持的情况下显示。一些属性:border-radius,linear-gradient,andbox-shadow,你可以用CSS3Pie,它是一个很小的文件,放在你网站的根目录下,你可以在IE6中制作你的页面,这些属性是IE8也支持。