帶有陰影的漸進增強

Question

我想使用WebKit的box-shadow css屬性來創建一個下拉列表。該代碼是這樣：

.drop_down{ 
    -webkit-box-shadow: 1px 1px 4px #888; 
    box-shadow: 1px 1px 4px #888; 
} 

然而，對於瀏覽器不具備這個能力，我想用邊界逼近這個陰影，就像這樣：

.drop_down{ 
    border-top: 1px solid #bbb; 
    border-left: 1px solid #bbb; 
    border-right: 2px solid #bbb; 
    border-bottom: 2px solid #bbb; 
} 

的問題是，我不希望基於邊框的陰影出現在支持box-shadow的瀏覽器上。我想避免瀏覽器嗅探，因爲我認爲很難涵蓋所有情況。什麼是最簡單的方法來做到這一點？我更喜歡無javascript的解決方案，但我也會考慮簡單的基於JavaScript的解決方案。

Answer 1

Modernizr確實檢測到了特徵。代碼將是：

.drop_down{ 
    border-top: 1px solid #bbb; 
    border-left: 1px solid #bbb; 
    border-right: 2px solid #bbb; 
    border-bottom: 2px solid #bbb; 
} 
.boxshadow .drop_down{ 
    border: 0px none; 
    -webkit-box-shadow: 1px 1px 4px #888; 
    box-shadow: 1px 1px 4px #888; 
} 

您需要包括modernizr JavaScript庫爲此工作。

Answer 2

這不會覆蓋所有情況下，我認爲它在Opera失敗了，但我會做到這一點：

.drop_down{ 
    -webkit-box-shadow: 1px 1px 4px #888; 
    -moz-box-shadow: 1px 1px 4px #888; 
    box-shadow: 1px 1px 4px #888; 
    border: solid 1px #bbb; 
    border: solid 0px rgba(0,0,0,0); /* Ignored by browsers that don't support it */ 
} 

測試結果

顯然rgba在Firefox 3.0中引入，但是-moz-box-shadow在3.5中引入。所以，Firefox 3.0未通過測試。下面是我們的立場至今：

Test Page

• 火狐2.0 - 山口（灰色1px的線）
• 火狐3.0 - 失敗
• 火狐3.5 - 山口（影子）
• Internet Explorer 6.0 - 通過（灰色1像素行）
• Internet Explorer 7.0 - 通過（灰色1像素行）
• 的Internet Explorer 8.0 - 山口（灰色1px的線）
• Safari瀏覽器3.0 - 山口（影子）
• Safari瀏覽器4.0 - 山口（影子）
• 的Chrome 3.0 - 山口（影子）
• 歌劇院10 - 失敗

Answer 3

沒有簡單的方法來做到這一點，而無需使用特定的技巧每個瀏覽器...

無論是IE條件註釋（因爲我覺得只有在IE中沒有做t支持一些版本的box-shadow現在..）或者css黑客..

Answer 4

蓋掉Gaby說的話，不僅沒有一個好的方法來完成這個任務，而且它與Progressive Enhancement的想法背道而馳。

這裏有幾個原因考慮不做你提出什麼：

1. 這些邊界將在具有適當的盒子模型的任何瀏覽器添加寬度你的元素。如果你不打算增加寬度，這可能會導致浮動元素碰到新行。
2. 漸進增強是關於以累加方式構建的。創建「替代」條件式樣會引發維護頭痛。
3. 如果您選擇有吸引力的邊框樣式，它們實際上可能會在陰影時看起來更好。我發現在許多項目中都是如此。陰影真的使邊界以吸引人的方式脫穎而出。

希望有幫助。