美高梅官方网站66159

美高梅线上平台游戏Explorer使用的是Trident引擎,Web是由只扶持IE6和支撑任何浏览器的网站构成的

作者:新闻公告    来源:未知    发布时间:2020-05-02 06:57    浏览量:

万维网联盟(World Wide WebConsortium,以下简称“W3C”)联合主席丹尼尔·格拉兹曼(Daniel Glazman)指出,与IE相比,苹果和谷歌移动浏览器的主导地位对Web开放性的影响更为恶劣。格拉兹曼表示,在使用更新的CSS功能时,编程人员会忽略其他浏览器,即使其他浏览器支持CSS功能。其结果是,火狐、IE和Opera等浏览器将可能被迫 模仿其他浏览器,“开放的Web”的概念将会被抛弃。浏览器厂商的行为表明,它们忘记了微软IE6主导Web的惨痛教训。

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

美高梅线上平台游戏 1

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

这个问题在CSS工作组周一举行的一次会议上显现出来。在这次会议上,Mozilla、Opera和微软的代表表示,他们愿意支持WebKit的功能,模仿其他浏览器。在经过多年的努力使微软回到标准世界后,CSS之争表明,标准化进程部分地被中断了。

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

格拉兹曼表示,“就在不久,IE6还是Web上占有绝对主导地位的浏览器,从技术角度看,Web是由只支持IE6和支持其他浏览器的网站构成的,用户非常不满。现在,IE6一家独大的局面已经结束,但其他问题又出现了。”

-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */

他说,“WebKit是苹果Safari和谷歌Chrome浏览器的渲染引擎,被广泛应用在iPhone、iPad和Android设备中,是移动Web领域占有绝对主导地位的浏览器。移动Web是由只支持WebKit和支持其他浏览器的网站构成的,用户对此非常不满。”

-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */

问 题在于Web标准发展的途径。新浏览器通常会引进最终成为标准的新技术,但最初这些新技术只出现在一种浏览器中。Web编程人员在使用这些试验性的技术 时,他们必须在命令前加一个前缀。例如,“-webkit”前缘表明基于WebKit的浏览器支持的功能。一旦新功能成为标准的一部分,得到所有浏览器支 持,编程人员就无须再使用前缀了,因为他们无须再担心自己是为一种特定浏览器开发代码了。

-o- /* Opera浏览器(早期) */

格 拉兹曼指出,目前的问题是,编程人员使用需要带“-webkit”前缀的功能,但不使用需要带“-o”(指Opera浏览器)、“-ms”(指微软IE浏 览器)或“-moz”(Mozilla火狐浏览器)前缀的功能,“我希望Web开发者社区停止设计只支持WebKit的网站,尤其是在支持其他浏览器只需 要添加带有前缀的CSS属性的情况下”。

-ms- /* Internet Explorer (不一定) */

腾讯科技

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

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

试验一些还未成为标准的的CSS属性——也许永远不会成为标准

对新出现的标准的CSS3属性特征做实验性的实现

对CSS3中一些新属性做等效语义的个性实现

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

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-o-border-radius: 10px;

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)时,最好是把带有各种前缀的写法放在前面,然后把不带前缀的标准的写法放到最后。比如:

/* 简单属性 */

.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的情况下也能正常显示。对于一些属性:border-radius , linear-gradient, 和 box-shadow, 你可以使用CSS3Pie,它是一个很小的文件,把它放到你的网站的根目录下,就能让你的页面中IE6,IE8中也支持这些属性。

原文地址:

上一篇:没有了
下一篇:没有了

更多新闻推荐

Copyright © 2015-2019 http://www.77zhth.net. 美高梅官方网站66159有限公司 版权所有