Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 51 lines (37 sloc) 2.265 kB
3d6c81e Add README
Jason Johnston authored
1 ============================
2 ====== PIE ======
3 ============================
4
5 Mmmmmm, pie.
6
7
8 CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient
9 fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive
10 sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup,
11 large JavaScript libraries, and other lovely hacks.
12
13 CSS3 promises to do away with all that! But as we all know, due to Internet Explorer's lack of support for any of
14 these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for
15 the foreseeable future.
16
17 Or must we?
18
19 PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows
20 IE to recognize and display a number of CSS3 properties. Consider, if you will, the following CSS:
21
22 #myElement {
23 background: #EEE;
24 padding: 2em;
25 -moz-border-radius: 1em;
26 -webkit-border-radius: 1em;
27 border-radius: 1em;
28 }
29
6c0aed1 Update readme
Jason Johnston authored
30 This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or
31 8, which all display a square box. However, add the following single rule to that CSS:
3d6c81e Add README
Jason Johnston authored
32
33 #myElement {
34 ...
35 behavior: url(PIE.htc);
36 }
37
38 Now the exact same rounded corners appear in IE! That's all there is to it. No, really, I mean it.
39
40 PIE currently has full or partial support for the following CSS3 features:
41
42 * border-radius
43 * box-shadow
44 * border-image
6c0aed1 Update readme
Jason Johnston authored
45 * multiple background images
46 * linear-gradient as background image
3d6c81e Add README
Jason Johnston authored
47
6c0aed1 Update readme
Jason Johnston authored
48 Other features such as radial gradients, multiple box shadows, and many many bugfixes are under development. This is
49 still a young project which has a long way to go, but is already pretty remarkable! We're working on getting a site
50 up with documentation and examples. Contributions (code, documentation, testing) are greatly appreciated!
Something went wrong with that request. Please try again.