While I was working on sample for “Eclipse4 on RAP” I had to use RAP CSS to get a mobile like behavior.

The CSS/Themeing support in RAP is quite powerful but one has to have a web-page opened to see all possible attributes applicable to a certain control which is not how we are used to work in an IDE dominated world.

We want content-assist, error reporting while typing, … but naturally none of the CSS-Editors know about the rap-specific selectors and properties.

Fortunately e(fx)clipse has an CSS extensible editor which is backed by a generic format definition what properties are available on which selector. All that has to be done to teach it additional CSS-Selectors and CSS-Properties is to create a file like this.

If you now:

• Have a recent nightly build of e(fx)clipse tooling installed (You can get an all in one build from http://downloads.efxclipse.bestsolution.at/downloads/nightly/sdk/)
• Install the additional RAP-CSS-Tooling from http://downloads.foss.bestsolution.at/rapcss/nightly/site/
• Make you RAP-CSS file end with .rapcss

you should get an editing feeling like the screencast below.