2013-03-01 70 views
1

最近我一直在檢查css3命令爲什麼他們中的一些在每個瀏覽器中都有所不同?爲什麼瀏覽器中的css命令不同

例如,看看this 2D transform example

div 
{ 
transform: rotate(30deg); 
-ms-transform: rotate(30deg); /* IE 9 */ 
-webkit-transform: rotate(30deg); /* Safari and Chrome */ 
-o-transform: rotate(30deg); /* Opera */ 
-moz-transform: rotate(30deg); /* Firefox */ 
} 

爲什麼要讓他們不同的,如果所有的人都接受相同的參數?他們是否處於某種測試階段? 他們會不會一樣(beta階段後)?

如果考慮this animation example

@keyframes myfirst 
{ 
from {background: red;} 
to {background: yellow;} 
} 

@-moz-keyframes myfirst /* Firefox */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 

@-o-keyframes myfirst /* Opera */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 
+3

只是一個評論。不要相信w3schools。 [想知道爲什麼嗎?](http://w3fools.com/) – 2013-03-01 10:00:09

+1

另一種評論:總是把前面沒有前綴的。當前版本的IE,FF和Opera都支持無前綴的轉換和動畫(詳細信息請參閱http://caniuse.com/)。它們還支持前綴版本(IE的'-ms-',FF的'-moz-'和Opera的'-o-'),並且它們將應用您最後一次寫入的內容。正如你在你的問題中編寫代碼一樣,這是前綴。 – Ana 2013-03-01 12:27:13

回答

1

要回答這個問題 - 是的,他們通常表示一個測試版的實現。一旦某個特定屬性已經標準化,瀏覽器供應商添加了ant前綴版本,他們通常會將前綴版本保留爲別名,並在以後停用。另外,是的,一旦標準化,行爲應該是相同的(除非有意外的錯誤!)

CSS供應商特定的擴展是specification的一部分。瀏覽器供應商使用它們將未批准或非標準化的CSS功能添加到其瀏覽器中。理解是,每個瀏覽器的功能可能不同,並且當前綴規則標準化時它可能不是最終的功能。

CSS供應商前綴是not well liked,儘管有一些useful approaches以更清晰的方式處理它們,從而避免了突出顯示的問題。

1

由於事實上這是非常不切實際的,他們並不總是接受相同的參數,或者以同樣的方式行事。

也就是說,爲什麼它們是前綴,直到有某種標準或共同的理解該屬性應該如何表現以及它的語法應該如何。

其中一些屬性僅僅是實驗性的。瀏覽器供應商有一個很酷的新想法,並將其添加到瀏覽器中。過了一段時間,其他瀏覽器供應商可能會選擇它,並且在一段時間後還會有這個功能的標準。

在某些瀏覽器版本之後的大部分時間,這些前綴都會丟失,因此您可以使用標準的前綴。請參閱example border-radius:開始時有一個前綴-moz--webkit-,但是在屬性定義穩定後,前綴被刪除,現在您可以使用前綴不變的版本。

相關問題