Friday, April 24, 2015

Re: GSS mixin restricted ?

You should also add the standard CSS rule to each if statement. If you don't do so your CSS is brittle as you never know when vendor prefixed CSS rules are removed from the corresponding browser.

So always do

@if is("browser.engine", "webkit") {
  -webkit-transform: translate(-40%, 0);
  -webkit-transition: -webkit-transform 1s, opacity 2s;
  transform: translate(-40%, 0);
  transition: transform 1s, opacity 2s;
}

Also note the bold text as that seems to be wrong throughout your example. When you use vendor prefixed transform then you should also transition that vendor prefixed transform property.

But honestly I would just remove all the @if's because gzip compression would be good enough for me until GWT decides to remove vendor prefixed css rules that do not match the user.agent property (contributions welcome I would guess). So I would just create

@defmixin slideIn(X) {

  -webkit-transition: -webkit-transform 1s, opacity 2s;
  -moz-transition: -moz-transform 1s, opacity 2s;
  -ms-transition: -ms-transform 1s, opacity 2s;
  -o-transition: -o-transform 1s, opacity 2s;
  transition: transform 1s, opacity 2s;

  -webkit-transform: translate(X, 0);
  -moz-transform: translate(X, 0);
  -ms-transform: translate(X, 0);
  -o-transform: translate(X, 0);
  transform: translate(X, 0);

}



-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment