聰明的方法來CSS3

你有任何優雅的方法來受益於CSS3的功能，如邊界半徑或漸變？聰明的方法來CSS3

我正在尋找一種避免瀏覽器特定的CSS屬性和瀏覽器特定的樣式表文件的解決方案。我發現他們都很難維護，也很冗長。

它可能是一個JavaScript庫，將照顧跨瀏覽器的兼容性。因此，我可以只使用W3C CSS3屬性支持（不是特定於瀏覽器的），並且在瀏覽器開始支持CSS3時擺脫庫。

到目前爲止，我已經找到了這些資源，似乎至少滿足我的一些期望：

eCSStender - 那就是告訴JS模仿在不同瀏覽器（甚至IE6的CSS3特性），我還沒有測試，但是，（）
Mordernizr - JS那檢測哪個CSS3屬性瀏覽器支持
... 我會跟你的答案

或者，也許你有其他的方法，可以讓你利用CSS3沒有非常詳細的代碼fiil呢？

2010-06-22 Michał Pękała

關於modernizr的鏈接：[利用HTML5和CSS3與Modernizr的優勢]（http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/） – Wolfram 2010-06-25 09:45:59

你可以使用LESS，這對他們的網頁邊框半徑例如：

.rounded_corners (@radius: 5px) { 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 
#header { 
    .rounded_corners; 
}

可是，我真的不覺得它是凌亂使用瀏覽器的前綴。對於border-radius，你唯一需要的是這樣的：

-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
     border-radius: 5px;

，將工作在大約十幾個瀏覽器（如果包括移動瀏覽器）。以這種方式使用縮進也使得不會忘記更新其中一個屬性。當您決定放棄對Safari 4或其他任何軟件的支持時，您可以簡單地搜索並替換您想從CSS文件中移除的規則。

比較，當我們需要箱模型黑客，NS4，IE5/Mac的修復，以及所有這些廢話。

來源

2010-06-22 11:31:38

這不是CSS3具體，但你所要求的一個簡潔的方式來處理的風格，做提Modernizr的（其工作原理是將classes像no-borderradius您<html>元素，如果該功能不可用），我認爲這可能有助於組織您的CSS的普遍改進的方式。

有LESS允許在CSS中使用變量，混合或嵌套規則（請參閱示例鏈接）。然而，這要求您將.less文件編譯爲有效的.css文件。爲避免這種情況，將會有less.js（另請參閱：Less.js Will Obsolete CSS），它使您可以直接在頁面中包含.less文件（至少在開發過程中很有用）。

我認爲LESS並不需要你學習很多新的語法規則，並且可能有助於在「真實」風格旁邊組織回退CSS。

來源

2010-06-22 11:34:02 Wolfram

謝謝。 LESS看起來確實很有趣。順便說一句，我希望CSS支持變量，混合或操作。但是，缺乏與CSS的後備兼容性對我來說是一個很大的缺陷。 – 2010-06-22 11:44:50

LESS編譯爲常規CSS，您可以隨時使用生成的CSS文件而不是LESS。它只是幫助您在開發（和維護）期間組織您的CSS。另外，將.css文件重命名爲.less，並且您有一個有效的LESS文件。所以很容易從一個切換到另一個。 – Wolfram 2010-06-25 09:44:00

聰明的方法來CSS3

回答

相關問題