How to Use Non Standard CSS Selectors in a CSSresource

How to make the CSS ~ selector work in GWT Css Resource

If worse comes to worst and you don't find an elegant solution to this, you can always inject some styles after compilation. That is, let CssResource turn .email and .password into email() and password(), and then inject email() + " ~ " + password() into your page manually. Clearly an ugly hack, but you'd still get all the benefits of CssResource (except browser-specific tweaking) and the styles should apply as you expect.

I guess the simplest workaround is to create .email-password-parent and apply it manually to the parent.

Using tag-specific CSS selectors in GWT CssResources

Okay, now that I've tested a little, as Igor Klimer requested, I found out that the tag-specific selectors work the way they should and that pseudo-selectors can also be used. I hope that will be useful for someone googling this question in the future.

Edit: Even CSS3 Animations work perfectly fine

How to get GWT CSSResource to parse not() selectors

You escape the parentheses in the selector with backslashes. So for your CSS:

.iMore:not \(.__lod \):active {
    color: #fff
}

How can I use the same @def in multiple CssResource css files?

As far as I know, this is your only option:

style.css

@def mainColor #f00;

*.ui.xml

<ui:style src="../../../styles/style.css">
    .widget{ color: mainColor; }
</ui:style>

The downside to this is the relative path. Each ui.xml will require a different src path.

Alternatively, if you dont mind using a Constants.java file (instead of css),
you could use @eval

<ui:style>
  @eval mainColor com.myproject.client.Styles.INSTANCE.mainColor(); 
  .widget{ color: mainColor; }
</ui:style>    

Override body selector when using CssResource

Alright, I found two solutions myself for this:

1. Add @external to the body CSS selector to suppress selector obfuscation, according to this guide:
   http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

   @external body;
   body {
   my style
   }

2. Add an id to the body, grab the element using GWTs DOM.getElementById and add the style.

   Element body = DOM.getElementById("bodyId");
   body.addClassName(AppResources.layout().body());

Hope this can help other in the same situation.

How do I write combined selectors in CssResource?

The question is why would you want to refer to them? :) The CssResource is just a convenient way of referring to style names that get obfuscated by the GWT compiler. So, you'd put String foo() and String bar() in it, so that you could add those styles to your Widgets in your Java code. Now, say, you put a table in your Widget that has the .bar style applied - the .bar table tr td gets automagically applied to every cell of that table (as per usual CSS rules), you don't need to add any other style names, etc. so there's no need to refer to that (.bar table tr td) style directly like it's needed for the .bar style alone.

Hope that made sense :)

How to override default CSS in modern GWT applications?

Use an @external @-rule to disable obfuscation for the given CSS class names: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes
You can, for instance, put the following in any CssResource stylesheet:

@external .gwt-*;

But IMO, the best practice is to instead addStyleName or setStyleName (or in UiBinder addStyleNames="…" or styleName="…" respectively) on widgets. And if you want to customize a theme, copy it first as your own theme and tweak your own copy (rather than overriding styles using the CSS cascade). As an added benefit, you'll have lighter stylesheets, so they'll be faster to download for your users, and “faster is better”.

As a side note, UiBinder generates an implicit ClientBundle, where each <ui:style> element generates an implicit CssResource (and automatically calls ensureInjected() on it); so there's no much difference between <ui:style> and a CssResource.

CSS Redundancy checker for GWT

I'm still looking for a better solution. To solve the problem i've used the linux terminal instead eclipse for the search and that was faster.

---

Related Topics