CSS編譯器和轉換IE黑客條件的css

所以我一直在尋找CSS編譯器（比如Sass & Less）一段時間，並且對它們非常感興趣，並不是因爲它們幫助我更容易理解（我一直在做css幾年現在），而是他們削減了殘酷，幫助我更容易看到事情。

我最近一直在研究可靠地實現內聯塊（和clearfix），這需要大量無關代碼&黑客。現在根據該領域的所有當局，我不應該把IE瀏覽器黑客放在我做CSS的同一頁面上，我應該讓它們有條件。但對於我來說，通過並管理所有這些附加代碼是一件非常麻煩的事情，這就是爲什麼我非常喜歡Less這樣的事情。您不必應用非語義類，而是指定一個mixin並將其應用一次，然後全部設置。

所以我想我得到了一些軌道（我想解釋我的觀點），但bascially，我在這些CSS編譯器對我非常有用的點，並允許我抽象了很多將它們消除，並可靠地應用一次，然後再編譯它。我想有一種方法能夠將IE特定的樣式編譯到他們自己的條件文件（ala Less/Sass）中，所以我不必處理無故管理2個文件。

是否有像腳本/應用程序運行，並可以使下劃線/明星黑客分開自己的文件存在？

來源

2010-04-30 xckpd7

這不是一個真正的編譯器技巧，但是如果你想使用條件註釋而不必編譯單獨的瀏覽器樣式表，你可以簡單地使用HTML條件註釋來注入樣式化鉤子。例如：

... 
</head> 
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]--> 
<!--[if lte IE 7]><body class="ie7"><![endif]--> 
<!--[if gte IE 8]><!--><body><!--<![endif]-->

現在你可以針對你想在同一個樣式表適用於IE < = 6和IE < = 7的其餘規則規定：

body.ie6 #thing { position: relative; } 
body.ie7 #otherthing { z-index: 0; }

這是IMO比* html黑客更清潔，這是最後可以接受的CSS黑客攻擊。（「明星黑客」和「強調黑客」是無效的CSS：避免。）

來源

2010-04-30 19:16:22 bobince

哇，這比使用這種技術來指定單獨的樣式表要好得多。 +1 – 2012-02-23 20:12:32

您只需有條件包括IE6/7/whathaveyou生成CSS表：

<head> 
    <link rel="stylesheet" href="/css/master.css" type="text/css"/> 
    <!--[if IE 6]> 
     <link rel="stylesheet" href="/css/ie6.css" type="text/css"/> 
    <![endif]--> 
</head>

另外，如果你」再擔心與你的大部分SASS/CSS的IE修復/黑客混合，就可以打破他們到自己的諧音：

@import ie6.sass

以上將包括在IE瀏覽器的特定版本的所有規則目前的SASS文件。在諧音文檔可以在這裏找到：SASS Partials

來源

2010-04-30 19:22:17

我瞭解有關條件包含的內容，我在問我如何才能生成這樣的東西。我擔心混合這些問題的主要原因是IE9/IE10出現並且我使用的黑客破壞了它們的情況：這並不能解決這些問題。 – xckpd7 2010-04-30 19:30:33

只需通過IE條件對CSS/SASS文件進行相應的版本即可。 IE9/10不太可能會放棄對條件評論的支持。我會相應地更新我的答案。 – 2010-04-30 23:11:55

這比IMO稍微清潔的* HTML黑客，這是最後一個可以接受的CSS破解。（「星號破解」和「下劃線破解」無效CSS：避免）

不是真的：「下劃線黑客」無效，「* html」和「* + html」黑客完美無缺有效的CSS。 Check it out yourself。;）

〜

對於上面的問題，現在我不知道能做到這一點的編譯器，我還是喜歡的用戶開始破解（IE6-7），並把一切都在一個文件。更易於維護。

來源

2010-09-23 15:16:30 Folletto

CSS編譯器和轉換IE黑客條件的css

回答

相關問題