Skip to content

Instantly share code, notes, and snippets.

@nimbupani
Created March 7, 2012 18:38
Show Gist options
  • Save nimbupani/1995024 to your computer and use it in GitHub Desktop.
Save nimbupani/1995024 to your computer and use it in GitHub Desktop.
Trying some ideas for prefix solution
h1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
body {
background-image: -webkit-gradient(linear, #000, #fff), url('image.png');
background-image: -webkit-linear-gradient(#000, #fff), url('image.png');
background-image: -moz-linear-gradient(#000, #fff), url('image.png');
background-image: -ms-linear-gradient(#000, #fff), url('image.png');
background-image: -o-linear-gradient(#000, #fff), url('image.png');
background-image: linear-gradient(#000, #fff), url('image.png');
}
body {
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -o-flexbox;
}
h1 {
@prefixed(border-radius: 10px);
}
body {
@prefixed(background-image: linear-gradient(#000, #fff), url('image.png'));
}
//Ambitious
body {
@prefixed(display: flexbox, ($official: false, $oldwebkit: false));
}
@nimbupani
Copy link
Author

neat! I think @chriseppstein came up with a more elegant solution:

div {
  @include prefixed {
   border-radius: 5px;
   display: flexbox;
   background-image: linear-gradient(#000, #fff);
  }
}

My intention was to not split property and value, and try to apply the prefixes automatically to a declaration.

@scottkellum
Copy link

That is elegant. If it can be broken down into an array seems like it wouldn't be too hard to spit back out with proper prefixes. You and @chriseppstein working to bake this into Sass/Compass? That would be awesome :)

@nimbupani
Copy link
Author

Essentially trying to find a less unwieldy solution to setting prefixes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment