Vendor Prefix:为何必须访问器模块前缀

日期:2020-11-01 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

访问器模块前缀(Vendor Prefix)是甚么?

Vendor prefix—访问器模块前缀,是1些放在CSS特性前的小标识符串,用来保证这类特性只在特殊的访问器3D渲染模块下才可以鉴别和起效。谷歌访问器和Safari访问器应用的是WebKit3D渲染模块,火狐访问器应用的是Gecko模块,Internet Explorer应用的是Trident模块,Opera之前应用Presto模块,后改成WebKit模块。1种访问器模块里1般不完成其它模块前缀标志的CSS特性,但因为以WebKit为模块的挪动访问器非常时兴,火狐等访问器在其挪动版里也完成了一部分WebKit模块前缀的CSS特性。

访问器模块前缀(Vendor Prefix)有哪些?

-moz- /* 火狐等应用Mozilla访问器模块的访问器 */
-webkit- /* Safari, 谷歌访问器等应用Webkit模块的访问器 */
-o- /* Opera访问器(初期) */
-ms- /* Internet Explorer (不1定) */

为何必须访问器模块前缀(Vendor Prefix)?

这些访问器模块前缀(Vendor Prefix)关键是各种各样访问器用来实验或检测新出現的CSS3特性特点。能够总结为下列3点:

  • 实验1些还未变成规范的的CSS特性——或许始终不容易变成规范
  • 对新出現的规范的CSS3特性特点做测验性的完成
  • 对CSS3中1些新特性做等效词义的个性化完成

这些前缀并不是全部全是必须的,但一般你再加这些前缀不容易有任何坏处——要是记牢1条,把不带前缀的版本号放到最终1行:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

一些新的CSS3特性早已实验了很久,1些访问器早已对这些特性已不应用前缀。Border-radius特性便是1个十分典型的事例。全新版的访问器都适用不带前缀的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)时,最好是是把带有各种各样前缀的写法放在前面,随后把不带前缀的规范的写法放到最终。例如: 

 

/* 简易特性 */
.myClass {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	-ms-animation-name: fadeIn;
	animation-name: fadeIn;  /* 不带前缀的放到最终 */
}
/* 繁杂特性 keyframes */
@-webkit-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最终 */
@keyframes fadeIn {
	0% { opacity: 0; } 100% { opacity: 0; }
}

 Internet Explorer

Internet Explorer 9 刚开始适用许多(但其实不是所有)CSS3里的新特性。例如,你还可以在IE里应用不带访问器模块前缀(vendor-prefix)的border-radius特性。

IE6到IE8都不适用CSS3,很遗憾的是,应用这些低版本号访问器的客户还许多。因此,保证你的网站制作在不适用CSS3的状况下也能一切正常显示信息。针对1些特性:border-radius , linear-gradient, 和 box-shadow, 你可使用CSS3Pie,它是1个很小的文档,把它放到你的网站的根文件目录下,就可以让你的网页页面中IE6,IE8中也适用这些特性。