如何让 UiBinder 样式与 .css 文件中的行为相同？答案

【问题标题】：How to get UiBinder Styles to Act The Same as From a .css File?如何让 UiBinder 样式与 .css 文件中的行为相同？
【发布时间】：2011-11-23 10:33:42
【问题描述】：

对于这个模糊的标题，我深表歉意，但我想不出更好的提问方式。我会尽量说得很具体：

假设我创建了一个新的 GWT/AppEngine 应用程序并拥有默认的示例应用程序。我看到按钮，并认为它们很好，我想使用它们。在 css 文件中，按钮的样式为：

button.send {
   margin-top: 10px;
   float: right;
   padding: 10px 14px;
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
   color: #fff;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5D9AFE),
       to(#4785E8) );
   background: -moz-linear-gradient(top, #5D9AFE, #4785E8);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border: none;
}

button.send:active {
   margin-top: 10px;
   float: right;
   padding: 10px 14px;
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
   color: #fff;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4785E8),
       to(#5D9AFE) );
   background: -moz-linear-gradient(top, #4785E8, #5D9AFE);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   border: none;
}

button.centerbtn {
   float: none;
   display: inline;
   margin: 0 auto;
}

button.centerbtn:active {
   float: none;
   display: inline;
   margin: 0 auto;
}

但是，如果我尝试在 UiBinder 中使用它们，它们将不会自动应用于按钮。即使我通过设置它的样式手动将它应用到按钮，当我点击它时它也不会改变视觉（如弹出和向下）。

我希望能够做到这一点，我想我会问，因为我正在尝试用弹出窗口、对话框等做类似的事情。

【问题讨论】：

如何设置按钮的样式？它应该工作（请注意，你必须在渐变周围使用literal()，因为 UiBinder 的 ui:style 使用的 CssResource 使用 CSS2 解析器，它不支持大多数 CSS3 语法)
我不确定，但我认为您可以在 UiBinder 文件中使用条件 CSS，就好像它们是 CSS 资源一样。（您将向每个浏览器发送少一点，但正确的部分）

标签： css gwt uibinder

【解决方案1】：

按照上面的人的评论放入literal() 修复了它，以编程方式更改类名也是如此。

【讨论】：

另外，如果您在 CSS 中使用条件标记，请确保它位于任何 CSS 语句之前，将其放在文件顶部，否则 GWT 解析器将失败。文档中没有。