1. 程式人生 > >css3中-moz、-ms、-webkit,-o分別代表的意思,以及微信瀏覽器內核分析

css3中-moz、-ms、-webkit,-o分別代表的意思,以及微信瀏覽器內核分析

ogl mod ref rotate ftw 世界之窗 說了 ike tps

這種方式在業界上統稱:識別碼、前綴

//-ms代表【ie】內核識別碼

//-moz代表火狐【firefox】內核識別碼

//-webkit代表谷歌【chrome】/蘋果【safari】內核識別碼

//-o代表歐朋【opera】內核識別碼

用法:

-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
transform:rotate(7deg); //統一標識語句,符合w3c標準

為什麽要加識別碼:

在標準還未確定時,部分瀏覽器已經根據最初草案實現了部分功能,為了與之後確定下來的標準進行兼容,所以每種瀏覽器使用了自己的私有前綴與標準進行區分,當標準確立後,各大瀏覽器將逐步支持不帶前綴的css3新屬性。

目前已有很多私有前綴可以不寫了,但為了兼容老版本的瀏覽器,可以仍沿用私有前綴和標準方法,逐漸過渡。

再進一步看前綴對應的內核:

上面說了-webkit對應的是谷歌/蘋果的內核,這樣的說法是不夠具體的,下面是更正後的說法:

Gecko內核,css前綴為"-moz-",火狐瀏覽器

WebKit內核,css前綴為"-webkit-",Comodo Drangon(科摩多龍),蘋果,安卓,搜狗高速瀏覽器3,快快瀏覽器,楓樹瀏覽器,雲遊瀏覽器,360極速瀏覽器,世界之窗極速版,SRWare Iron,獵豹瀏覽器,RockMelt,QQ瀏覽器

Blink內核,css前綴為"-webkit-",Blink是一個由Google和Opera Software開發的瀏覽器排版引擎,Google的新內核,支持以前的全部前綴

關於Blink內核前綴問題,參考:

http://www.chromium.org/blink/developer-faq

https://segmentfault.com/q/1010000000260361

Presto內核,css前綴為"-o-",Opera(歐朋),NDSBrowser

Trident內核,css前綴為"-ms-",IE,360極速瀏覽器,獵豹安全瀏覽器,傲遊瀏覽器,百度瀏覽器,世界之窗瀏覽器,2345瀏覽器,騰訊TT,淘寶瀏覽器,采編讀瀏覽器,搜狗高速瀏覽器,阿雲瀏覽器,瑞星安全瀏覽器,Slim Browser,GreenBrowser、愛帆瀏覽器,115瀏覽器,155瀏覽器,114瀏覽器,N氧化碳瀏覽器,糖果瀏覽器,彩虹瀏覽器,瑞影瀏覽器,勇者無疆瀏覽器,閃遊瀏覽器,螞蟻瀏覽 器,飛騰瀏覽器,速達瀏覽器,佐羅瀏覽器,海豚瀏覽器(iPhone/iPad/Android),UC瀏覽器

KHTML內核,css前綴為"-khtml-",蘋果瀏覽器之前的版本,後改為WebKit內核

參考:

http://jingyan.baidu.com/article/91f5db1bcc7a8f1c7e05e377.html

http://baike.baidu.com/view/1369399.htm

再來看下微信的瀏覽器內核:

iOS版的微信都是采用webkit內核,包括android版本的X5內核,是以webkit內核,但是有些兼容問題,比如不制止flex這些。

X5內核在最近做了一個升級,全面使用Google的新內核Blink,不過前綴不變,還是采用“-webkit-”。

css3中-moz、-ms、-webkit,-o分別代表的意思,以及微信瀏覽器內核分析