使用CSS的GWT Html文件

Question

當我使用GWT插件創建新項目時，它會爲我創建一個框架項目。在html文件中有一條評論說「考慮內聯CSS以減少​​請求文件的數量」 爲什麼我會考慮使用內聯css？我很難有單獨的文件不內聯css減少我的文件的大小？這不正確嗎？

Answer 1

答案就在於GWT的運作方式。由於GWT只有每個模塊加載一個頁面加載，內聯緩存並不真正發揮作用。

如果你只是想要的答案：內嵌CSS減少了加載組成你的項目的所有文件所需的TCP/IP連接的數量。考慮到您可能有多個CSS文件，高延遲和其他網絡條件，這可能並不重要。在我的工作（州政府）中，你並不總是保證「胖管」。

GWT（或至少gwt孵化器）有一個機制，用於結合內聯CSS的優化和信息和佈局的分離。

輸入ImmutableResources和StyleInjector。這兩件事（合併）導致了一種加載Immutable（編譯後）資源的方式。

要使用這些，首先下載gwt孵化器。然後，所需的庫添加到您的module.gwt.xml

<!-- immutable resources and injecting styles --> 
<inherits name="com.google.gwt.libideas.ImmutableResources" /> 
<inherits name="com.google.gwt.libideas.StyleInjector" /> 

一旦做到這一點，創建CSS文件作爲代碼資源。我將它放在源代碼路徑中，如「org.project.client.resources。*」。您可以將它們保存在不同的分段中，例如：header.css，body.css，table.css。發瘋，真正把事情分開，如你所願。你的文件路徑應該看起來像「/src/org/project/client/resources/header.css」。

現在，創建CSS接口。現在，你可以用look here做一些比較特殊的事情。但我剛剛走了基本的。

import com.google.gwt.libideas.resources.client.CssResource; 

public interface Css extends CssResource { 

} 

現在，你有你的CssResource類（你可以有不同的），你需要創建一個包裝了所有的CSS文件的不可變資源包。

import com.google.gwt.core.client.GWT; 
import com.google.gwt.libideas.resources.client.ImmutableResourceBundle; 

public interface ResourceBundle extends ImmutableResourceBundle { 

    public static final ResourceBundle INSTANCE = GWT.create(ResourceBundle.class); 

    /* 
    * ============================= 
    * CSS 
    * ============================= 
    */ 

     @Resource("org/project/client/resources/header.css") 
     public Css headerCss(); 

     @Resource("org/project/client/resources/body.css") 
     public Css bodyCss(); 
} 

這將在編譯時創建鏈接到不可變的CSS資源。現在我們需要將（插入）以某種方式將這些CSS資源插入到模塊中。這就是StyleInjector進來。

我把類似下面的代碼到我的入口點的「onModuleLoad」的方法。

StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.headerCss().getText()); 
StyleInjector.injectStylesheet(ResourceBundle.INSTANCE.bodyCss().getText()); 

可能有其他的方法來完成在GWT的更多的東西比我已經在這裏同樣的效果，但CssResource的功率可以利用。例如：在我的一個項目中，我需要對CSS進行一些小改動，以使IE和Firefox呈現我認爲是正確的東西。我在我的global.css中，像這樣兩個小的瀏覽器的特定部分：

/* fix ie floating quirk */ 
@if user.agent ie6 ie7 ie8 { 
    #someElement { 
     top: -21px; 
     right: 5px; 
    } 
} 

/* fix firefox floating quirk */ 
@if user.agent ff gecko mozilla firefox Gecko Mozilla moz gecko1_8 { 
    #someElement { 
     top: -14px; 
    } 
} 

如果能夠離開這個邏輯了我的JavaScript/Java的的是美麗的。這裏還有一個小優化，因爲GWT只會爲需要它的瀏覽器進行注入。 （基於瀏覽器的延遲綁定是如何在GWT工作了很多東西。）

因此，提供內嵌CSS機制還提供其他好處，同時保持CSS的分離。

請告訴我不喜歡呢？

Answer 2

基本上，打開TCP連接並請求文件需要時間，因此可以減少加載頁面的所有文件所需的時間。

此外，如果您要加載該文件，最終它將是相同數量的帶寬。減少傳輸時間比減少文件大小更好。

Answer 3

內聯CSS有一些優點，因爲它超越了外部樣式表，並且總是 - 必要性 - 使用最新的CSS修訂版。不利的一面是，它明確是特定於頁面的（並且稀釋了將意圖從標記中分離出來的CSS意圖），並且總體上增加了文件的大小（因爲CSS沒有被緩存，並且每次都重新加載每一頁 - 自從我上次閱讀關於inline-css的內容以來，無情的改變了）。

外部樣式表具有被緩存的好處（所以只需根據更新或URI更改的需要加載），並增加到初始下載時間/文件大小，但隨後不需要重新加載（除非有必要）。

另外，當然，如果有本地副本，引用樣式表的所有其他頁面都不會下載CSS文件。 （如果頁面在一個或多個域中，只要URI始終指向同一個文件，我不認爲這很重要;但是我可能是錯的。）

Answer 4

但是，大部分時間這種速度的降低幾乎不會引人注目，並且將HTML與CSS分開是一種很好的做法。因此，只有在優化頁面的每個部分都非常重要時才能做到這一點。另外，請考慮不直接內聯CSS，而是使用某種類型的對象/類似內容來爲您生成內聯CSS。這樣，您仍然可以將CSS保存在單獨的文件中，並將其包含在需要它的頁面上（大多數不會）。