Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add the keyframe mix in with vendor prefixes #98

Closed
fourcolors opened this Issue · 6 comments

6 participants

@fourcolors

Hi

It would be nice to be able to do something like

@mixin foo{
  from{
   /* something here */
  }
  to{
  /* something here */
  }
}

Then...

@include keyframes(name,  @include foo);

Which would then produces the vendor prefixes for all of the keyframes. Then you could use animate like normal.

@plapier

Closing this issue based on in-person discussion.

@plapier plapier closed this
@msheakoski

Just in case someone else stumbles on this issue, here is what I did to fix it:

Gemfile:
gem "sass", "~> 3.2.0"

lib/assets/stylesheets/keyframes.css.scss:

@mixin keyframes($name) {
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
  @-o-keyframes #{$name} { @content; }
  @-ms-keyframes #{$name} { @content; }
  @-khtml-keyframes #{$name} { @content; }
  @keyframes #{$name} { @content; }
}

In your application.css.scss or xxx.css.scss file:

@import "keyframes";

@include keyframes(spinning) {
    0% { @include transform(rotate(360deg)); }
  100% { @include transform(rotate(0deg)); }
}
@Hengjie

Perfect thanks! I wish this was documented somewhere.

@alexmwalker

GMFlash, doesn't that give you massive redundancy inside each keyframe block? e.g

@-moz-keyframes spinning {
0% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); }

100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); } }

@-webkit-keyframes spinning {
0% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); }

100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); } }
@-o-keyframes spinning {
0% {
-webkit-transform: rotate(360deg);
-moz-trans .....

And that's only a simple example.

@msheakoski

@alexmwalker: It is a bit redundant, but it's pretty much the only solution if you're serving static pure CSS cross-browser keyframes. The repetitive CSS keywords probably gzip pretty well so it should still be a small download.

Some other options are to do user agent detection on the server side and serve the browser-specific keyframes, or maybe use JavaScript to rewrite browser-specific keyframes. Is the extra complexity and work you have to put in to do these things worth it compared to gzip? At least to me it probably isn't.

If you know of an approach that might be better, I'm always interested in hearing new techniques!

@bmorrall

This is code I've added to a pull request (#158). It overrides the internally used prefixer to one that allows you to disable or enabled vendor prefixes, removing the redundant flags in the output.

You could put this in a file and include it after you have included Bourbon

$prefixer-enabled-for-mozilla: true;
$prefixer-enabled-for-webkit: true;
$prefixer-enabled-for-opera: true;
$prefixer-enabled-for-microsoft: true;
$prefixer-enabled-for-spec: true;

@mixin prefixer ($property, $value, $prefixes) {

  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefixer-enabled-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefixer-enabled-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefixer-enabled-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefixer-enabled-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefixer-enabled-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin prefixer-disable-all() {
  $prefixer-enabled-for-mozilla: false;
  $prefixer-enabled-for-webkit: false;
  $prefixer-enabled-for-opera: false;
  $prefixer-enabled-for-microsoft: false;
  $prefixer-enabled-for-spec: false;
}

// https://github.com/thoughtbot/bourbon/issues/98
@mixin keyframes($name) {
  // Save support
  $original-prefixer-enabled-for-mozilla:   $prefixer-enabled-for-mozilla;
  $original-prefixer-enabled-for-webkit:    $prefixer-enabled-for-webkit;
  $original-prefixer-enabled-for-opera:     $prefixer-enabled-for-opera;
  $original-prefixer-enabled-for-microsoft: $prefixer-enabled-for-microsoft;
  $original-prefixer-enabled-for-spec:      $prefixer-enabled-for-spec;

  @if $original-prefixer-enabled-for-mozilla {
    @include prefixer-disable-all();
    $prefixer-enabled-for-mozilla: true;
    @-moz-keyframes #{$name} { @content; }
  }
  @if $original-prefixer-enabled-for-webkit {
    @include prefixer-disable-all();
    $prefixer-enabled-for-webkit: true;
    @-webkit-keyframes #{$name} { @content; }
  }
  @if $original-prefixer-enabled-for-opera {
    @include prefixer-disable-all();
    $prefixer-enabled-for-opera: true;
    @-o-keyframes #{$name} { @content; }
  }
  @if $original-prefixer-enabled-for-microsoft {
    @include prefixer-disable-all();
    $prefixer-enabled-for-microsoft: true;
    @-ms-keyframes #{$name} { @content; }
  }
  @if $original-prefixer-enabled-for-spec {
    @include prefixer-disable-all();
    $prefixer-enabled-for-spec: true;
    @keyframes #{$name} { @content; }
  }

  // Restore support
  $prefixer-enabled-for-mozilla:   $original-prefixer-enabled-for-mozilla;
  $prefixer-enabled-for-webkit:    $original-prefixer-enabled-for-webkit;
  $prefixer-enabled-for-opera:     $original-prefixer-enabled-for-opera;
  $prefixer-enabled-for-microsoft: $original-prefixer-enabled-for-microsoft;
  $prefixer-enabled-for-spec:      $original-prefixer-enabled-for-spec; 
}

It overrides the existing prefixes with one that can be enabled or disabled (hence removing the redundant cruft)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.