Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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