CSS3 support in GWT

[Claudio Coelho]

Hi all,
We are now trying to get into using HTML5+CSS3 with GWT, but we failed
to find specific info regarding what does GWT support in terms of
CSS3? Can we use all the features (with uibinder)? Or only a specific
set? We got stuff like shadows to work easily, but gradients don't
seem to work at all, so we are wondering if it's a matter of GWT
support or if we are doing anything wrong.
Any info will be helpful.

Thanks

[benneq]

GWT itself doesn't support CSS3 right now (I think it's because
there's still IE6 support...). That just mean's that there are no
classes or methods that do any CSS3 things.
But you still can use CSS3 with GWT. Just like you use box-shadows
(GWT has no support for shadows, too). So you take your <ui:style>-
tags in UiBinder and insert all of the CSS3 stuff you like. If you
open your page with a CSS3-supporting browser, than you should see
your CSS3 styles.

On 6 Okt., 17:22, Claudio Coelho

[Chris Conroy]

Yep, note that CSSResource doesn't grok CSS3 yet, so you'll need to use literals for CSS3 attributes:

e.g.

background: literal("-webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e4e4e4))");

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Jeff Larsen]

There also is a library which makes some css3 work on old IE easier,

http://css3pie.com

and I made a wrapper for that in gwt

http://gwt-css3-pie.googlecode.com

so you don't have to implement the special pie selectors yourself, the library automatically ads them to the IE versions. 

[Lília]

We did try the literal("..."), yet it doesn't seem to work. If you
have any ideas about the reason why it doesn't work, it would be
great!

Thanks!

[Jeff Larsen]

are you escaping the - ?

literal("\-webkit-gradient( linear, left bottom, left top, color-stop(0.23, rgb(220,106,0)), color-stop(0.62, rgb(219,135,32)) )"); works for me

[Chris Conroy]

There's no need to escape if you define your CSSResource in a .css file.

On Fri, Oct 7, 2011 at 9:22 AM, Jeff Larsen <lars...@gmail.com> wrote:

are you escaping the - ?

literal("\-webkit-gradient( linear, left bottom, left top, color-stop(0.23, rgb(220,106,0)), color-stop(0.62, rgb(219,135,32)) )"); works for me

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/dUaWhHyWNVwJ.