Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 404 lines (299 sloc) 18.375 kB
8198a80 Clean up HTML source
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
4
5 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
6 <title>PIE Documentation: Supported CSS3 Features</title>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
7
8198a80 Clean up HTML source
Jason Johnston authored
8 </head>
9 <body>
10
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
11 <h1>Supported CSS3 Features</h1>
53b2879 Doc updates
Jason Johnston authored
12
13
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
14
15 <!-- noformat on -->
16
17 <p>The following sections describe in detail the exact levels of support PIE has for certain CSS3 properties
18 and value types.</p>
19
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
20 <ul>
21 <li><a href="#border-radius">border-radius</a></li>
22 <li><a href="#box-shadow">box-shadow</a></li>
23 <li><a href="#border-image">border-image</a></li>
24 <li><a href="#pie-background">CSS3 Backgrounds (-pie-background)</a></li>
25 <li><a href="#gradients">Gradients</a></li>
26 <li><a href="#rgba">RGBA Color Values</a></li>
27 <li><a href="#custom">PIE Custom Properties</a>
28 <ul>
29 <li><a href="#pie-watch-ancestors">-pie-watch-ancestors</a></li>
30 <li><a href="#pie-png-fix">PNG alpha transparency and -pie-png-fix</a></li>
31 <li><a href="#pie-lazy-init">Lazy Initialization (-pie-lazy-init)</a></li>
da3012b Add docs for -pie-poll
Jason Johnston authored
32 <li><a href="#pie-poll">Layout polling (-pie-poll)</a></li>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
33 </ul>
34 </li>
35 </ul>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
36
37
38 <h2 id="border-radius">border-radius</h2>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
39
40 <p>PIE fully supports the border-radius property as defined in the CSS3
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
41 Backgrounds and Borders module specification for IE 6-8. IE 9 and up support
42 border-radius natively.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
43
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
44 <pre class="long">border-radius: [ &lt;length&gt; | &lt;percentage&gt; ]{1,4} [ / [ &lt;length&gt; | &lt;percentage&gt; ]{1,4} ]?</pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
45
53b2879 Doc updates
Jason Johnston authored
46 <p>Only the shorthand version is supported; the longhand
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
47 border-top-left-radius etc. properties are not. The shorthand syntax does support different radii per corner, though:</p>
48
49 <p><code>border-radius: 5px 10px 15px 20px;</code> (top-left, top-right, bottom-right, bottom-left).</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
50
51 <p>The rounded corners are applied to the element's background area
52 (including solid background colors, background images, and background
8198a80 Clean up HTML source
Jason Johnston authored
53 gradients), the element's border, and the box-shadow if specified.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
54
55 <p>Both the standard border-radius property name as well as a custom
56 prefixed -pie-border-radius property name are recognized; if both are
57 present then the prefixed value will take precedence. It is recommended
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
58 to only use the standard unprefixed property when possible.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
59
60
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
61 <h2 id="box-shadow">box-shadow</h2>
62
63 <p>PIE supports the <a href="http://dev.w3.org/csswg/css3-background/#box-shadow">box-shadow property syntax</a>
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
64 as defined in the CSS3 Backgrounds &amp; Borders module, for IE 6-8. IE 9 and up support
65 box-shadow natively so PIE does nothing.</p>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
66
67 <pre class="long">box-shadow: none | &lt;shadow&gt; [,&lt;shadow&gt;]*
8198a80 Clean up HTML source
Jason Johnston authored
68 where &lt;shadow&gt; = inset? &amp;&amp; [ &lt;offset-x&gt; &lt;offset-y&gt; &lt;blur-radius&gt;? &lt;spread-radius&gt;? &amp;&amp; &lt;color&gt;? ]</pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
69
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
70 <p>Both the standard box-shadow property name as well as a custom
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
71 prefixed -pie-box-shadow property name are recognized; if both are
72 present the prefixed value will take precedence. It is recommended to
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
73 use the non-prefixed property when possible.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
74
75 <p>When used in conjunction with border-radius, the shape of the shadow
8198a80 Clean up HTML source
Jason Johnston authored
76 matches the shape of the rounded border box.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
77
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
78 <p>The shadow shape rendered by PIE is, unlike other browsers,
79 <a href="https://github.com/lojjic/PIE/issues/12">opaque in the area behind the element's background</a>.
80 This means that if your element has a transparent or semi-transparent background, the opaque shadow will
81 show through. To avoid this you must either give the element a non-transparent background, or remove the
82 box-shadow.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
83
84 <p>PIE does not currently support the 'inset' keyword, but support is
786cfa1 Updates to properties document; point some of the mentioned bugs/omis…
Jason Johnston authored
85 planned in a future version (see <a href="http://github.com/lojjic/PIE/issues#issue/3">issue #3</a>.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
86
87 <p>Notes on other browsers:</p>
88
89 <p>See the compatibility chart at the bottom of
53b2879 Doc updates
Jason Johnston authored
90 <a href="https://developer.mozilla.org/En/CSS/-moz-box-shadow">https://developer.mozilla.org/En/CSS/-moz-box-shadow</a></p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
91
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
92
93
94 <h2 id="border-image">border-image</h2>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
95
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
96 <p>PIE adds support for the border-image property to IE 6-9. This property allows
53b2879 Doc updates
Jason Johnston authored
97 you to specify an image which gets divided into nine squares which are then drawn as
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
98 the corners, sides, and center of the target element.</p>
53b2879 Doc updates
Jason Johnston authored
99
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
100 <p>There are currently a few limitations of PIE's implementation, including:</p>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
101 <ol>
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
102 <li>It only supports the 'stretch' scheme in IE 6-8. (The other schemes ('repeat' and 'round') are
103 fully supported in IE 9.)</li>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
104 <li>It doesn't support the <a href="http://dev.w3.org/csswg/css3-background/#border-image-outset">outset parameter</a>
105 described in the Backgrounds &amp; Borders module spec, though other browsers don't seem to support
106 that yet either.</li>
107 <li>It requires the 'fill' keyword to be present for the center area to be filled in. This is correct
0cfca98 Docs: add background-origin to list of unsupported bg properties
Jason Johnston authored
108 behavior according to the spec but other browsers don't require it and some even fail if 'fill' is
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
109 present, so it's a bit tricky making it work consistently across browsers.</li>
110 <li>It seems there are on rare occasion rounding errors which cause 1px gaps between slices of the
111 image. I've seen these gaps occur in other browsers too, though.</li>
112 </ol>
113
114
115
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
116 <h2 id="pie-background">CSS3 Backgrounds (-pie-background)</h2>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
117
118 <p>PIE supports CSS3 multiple background images, linear gradients as
119 background images, and some of the new CSS3 background aspects such as
120 background origin and clip. Unfortunately, to get access to these
121 post-CSS2 values, we have to put them in a property other than the
122 standard 'background' property, because IE will attempt to parse the
123 value internally and not allow us access to the original value string.
124 Therefore we use a custom -pie-background property for holding these
125 values.</p>
126
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
127 <p>(Note that IE9 and up support multiple background images natively, so PIE only
128 takes over in IE 6-8. It also takes over in IE 9 when there is a gradient present in the
129 -pie-background -- see the section on <a href="#gradients">gradients</a> below.)</p>
130
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
131 <p>Only the single -pie-background shorthand value is recognized; longhand values (e.g.
132 -pie-background-origin) are ignored.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
133
134 <p>For backward-compatibility with browsers which do not support CSS3
135 backgrounds, be sure to include appropriate fallbacks. For example:</p>
136
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
137 <pre class="long"><code>#myElement {
8198a80 Clean up HTML source
Jason Johnston authored
138 background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
7b143ad Update docs and demos to include updated browser gradient support: -w…
Jason Johnston authored
139 background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
140 background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
141 background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
7b143ad Update docs and demos to include updated browser gradient support: -w…
Jason Johnston authored
142 background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
143 background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
144 background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
145 -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
146 }</code></pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
147
148 <p>While the PIE parser will allow them, the following aspects of the
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
149 background shorthand will currently be ignored when rendering in IE 6-8:</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
150
151 <ul>
152 <li>background-attachment (will always use 'scroll' even if 'fixed'
153 or 'local' are specified)</li>
154 <li>background-size (will always use the image's intrinsic size)</li>
155 <li>background-repeat values of 'space' or 'round' (the other repeat
156 values are supported)</li>
0cfca98 Docs: add background-origin to list of unsupported bg properties
Jason Johnston authored
157 <li>background-origin (will always use 'padding-box')</li>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
158 <li>background-position values with more than 2 parts</li>
159 </ul>
160
8198a80 Clean up HTML source
Jason Johnston authored
161 <p>Support for these items will be added in future versions as possible.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
162
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
163 <p>Note that PNG background images specified using <code>-pie-background</code> will be
164 rendered with correct alpha channel transparency in IE6. See the section below regarding
165 <a href="#pie-png-fix">PNG alpha transparency</a> for more information.</p>
53b2879 Doc updates
Jason Johnston authored
166
167 <p>Notes on other browsers:</p>
168
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
169 <p>See <a href="https://developer.mozilla.org/en/CSS/Multiple_backgrounds">https://developer.mozilla.org/en/CSS/Multiple_backgrounds</a></p>
53b2879 Doc updates
Jason Johnston authored
170
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
171
172
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
173 <h2 id="gradients">Gradients</h2>
174
175 <p>PIE currently supports <code>linear-gradient</code> image values when used in the
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
176 -pie-background property, for IE 6-9. Uses of linear-gradient in any contexts other than the -pie-background
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
177 are not supported. The supported syntax matches that of the current
178 <a href="http://dev.w3.org/csswg/css3-images/#linear-gradients">CSS3 Image Values module</a> draft.</p>
179
180 <pre class="long">linear-gradient([&lt;bg-position&gt; || &lt;angle&gt;,]? &lt;color-stop&gt;, &lt;color-stop&gt;[, &lt;color-stop&gt;]*);</pre>
181
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
182 <p>PIE's linear-gradient support in IE 6-8 has a few limitations (all of these work
183 properly in IE 9):</p>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
184
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
185 <ul>
186 <li>Currently all color stops are rendered fully opaque, even if
187 specifying an rgba color value. This is due to a limitation in VML's
188 linear gradient syntax which does not allow setting opacity for
189 individual color stops. (See <a href="http://github.com/lojjic/PIE/issues#issue/7">issue #7</a>)</li>
190
191 <li>Gradients containing color-stops which lie outside the bounding area
192 of the element are not currently supported, due to limitations in VML's
193 gradient rendering.</li>
194
195 <li>The background-size/origin/repeat/position parameters are not supported
196 for gradients, so you cannot do things like
197 <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">gradient pattern effects</a>.</li>
198 </ul>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
199
200 <p>Radial gradients are not supported at this time; this feature is planned
201 for a future release (see <a href="http://github.com/lojjic/PIE/issues#issue/2">issue #2</a>)
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
202 but it may turn out to be impossible to implement in IE 6-8 due to VML's strange radial gradient behavior.</p>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
203
204 <p>Notes on other browsers:</p>
205
7b143ad Update docs and demos to include updated browser gradient support: -w…
Jason Johnston authored
206 <p>Most other browsers require a vendor prefix on the linear-gradient name, e.g. -moz-linear-gradient for Firefox
207 (supported in version 3.6+ only), -webkit-linear-gradient for recent WebKit browsers, -o-linear-gradient for Opera
208 (supported in version 11.10+ only), and -ms-linear-gradient for IE10 (currently only in pre-release).</p>
209
210 <p>In addition, WebKit browsers older than Chrome 10 and Safari 5.1 require a gradient syntax which is
211 drastically different than that of the CSS3 spec. See the
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
212 <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html">Safari documentation</a> for their syntax</p>
213
7b143ad Update docs and demos to include updated browser gradient support: -w…
Jason Johnston authored
214 <p>Adding in PIE's required -pie-background property, you will need a set of styles similar to the following
215 to get consistent linear gradient backgrounds across browsers:</p>
216
217 <pre class="long"><code>#myElement {
218 background: #CCC; /*fallback for non-CSS3 browsers*/
219 background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
220 background: -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
221 background: -moz-linear-gradient(#CCC, #EEE); /*gecko*/
222 background: -ms-linear-gradient(#CCC, #EEE); /*IE10*/
223 background: -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
224 background: linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
225 -pie-background: linear-gradient(#CCC, #EEE); /*PIE*/
226 behavior: url(PIE.htc);
227 }</code></pre>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
228
7b143ad Update docs and demos to include updated browser gradient support: -w…
Jason Johnston authored
229 <p>For more detailed information on the current state of linear-gradient across browsers, see this
230 <a href="http://www.webdirections.org/blog/css3-linear-gradients/">article by John Allsopp</a>.</p>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
231
232
233 <h2 id="rgba">RGBA Color Values</h2>
234
235 <p>PIE parses RGBA color values wherever they are allowed. However it
236 is only able to successfully render their opacity value in a few
237 contexts. In all other contexts they will be rendered with the correct
238 RGB color, but fully opaque. Here are the supported contexts in which
239 the opacity will be rendered correctly:</p>
240
241 <ul>
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
242 <li>The solid background-color as specified in the -pie-background property.</li>
243 <li>The color value of box-shadow, if the shadow has no blur.</li>
244 <li>Color stops in linear-gradient, for IE 9 only (will be rendered fully opaque in IE 6-8)</li>
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
245 </ul>
246
247
248
249 <h2 id="custom">PIE custom properties</h2>
250
251 <h3 id="pie-watch-ancestors">-pie-watch-ancestors</h3>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
252
253 <p>PIE automatically listens for any attribute or style property
254 changes on the element to which the behavior is applied. This means
255 that if you have scripting which modifies any of the recognized CSS3
256 properties on the fly, those changes will automatically be picked up
257 and the rendering will be updated to match. For example:</p>
258
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
259 <pre><code>/* JS: */
8198a80 Clean up HTML source
Jason Johnston authored
260 myElement.onclick = function() {
261 this.style.borderRadius = '20px';
262 };
263
264 /* CSS: */
265 #myElement {
266 behavior: url(PIE.htc);
267 border-radius: 10px;
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
268 }</code></pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
269
270 <p>Assuming myElement has the PIE.htc behavior attached to it, the
271 above code will work as expected without any extra effort from the
272 author of the script or CSS. This seamlessness is a big part of why PIE
8198a80 Clean up HTML source
Jason Johnston authored
273 is so easy to use.</p>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
274
275 <p>But common best-practices in scripting dictate that instead of
276 setting styles directly with element.style.foo, scripts should only
277 add/remove elements' class names, letting the actual styles
278 corresponding to those class names be maintained in the CSS. So
279 reworking the above example:</p>
280
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
281 <pre><code>/* JS: */
8198a80 Clean up HTML source
Jason Johnston authored
282 myElement.onclick = function() {
283 this.className += ' poked';
284 }
285
286 /* CSS: */
287 #myElement {
288 behavior: url(PIE.htc);
289 border-radius: 10px;
290 }
291 #myElement.poked {
292 border-radius: 20px;
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
293 }</code></pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
294
295 <p>Again, since the className is being changed on the element to which
296 the behavior is applied, PIE will automatically be notified of the
297 change and update the border-radius rendering to match the new value.</p>
298
299 <p>However, what if the className is changed not on the element itself
300 but on one of its ancestors?</p>
301
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
302 <pre><code>/* JS: */
8198a80 Clean up HTML source
Jason Johnston authored
303 myElement.onclick = function() {
304 this.parentNode.className += ' poked';
305 }
306
307 /* CSS: */
308 #myElement {
309 behavior: url(PIE.htc);
310 border-radius: 10px;
311 }
312 .poked #myElement {
313 border-radius: 20px;
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
314 }</code></pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
315
316 <p>This is a very common pattern which allows a lot of flexibility.
317 However, in this case, PIE will not be automatically notified of the
318 className change. To be notified, it will also have to add a listener
319 to the ancestor element. We could brute-force this by automatically
320 adding propertychange listeners to all the ancestors of every
321 PIE-targeted element, but that would be bad for performance and memory
322 usage. So instead, we have introduced a custom CSS property which
323 allows authors to tell PIE that certain ancestors should be watched:</p>
324
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
325 <pre><code>/* JS: */
8198a80 Clean up HTML source
Jason Johnston authored
326 myElement.onclick = function() {
327 this.parentNode.className += ' poked';
328 }
329
330 /* CSS: */
331 #myElement {
332 behavior: url(PIE.htc);
333 border-radius: 10px;
334 <strong>-pie-watch-ancestors: 1;</strong>
335 }
336 .poked #myElement {
337 border-radius: 20px;
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
338 }</code></pre>
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
339
340 <p>This tells PIE that it should watch for changes on ancestors one
341 level up from the element. It will attach the propertychange listener
342 to the element's parent and therefore be notified when the parent's
8198a80 Clean up HTML source
Jason Johnston authored
343 className gets changed, and update the rendering correctly.
9f72ca3 Add documentation file describing details of support for the various …
Jason Johnston authored
344 </p>
345
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
346
347
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
348 <h3 id="pie-png-fix">PNG alpha transparency and -pie-png-fix</h3>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
349
350 <p>A nice side-effect of PIE's use of VML for rendering is that it causes PNG images
351 with alpha channel transparency to be correctly displayed in IE6 when they are rendered
352 by PIE's engine. This includes:</p>
353 <ul>
354 <li>Background images specified using the <a href="#pie-background">-pie-background</a> property</li>
355 <li>Background images specified using the standard <code>background-image</code> style, when used
356 in conjunction with other CSS3 properties that trigger re-rendering of the background
357 (border-radius, border-image)</li>
358 <li>&lt;img> elements that have border-radius applied</li>
359 </ul>
360
361 <p>Sometimes you might want the benefit of the fixed PNG transparency, on elements that do not meet
362 the criteria above. In that case, you can add the custom property <code>-pie-png-fix: true;</code> to
363 force re-rendering of the background-image or &lt;img>. (The PIE.htc behavior must also be
364 attached to the element.)</p>
365
366
367
61e36da Add table of contents, move sections around a bit to group thing better
Jason Johnston authored
368 <h3 id="pie-lazy-init">Lazy Initialization (-pie-lazy-init)</h3>
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
369
370 <p>While PIE has been optimized for speed, there is still a small cost in rendering performance for each element
371 it is applied to. When you have dozens or hundreds of elements on your page with CSS3 styles applied, this
372 can add up to a noticeable rendering delay.</p>
373
374 <p>When you have that many elements on one page, chances are that only a small number of them are visible
375 in the browser viewport initially, as viewing the rest would require scrolling. PIE allows an optional
376 optimization for this case: if you apply the custom <code>-pie-lazy-init:true;</code> property to elements
377 PIE will delay the initialization of their CSS3 rendering until they are scrolled into the viewport. This
378 keeps the initial page load snappy without severely limiting the number of elements you can render.</p>
379
380
da3012b Add docs for -pie-poll
Jason Johnston authored
381
382 <h3 id="pie-poll">Layout Polling (-pie-poll)</h3>
383
384 <p>In general PIE is quite good at detecting changes to the size and position of the elements to which it
385 is attached and automatically adjusting its rendering to match. It does this by listening to the IE-specific
386 <code>onmove</code> and <code>onresize</code> events for each target element. In the majority of cases this
387 works seamlessly; in rare cases, however, IE does not fire these events when it should, and PIE gets out of sync.</p>
388
389 <p>To help users get around these cases, PIE has a second method for tracking size and position changes: polling.
390 When polling is enabled for an element, PIE will manually query that element's layout several times a second, and
391 if the layout has changed then it will adjust the rendering.</p>
392
67094db Site documentation updates to get up to date with beta5 release
Jason Johnston authored
393 <p>Polling is enabled by default for all elements in IE 8 and 9 (as those version is particularly bad about not firing
da3012b Add docs for -pie-poll
Jason Johnston authored
394 the events) and disabled in IE 6 and 7. Users can override these defaults
395 to force polling on or off for individual elements by setting a custom CSS property: just specify
396 <code>-pie-poll:true;</code> to force polling on for an element, or <code>-pie-poll:false;</code> to disable it.</p>
397
398
ee110db Documentation updates to sync with site and recent changes
Jason Johnston authored
399 <!-- noformat off -->
400
401
402
403 </body>
404 </html>
Something went wrong with that request. Please try again.