我爲什麼要使用CSS3按鈕？

Question

我最近創建了一個網站，並決定創建按鈕，點擊使用CSS3，非常酷。

但是真的有一個真正的理由使用CSS3超過精靈，因爲只有現代瀏覽器顯示CSS3按鈕？

客戶端問我這個問題，所有我能想到的是更少的http請求，所以加載會稍微快一點。我從客戶的角度可以看出，這是一週的美好回答。

有沒有更好的理由？

或者是否有一種可以移動精靈背景位置或更改漸變並在懸停/焦點上添加方塊陰影的回退方法？

只是寫，讓我不知道是否近代化將是應對這一挑戰......

Answer 1

這是遠遠超過一個技術問題，一個道德和業務問題，但讓我們看到了一些分。

首先，我認爲您的客戶不應該瞭解有關實施的所有技術細節。他/她應該知道他/她需要知道什麼，這就夠了。

對於非技術民謠，你不應該說「我會讓你的網站使用CSS3，一些新的HTML5元素，以及漂亮的javascript eye-candy效果」。只要說「我可以爲你做一個好地方」。

如果他質疑你正在使用什麼或爲什麼你認爲這是最好的方法，那麼你回覆的好處。

它重量輕，帶來較少的兼容性問題，並且易於維護。 =>減少他/她的客戶等待網站加載的時間，每個人都可以看到它，並且在未來的需求中花費更少。

CSS3不是一個新的革命性的東西，你應該面對這些技術是進化的。之前的所有規則仍然適用，包括後備規則。

CSS Sprites是一種用CSS2製作的技術，因此它應該可以與任何瀏覽器一起使用，包括一些舊的瀏覽器（不確定IE6）。

漸變是新的。 FF 3.5+，IE9 beta，Opera和webkit瀏覽器顯示它們。 IE8或更高版本不。盒子陰影的一些東西。

對於這些，我只是添加了一些非常簡單的規則作爲後備。

當我開發時，我把頁面頭部的主要樣式表的鏈接，然後我使用IE條件註釋來加載IE只樣式表和腳本。

在這個只有IE瀏覽器的樣式表中，我只是添加了需要使用它的黑客或回退，使它有點體面。你有MS過濾器來處理。我的IE.css樣式表如下所示：

.gradient { 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff'); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff')"; 
} 

.boxShadow { 
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5); 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5)"; 
box-shadow: 5px 5px 5px #666 
} 

請注意，即使使用這些規則，也要處理IE6，IE7和IE8 +的回退規則。但它很小，並確保更好的顯示。

在這旁邊，我建議你閱讀http://24ways.org/2009/ignorance-is-bliss

Modernizr的是一個很好的LIB，但覺得如果你真的需要它。你可能最終使用推土機而不是勺子。