3

To enable runtime skinning changes that use browser specific rules, I need to combine two CSS-resource capabilities - runtime substitution and literal.

For example, to have dynamic button gradient, I would do something like that:

button {
   background: literal("-moz-linear-gradient(top, lightBg 0%, darkBg 100%)"); 
   background: literal("-webkit-linear-gradient(top,  lightBg 0%, darkBg 100%)");
   background: literal("-o-linear-gradient(top, lightBg 0%, darkBg 100%)");
   background: literal("-ms-linear-gradient(top,  lightBg 0%, darkBg 100%)");
   background: linear-gradient(top,  lightBg 0%, darkBg 100%); 
}

where lightBg and darkBg are evaluated at runtime using @eval.

The problem is that GWT doesn't parse the literal string, so it doesn't evaluate these two values. See here

Is it possible? Thanks.

Itzik Yatom
  • 165
  • 1
  • 6

1 Answers1

3

I believe you can concatenate literals and regular css, which can look something like 

background: literal("-moz-linear-gradient(") top lightBg 0, darkBg 100 literal(")");

Not sure if that last literal is needed or not.

Colin Alworth
  • 17,801
  • 2
  • 26
  • 39
  • Works! and yes, the last literal is needed. Here is the correct version (with some small fixes for FF): `background: literal("-moz-linear-gradient(") top, lightBg 0%, darkBg 100% literal(")");` – Itzik Yatom Jan 26 '12 at 07:54
  • Weird, I could have sworn I typed those percent signs the first time... Glad you got it working! – Colin Alworth Jan 26 '12 at 15:02
  • This workaround with the 'magic literals' is no longer needed as of gwt 2.5-rc1. You can simply substitute as you did in your question, and it will just work. Here's the test case gwt team is using with an example of gradients http://gwt-code-reviews.appspot.com/1735804/diff/8001/user/test/com/google/gwt/resources/client/test.css – Ajax Sep 02 '12 at 17:05