GWT: How to apply CSS3 gradient

Question

I was tasked with creating a front-end web application, and I'm trying to apply a CSS3 gradient on a button. I am using Eclipse with the GWT plugin and I am viewing the user interface in Google Chrome using the GWT plugin.

My problem is that GWT seems to remove spaces between brackets so that:

.gwt-Button { background: -moz-linear-gradient(top, white, #72C6E4 4%, #0C5FA5); background:-webkit-gradient(linear, left top, left bottom, from(white), to(#0C5FA5), color-stop(0.03, #72C6E4)); 

becomes:

 .gwt-Button { background: -moz-linear-gradient(top,white,#72C6E44%,#0C5FA5); background:-webkit-gradient(linear,lefttop,lefbottom, from(white), to(#0C5FA5), color-stop(0.03, #72C6E4)); 

This makes them invalid. Is there any other way to do this, or perhaps prevent interference from removing spaces when compiling the application? Thanks.

Answer 1

You must use the literal () function. I believe that it can only work with styles used through aCssResource, as a GWT function.

 background: -webkit-gradient(linear, literal("left top"), literal("left bottom"), from(white), to(#0C5FA5) ); 

I listened to this a while ago here , but did not get a response from the GWT team, so please, Star, if you think this is a real mistake.

In addition, as a side note, these styles will not work with older versions, i.e. you need to add a filter property. Here is an example .