2011-02-28 104 views
5

我想下面的div影子 「影子」:爲什麼CSS屬性對Chrome,FF,Opera有不同的名稱?

#shadow { box-shadow: 1px 1px 1px #000 }; 

完成?

根本不是。它只在一個瀏覽器中工作。猜猜哪一個。

對於FF /鉻我要補充不太直觀:

-moz-box-shadow: 1px 1px 1px #000; 
-webkit-box-shadow: 1px 1px 1px #000; 

而現在一切正常。該方案適用於許多CSS屬性。爲什麼?

幸運的是,沒有-webkit邊框,moz-font或-ie-backgroundcolor。

PS。是的,沒有一個關於IE的單詞。稱之爲瀏覽器就像比較輪椅和摩德納汽車。

PS 2.爲什麼在我的文章下方的Google Chrome標記旁邊有一個徽標?或者爲什麼Opera沒有Logo & FF?

+0

關於PS2:Chrome標籤有一個標誌,因爲Google支付了Stackoverflow來顯示一個標誌。這是一種微妙的廣告形式;)。 – hallvors 2011-03-04 06:49:35

回答

2

這是瀏覽器在CSS Spec完全批准之前發佈功能的一種方式。

例如,看看CSS3漸變。 -moz-和-webkit-完全不同。

background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.15, rgb(145,4,88)), 
    color-stop(0.58, rgb(174,30,115)), 
    color-stop(0.79, rgb(209,57,150)) 
); 
background-image: -moz-linear-gradient(
    center bottom, 
    rgb(145,4,88) 15%, 
    rgb(174,30,115) 58%, 
    rgb(209,57,150) 79% 
); 

這可能會感興趣:http://www.alistapart.com/articles/prefix-or-posthack/

因此,下一次你發現自己 抱怨宣佈同 事情四次,一次爲每個 瀏覽器,請記住,痛苦是 臨時。這有點像一個 疫苗 - 現在的傷害是真的,但是 對於它預防的疾病,它的確沒那麼差。並在 這種情況下,您正在接受針對多年 解析器黑客攻擊和瀏覽器嗅探的壞情況的 疫苗。 我們曾經經歷過那漫長的瘟疫 。如果正確使用 ,前綴將會在很長一段時間內避開另一個疾病 。

注意:最好包含沒有前綴的版本,以便在完全採用屬性時繼續站點功能。

+0

對於任何願意理解爲什麼屬性的前綴是改進Web標準開發的一種方法的人來說,AListApart文章是必讀內容。 – dSebastien 2011-02-28 20:54:21

0

瀏覽器的能力超出了他們應該遵循的標準。在標準發佈之前,他們讓您能夠訪問過渡期間的能力,然後遵循已發佈的標準,並提供與時髦外觀的「webkit ...」格式的後向兼容性。

+0

它甚至是必需的,有點。如果供應商有兩種先前的實施方式,則只能達到建議狀態。沒有實施,沒有標準。 – FelipeAls 2011-02-28 20:11:56

3

發生這種情況是因爲瀏覽器不想彼此衝突。除此之外,目前還沒有真正的box-shadow「spec」,所以有幾個瀏覽器都有自己的實現。

這種方法允許任何特定供應商的 擴展共存 與任何未來的(或電流)CSS 性能,而不會造成衝突 因爲,根據W3C 規格,CSS屬性名 決不會與開始破折號或 下劃線:

來源:http://reference.sitepoint.com/css/vendorspecific

0

屬性whic h是基於未完成規範實現的,因此給定了廠商前綴。如果供應商認爲他們的實施沒有完成,即使規範是這樣,也是如此。

0

正如其他人已經回答的那樣,這是因爲他們正在實現規範尚未完成的功能,或者其實現尚未完成的功能。

這是故意行爲; CSS規範指定這是他們在這種情況下應該如何做的事情。對於這一規則的原因如下:

  • 爲了確保在不同的瀏覽器實現的功能不同(由於規範的變化或不一致),這些差異都可以納入同一個樣式表。
    例如:-moz-border-radius的早期版本與-webkit-border-radius的工作方式大不相同;它們之間存在顯着的語法差異,所以如果它們都只是border-radius,那麼您將無法同時支持它們。
  • 爲了簡化規範完成時的過渡。
    如果您確實使用帶有供應商前綴的功能,請始終將功能的非前綴版本放在其他版本之後。這樣,最近升級到正確支持它的瀏覽器將選擇正確的版本,而不是被過時的前綴版本覆蓋。
  • 確保網絡開發人員知道當他們使用的功能不一定準備好主要時間使用。
    這很重要:您應該清楚,使用帶有供應商前綴的功能意味着您正在使用瀏覽器製造商和規範編寫者不相信已準備好的功能。你需要知道這一點。不要讓它停止使用某些有用的東西,但請注意,下一版本可能會有所變化。
相關問題