用小工具打包css

我想打包一個小工具，很容易包含在任意項目中。我不想要求用戶鏈接到我的個人創建的樣式表在他們的主頁 - 我只是希望CSS在他們使用我的代碼時被神奇地注入。用小工具打包css

據我所知，CssResource可以通過一些方式實現這個夢想，但在搜索完文檔後，我還沒有發現任何對自然類型選擇器的引用。例如，我想在我的小部件中設置<tr>的樣式，而不必爲每個類添加類名稱。

GWT可以實現嗎？ GWT自己的小部件都非常完美的風格，但似乎他們已經添加了一個風格類到DOM中的每一個元素！

2011-04-01 Riley Lark

你在正確的軌道上 - 一個CssResource或UiBinder的內嵌<ui:style>將實現你正在尋找。與類型，而不是類問候的造型元素也一定能做到：

<ui:UiBinder> 
    <ui:style> 
    .myTable tr { 
     color: red; 
    } 
    </ui:style> 

    <table class="{style.myTable}"> 
    <tr><td>A row!</td></tr> 
    </table> 
</ui:UiBinder>

GWT，但是，有喜歡過派生選擇明確的類名稱的原因：如果你有上面的樣式，例如，每瀏覽器呈現一個<tr>元素，它必須遍歷DOM並訪問該元素的所有祖先，以查看它們中的任何一個是否具有類.myTable。如果您的應用程序使用了很多<tr>元素（這裏<div>將是一個更好的示例），其中大多數元素沒有.myTable祖先，它會導致渲染性能明顯下降。

來源

2011-04-01 19:47:18

謝謝 - 我沒有意識到，它足夠聰明，拿起這些後代選擇器。棒極了！我會自己測試一下，但我有兩個快速跟進：1：我可以指定多個定義，例如： '.myTable tr {}'AND'.myTable div {}'？ 2：我可以在相同的定義中指定多個將被模糊的選擇器，例如： '.myTable .myRow {}'應用於'

'？ – 2011-04-01 20:08:42

是的，這兩個都可以工作。 '.myRow'後代選擇器（很有可能）將不再需要，因爲應用程序中的其他任何東西都不會有相同的類名稱。 – 2011-04-01 20:13:00

想到GWT.create（）會經歷很多幫助並用一些獨特的.SDFJSDFH代替每個.myCustomName。我想現在很明顯，但我只是在想這一切都是錯誤的。感謝您的幫助！另外：如果我有，我仍然需要選擇器，比如，.tableOfStyle1 .row {}和.tableOfStyle2 .row {}，我想。 – 2011-04-01 20:20:50

我想，我會用UiBinder的，並且只給最外層的元素的類名，如：

<ui:style> 
    .outer tr { 
     ... 
    } 
</ui:style> 
<div class="{style.outer}"> 
    ... 
     <tr>...</tr> 
    ... 
</div>

現在你不必類分配給每個TR - 你只需要使用選擇器「.outer tr」，其僅適用於<tr> s內某些標記了類屬性{style.outer}的元素（順便說一句，不一定是<div>）。當然，同樣的原則也可以在沒有UiBinder的情況下運行。

來源

2011-04-01 19:41:25

謝謝！這是完全有道理的，我只是不知道GWT是否足夠聰明，只是混淆了''外部'而剩下的其餘部分。聰明的東西！ – 2011-04-01 20:10:29

好吧我沒有真正理解整個問題，也許仍然不這樣做，但我認爲你需要一種方法來從特異性「防彈CSS」 - 我看到其他答案後立即獲得CSS位

爲了確保網站（不是你的）CSS儘可能快地失敗，無論他們的規則有多特定（加權），都會向所有內容添加獨特的類名稱（有點矛盾是CSS術語，但是heyho）

但是，你可以讓你的小部件CSS完全獨一無二，也就是說，它不能被站點CSS取代，無論它們的選擇器中有多少個ID，沒有太多東西，也沒有特別的分類g

例如#mywidget div {}可能很容易被站點CSS取代#wrapper #content div {}將會這樣做 - 你的div也是這兩個ID的後代，並且由於它們的規則有2個ID與你的ID相對應，你的CSS將會丟失 - 不可能猜測站點的每個排列CSS所以最簡單的事情就是增加所有這些「額外」的班，爲什麼YUI和藍圖是因爲它們是

但是，如果你寫你的CSS：#mywidget>div {}你可能會一直贏，因爲從來沒有在他們的CSS會他們正在瞄準的div可能是你的widget ID的直接子（除非他們選擇定製你的，他們也可以用'class everything'方法來做），

這樣就可以防止你的CSS沒有添加任何類。我假設你的小部件已經有一個獨特的iD包裝？那麼如果你還沒有一個內部div包裝器，那麼添加一個，它不需要有一個類，但是給它一個將會在這個技術上增加一層防彈。

然後在#mywidget>div.myclass的前面加上所有規則的前綴，例如， #mywidget>div.myclass td {} - 網站擁有自己的規則，無論權重有多重（選擇器中的很多ID和類都會使選擇器的權重更大），只要它們無法匹配特定的組合，它們就會失敗 - 因此您的tr可以從站點CSS接管安全;）

添加一個div或類，並搜索並替換您的CSS，以添加前綴到一切..至於如何打包我不知道

來源

2011-04-01 20:25:03 clairesuzy

GWT自動解決了這個問題，因爲它混淆了UiBinder和CssResources中的類名（這是關於GWT真正偉大的事情之一在我看來。） – 2011-04-01 20:32:00

啊謝謝，這很聰明 - 我會知道在哪裏看看我什麼時候需要 - 看到我說我不明白，我只知道爲什麼需要完成這項工作的邏輯，並且避免使用「class everything」方法的任何方法對我來說都足夠了;） – clairesuzy 2011-04-01 20:39:45

相關問題

用小工具打包css

回答

相關問題