CSS Tools

CSS and style utilities for both server and client side.

CSS and style utilities for both server and client side.

On the server-side:

Use the RenderInfo.get method to get accurate runtime style information for any component currently attached to the application, such as the exact pixel size and position or color and font-size.

On the client-side (GWT):

Use ComputedStyle to get accurate runtime CSS property values from DOM elements, which are normalized for all supported browsers, e.g. you get all dimension values as pixels even if they would be defined as percentages in the stylesheet.

Use CSSRule to get actual CSS property values defined in the stylesheets, i.e. the exact values the author has written in the stylesheet.

You can also create new style rules dynamically using the CSSRule class. This allows you to easy specify some CSS styles for your custom widgets, but also enables the widget users to override any of those values using simple CSS, since your styles are not defined as hard-to-override inline styles.

Sample code

// Gets the computed style for the given element. Re-use the reference as much as possible.
ComputedStyle cs = new ComputedStyle(getElement());

// Gets the raw string value of a property
String width = cs.getProperty("width"); // Returns for instance "123px"

// Get the  integer value of a pixel based property
int width = cs.getIntProperty("width"); // Returns for instance 123

CSSRule myRule = CSSRule.create(".new-selector");
myRule.setProperty("color", "red");
myRule.setProperty("fontWeight", "bold");

RenderInfo.get(component, new Callback() {
	public void infoReceived(RenderInfo info) {
		// Use the info
		// All the properties are returned as Strings, e.g. "123px"
		String width = info.getProperty(CssProperty.width);
	}
});

Links

• Author Homepage
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility