Skip to content


Subversion checkout URL

You can clone with
Download ZIP
100644 153 lines (131 sloc) 8.51 KB
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>PIE Documentation: Q &amp; A</title>
8 </head>
9 <body>
11 <h1>Q &amp; A</h1>
14 <!-- noformat on -->
16 <h2>What is PIE?</h2>
17 <p>PIE is a utility for Internet Explorer (currently versions 6-8) which gives it the ability to parse
18 and render a number of the most useful CSS3 properties.</p>
21 <h2>How does it work?</h2>
22 <p>PIE is implemented as an attached behavior; in your CSS, you simply specify:</p>
23 <pre><code>behavior: url(;</code></pre>
24 <p>Once the behavior is attached, it looks for any of the supported CSS3 properties which might be attached to the
25 target element, parses those properties, and renders them on the page.</p>
28 <h2>What CSS3 properties are currently supported?</h2>
29 <p>PIE currently has full or partial support for:</p>
30 <ul>
31 <li>border-radius</li>
32 <li>box-shadow</li>
33 <li>border-image</li>
34 <li>multiple background images</li>
35 <li>linear-gradient background images</li>
36 </ul>
37 <p>You can find detailed information about the levels of support in the
38 <a href="/documentation/supported-css3-features/">Supported CSS3 Properties and Values</a> documentation.</p>
41 <h2>How large is it?</h2>
42 <p>The .htc behavior file is 30K. With gzip compression, it is 12K. (You do gzip your content, right?)</p>
43 <p>It's pretty easy to save at least as much as that by using CSS3 instead of all the extra images, markup, and CSS
44 you'd have to use otherwise, so this is usually a net win in terms of total page weight. Also, it's important to
45 note that the behavior file is only downloaded by IE, so in other browsers which support these CSS3 features natively,
46 that's pure win.</p>
49 <h2>What are the goals of the project?</h2>
50 <p>Even though today's advanced browsers are starting to implement decent levels of CSS3 support, it will still be
51 years before Web authors can start using these CSS3 features in widespread deployment. The main reason is, of course,
52 that Internet Explorer does not yet implement any of these features, has a majority market share, and has a notoriously
53 slow upgrade cycle among its users. IE9 promises to start implementing some CSS3, but like it or not it will still
54 likely be years before IE8 and below shrink to a negligible percentage of users.</p>
55 <p>PIE aims to drastically shorten that timeframe, by implementing a simple shim to make CSS3 "just work" in IE. Our
56 goals are:</p>
57 <ol>
58 <li>
59 <h3>Be simple to use</h3>
60 <p>Applying PIE is extremely simple; in many cases the only thing you have to do is add the behavior property
61 to your CSS.</p>
62 </li>
63 <li>
64 <h3>Be a CSS-only solution</h3>
65 <p>Many of the current solutions for implementing CSS3 features like border-radius are implemented as
66 JavaScript libraries and require the author to write JavaScript to invoke them. That is less than ideal
67 because it requires the CSS author to also know how to write JS, and it makes development slower and less
68 maintainable because your styling code is scattered between CSS and JS files. PIE works entirely within the
69 stylesheet, so you only write CSS and it's all in a single place.</p>
70 </li>
71 <li>
72 <h3>Be seamless to the CSS author</h3>
73 <p>There have been several articles and resources in recent months which show ways that you can make IE
74 "mimic" certain CSS3 features, for example using IE filters to fake box-shadow, or jQuery plugins to implement
75 rounded corners. The problem with these solutions is that they require a lot of IE-specific code on top of your
76 real CSS3, increasing your development time and the size of your CSS files. PIE on the other hand uses your
77 CSS3 directly whenever possible; you simply write real CSS3, and PIE handles it seamlessly.</p>
78 <p>PIE handles attaching, detaching, and updating automatically without any intervention from the author. This
79 means that, unlike some other solutions, PIE does not require you to explicitly initialize elements when they
80 are added to or removed from the document via script, and does not require any sort of "update" method to be
81 called when an element's position, size, or styles are modified on the fly.</p>
82 <p>Another aspect of PIE's seamlessness is that it should be fully compatible with any JavaScript library the
83 site author might choose to use. You can create elements and assign CSS3 styles to them in jQuery or YUI or
84 MooTools or any other library and PIE will automatically apply itself. Also, PIE's objects are completely
85 self-contained except for a single global <code>PIE</code> object, so there's no chance that it will
86 override objects or functions from any other JS code.</p>
87 </li>
88 <li>
89 <h3>Be as compliant with the CSS3 specs as possible</h3>
90 <p>PIE aims to be a true CSS3 implementation for those features it supports, complying with the current spec
91 drafts as closely as possible. The goal is to allow authors to write a single set of CSS3 code and have it
92 "just work" between browsers.</p>
93 </li>
94 <li>
95 <h3>Be as performant as possible</h3>
96 <p>If it makes the browser feel sluggish (more so than IE normally does, that is) then it's useless. PIE was
97 architected with performance in mind from the very beginning:</p>
98 <ul>
99 <li>Rendering elements are only updated when they need to be.</li>
100 <li>CSS property values are only parsed when they have changed.</li>
101 <li>Internal objects are created lazily, and cached when appropriate.</li>
102 <li>The behavior script is written with file size in mind, and the most advanced JS compression tools
103 available are used to minimize the file size, so the initial download is as fast as possible.</li>
104 </ul>
105 </li>
106 </ol>
109 <h2>What sites have used PIE?</h2>
110 <p>Here is just a tiny list of sites using PIE already in production. <a href="/contact/">Tell us about yours!</a></p>
111 <ul>
3d7a1a8 @lojjic Remove invisible characters at start of URLs
112 <li><a href="">American Apparel</a> (<strong><abbr title="Not safe for work">NSFW</abbr></strong>)</li>
fc4d073 Refresh sample site links
Jason Johnston authored
113 <li><a href="">BitCloud</a></li>
114 <li><a href="">California Health Advocates</a></li>
3d7a1a8 @lojjic Remove invisible characters at start of URLs
115 <li><a href="">Carrington Business WordPress Theme</a></li>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
116 <li><a href="">Composite C1 CMS</a></li>
fc4d073 Refresh sample site links
Jason Johnston authored
117 <li><a href="">Connecticut Health Foundation</a></li>
118 <li><a href="">DynDNS</a></li>
5cd48c9 Examples sites updates
Jason Johnston authored
119 <li><a href="">Journey Outreach</a></li>
fc4d073 Refresh sample site links
Jason Johnston authored
120 <li><a href="">Kleine Zeitung</a></li>
121 <li><a href="">McKesson: For Better Health</a></li>
122 <li><a href="">me:myteam</a></li>
123 <li><a href="">Mode Merr</a></li>
124 <li><a href=""></a></li>
5cd48c9 Examples sites updates
Jason Johnston authored
125 <li><a href="">Nuts About Southwest</a></li>
126 <li><a href="">Protagonize</a></li>
127 <li><a href=""></a></li>
fc4d073 Refresh sample site links
Jason Johnston authored
128 <li><a href="">Room &amp; Board</a></li>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
129 <li><a href="">Sheffield Is My Planet</a></li>
5cd48c9 Examples sites updates
Jason Johnston authored
130 <li><a href="">Skillstar</a></li>
fc4d073 Refresh sample site links
Jason Johnston authored
131 <li><a href="">Socialist Productions</a></li>
132 <li><a href="">SVS Securities</a></li>
5cd48c9 Examples sites updates
Jason Johnston authored
133 <li><a href="">Tiki for Smarties</a></li>
134 <li><a href="">TinyPie Projects</a></li>
135 <li><a href="">Traction</a></li>
136 <li><a href="">viaprinto</a></li>
137 </ul>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
140 <h2>What are the licensing terms?</h2>
141 <p>PIE is licensed under a <a href="">dual license of Apache License
142 Version 2.0 and General Public License (GPL) Version 2</a>.</p>
143 <p>While you are welcome to use PIE free of charge, we do ask that you consider making a donation as you are able.
144 Development of PIE happens almost exclusively during "free time" on evenings and weekends, so your donations are
145 important to help keep this going. Think of the hours of costly, frustrating cross-browser hacking that PIE is saving
146 you; if you can donate a small proportion of that it will be greatly appreciated!</p>
148 <!-- noformat off -->
152 </body>
153 </html>
Something went wrong with that request. Please try again.