使用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保存在单独的文件中，并将其包含在需要它的页面上（大多数不会）。