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
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Added the RenderInfo class making it possible to query runtime style properties for any component attached to the application.
- Released
- 2011-10-21
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 6.3+
- Browser
- Internet Explorer
- Internet Explorer
- Internet Explorer
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
- iOS Browser
- Android Browser
CSS Tools - Vaadin Add-on Directory
CSS and style utilities for both server and client side.Issue Tracker
Source Code
Discussion Forum
CSS Tools version 0.2
Initial release.
CSS Tools version 0.3
Added the RenderInfo class making it possible to query runtime style properties for any component attached to the application.