GWT: How to apply a CSS3 gradient

Question

I was tasked to build the front-end of a web application and what I'm trying to do is to apply a CSS3 gradient on a Button. I'm using Eclipse with the GWT Plugin and I'm viewing the UI in Google Chrome with the GWT plugin.

My problem is that GWT seems to remove whitespaces in between the parenthesis 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));

Which makes them invalid. Is there another way to go about this or maybe a way to prevent the whitespaces from being removed when application is compiled? Thanks.

Answer 1

You have to use the literal() function. I believe it may only work with styles used via aCssResource as its a GWT function.

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

I bugged this a while ago here but haven't gotten any response from the GWT team, so please Star it if you think its a valid bug.

Also, as a side note, those styles won't work with older versions of ie, you need to add the filter property. Here's an example.