Question

我想打包一个小部件，以便轻松地包含在任意项目中。我不想要求用户在他们的主页中链接到我个人创建的样式表 - 我只是想在使用我的代码时神奇地注入css。

我知道CssResource可以在某种程度上实现这个梦想，但在搜索文档之后，我还没有找到任何对自然类型选择器的引用。例如，我想在我的小部件中设置<tr>样式，而不必为每个小部件添加类名。

这是否可以通过GWT实现？ GWT自己的小部件都是非常完美的样式，但似乎他们已经为DOM中的每个元素添加了一个样式类！

Answer 1

您走在正确的轨道上 - 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祖先，它可能会导致渲染明显减少性能

Answer 2

我想，我会使用UiBinder，只给最外面的元素一个类名，如下所示：

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

现在您不必为每个tr分配一个类 - 您只需使用选择器“.outer tr”，它仅适用于标有class属性{{{}的某个元素中的<tr>。 1}}（顺便说一句，不一定是{style.outer}）。当然，没有UiBinder也可以使用相同的原则。

Answer 3

好的我真的不明白整个问题，也许还没有，但我认为你要求一种方法来“防止你的CSS”的特殊性 - 我在看到其他答案之后立即获得CSS位

独特的类名（有点矛盾的是CSS术语，但是heyho）被大多数人建议，以确保网站（不是你的）CSS尽快失败，无论他们的规则有多具体（加权）< / p>

但是你可以让你的widget CSS完全独一无二，也就是说它不能被网站CSS推翻，无论他们的选择器中有多少ID，没有太多的ado而且没有专门对所有内容进行分类

e.g。 #mywidget div {}很容易被网站CSS推翻，#wrapper #content div {}会这样做 - 你的div也是这两个ID的后代，而且他们的规则有2个ID而不是你的CSS将失去 - 无法猜测网站CSS的每个排列，所以最简单的方法是添加所有这些“额外”类以及YUI和蓝图为何如此

然而如果你写下你的CSS：#mywidget>div {}你的CSS可能永远都会获胜，因为从来没有在他们的CSS中他们所针对的div可能是直接的孩子（除非他们选择自定义您的小部件ID，他们也可以使用'class everything'方法）

所以要防止你的CSS而不向所有东西添加类..我假设你的小部件已经有一个独特的iD包装器？然后，如果你还没有内部div包装器，添加一个，它不需要一个类，但给它一个将在这个技术上增加一层防弹。

然后使用#mywidget>div.myclass为您的所有规则添加前缀，例如#mywidget>div.myclass td {} - 网站拥有规则，无论加权多重（选择器中的许多ID和类使选择器更加加权），只要它们无法匹配特定组合，它们就会失败 - 所以你的tr是安全的CSS接管;）

添加一个div或类并搜索并替换你的CSS以添加前缀到所有内容..至于如何打包我不知道

用小部件打包css

3 个答案: