Skip to content

Instantly share code, notes, and snippets.

@ColemanCollins
Created August 1, 2013 14:42
Show Gist options
  • Save ColemanCollins/6132056 to your computer and use it in GitHub Desktop.
Save ColemanCollins/6132056 to your computer and use it in GitHub Desktop.
This is that helpful css3pie (ie polyfill for rounded corners, box shadows, backgrounds, alpha in the context of backgrounds, probably some other things?) demo stylesheet that compass hides from us.
// this file demonstrates how to use the CSS PIE extension for
// legacy versions of Internet Explorer. In many cases, PIE will allow
// you to style in CSS things that you'd have to do using image chops otherwise.
//
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
@import "compass/css3/pie";
@import "compass/css3";
// Set this to wherever you end up putting your behavior file.
//
// **Note:** this file must be served as a root-relative resource or
// else IE will interpret it as relative to the current webpage
// instead of the stylesheet.
//
// **Also Note:** this file must be delivered with a mime-type of:
//
// text/x-component
$pie-behavior: url("/assets/PIE.htc");
// It is suggested that you use Sass's @extend directive to apply the PIE
// behavior to your elements. Setting this variable will tell the `pie` mixin
// to extend it. Or you can just extend the base class yourself.
$pie-base-class: pie-element;
// There are two approaches to creating PIE elements
// The default approach is to make the element position: relative.
.pie-element {
// relative is the default, so passing relative
// is redundant, but we do it here for clarity.
@include pie-element(relative);
}
.bordered {
@include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
@include border-radius(5px);
}
.gradient {
@include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
@include background(linear-gradient(#f00, #00f));
}
// But sometimes this messes up your positioning
// So you can also use z-indexing. In this case
// an ancestor element before or having the first
// opaque background should be marked as a pie-container
// which gives it a z-index of 0 (actually any z-index
// can be provided to the pie-container mixin).
// And then the pie element itself should be given
// a z-index of -1.
.pie-container {
@include pie-container;
}
.z-pie-element {
// this will get a z-index of 0, you can pass a z-index value if you want
@include pie-element(z-index);
}
// This is just a simple example of how to use the z-index approach.
.widget {
@extend .pie-container;
h3 {
@include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
}
}
// Lastly, you can just include the pie-element mixin directly if you need to do a one-off:
.has-gradient {
@include pie-element(relative);
@include background(linear-gradient(#f00, #00f));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment