1
|
// this file demonstrates how to use the CSS PIE extension for
|
2
|
// legacy versions of Internet Explorer. In many cases, PIE will allow
|
3
|
// you to style in CSS things that you'd have to do using image chops otherwise.
|
4
|
//
|
5
|
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
|
6
|
@import "compass/css3/pie";
|
7
|
@import "compass/css3";
|
8
|
|
9
|
// Set this to wherever you end up putting your behavior file.
|
10
|
//
|
11
|
// **Note:** this file must be served as a root-relative resource or
|
12
|
// else IE will interpret it as relative to the current webpage
|
13
|
// instead of the stylesheet.
|
14
|
//
|
15
|
// **Also Note:** this file must be delivered with a mime-type of:
|
16
|
//
|
17
|
// text/x-component
|
18
|
$pie-behavior: url("/d7/test/scripts/polyfills/PIE.htc");
|
19
|
|
20
|
// It is suggested that you use Sass's @extend directive to apply the PIE
|
21
|
// behavior to your elements. Setting this variable will tell the `pie` mixin
|
22
|
// to extend it. Or you can just extend the base class yourself.
|
23
|
$pie-base-class: pie-element;
|
24
|
|
25
|
// There are two approaches to creating PIE elements
|
26
|
// The default approach is to make the element position: relative.
|
27
|
.pie-element {
|
28
|
// relative is the default, so passing relative
|
29
|
// is redundant, but we do it here for clarity.
|
30
|
@include pie-element(relative);
|
31
|
}
|
32
|
|
33
|
.bordered {
|
34
|
@include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
|
35
|
@include border-radius(5px);
|
36
|
}
|
37
|
|
38
|
.gradient {
|
39
|
@include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
|
40
|
@include background(linear-gradient(#f00, #00f));
|
41
|
}
|
42
|
|
43
|
|
44
|
// But sometimes this messes up your positioning
|
45
|
// So you can also use z-indexing. In this case
|
46
|
// an ancestor element before or having the first
|
47
|
// opaque background should be marked as a pie-container
|
48
|
// which gives it a z-index of 0 (actually any z-index
|
49
|
// can be provided to the pie-container mixin).
|
50
|
// And then the pie element itself should be given
|
51
|
// a z-index of -1.
|
52
|
.pie-container {
|
53
|
@include pie-container;
|
54
|
}
|
55
|
|
56
|
.z-pie-element {
|
57
|
// this will get a z-index of 0, you can pass a z-index value if you want
|
58
|
@include pie-element(z-index);
|
59
|
}
|
60
|
|
61
|
// This is just a simple example of how to use the z-index approach.
|
62
|
.widget {
|
63
|
@extend .pie-container;
|
64
|
h3 {
|
65
|
@include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
|
66
|
}
|
67
|
}
|
68
|
|
69
|
|
70
|
// Lastly, you can just include the pie-element mixin directly if you need to do a one-off:
|
71
|
.has-gradient {
|
72
|
@include pie-element(relative);
|
73
|
@include background(linear-gradient(#f00, #00f));
|
74
|
}
|