forked from lojjic/PIE
/
pie-js.html
94 lines (65 loc) · 3.62 KB
/
pie-js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>PIE Documentation: PIE.js - PIE JavaScript edition</title>
</head>
<body>
<h1>PIE.js - PIE JavaScript edition</h1>
<!-- noformat on -->
<p>In addition to the traditional PIE.htc behavior, the distribution now also includes a pure
JavaScript version of the tool, PIE.js. While the .htc behavior is still the recommended approach
for most users, the JS version has some advantages that may be a better fit for some users.</p>
<h2 id="pros">Advantages of the JS version</h2>
<p>Since it is a normal .js file, PIE.js does not suffer from some of the more annoying limitations
of the PIE.htc behavior:</p>
<ul>
<li>You can load PIE.js from a different domain than the HTML page.</li>
<li>You don't have to worry about your server not using the correct Content-type header for the file.</li>
<li>Referencing the PIE.js file via a relative path is simpler since you only have to do it once in
each HTML page.</li>
<li>It is more easily integrated within JavaScript libraries.</li>
</ul>
<h2 id="cons">Disadvantages of the JS version</h2>
<p>Unfortunately there are some significant drawbacks to using PIE.js, which is why the .htc behavior is still
the recommended approach for most users:</p>
<ul>
<li>Invoking it requires writing some JavaScript, which means your styling is scattered between CSS
and JS code.</li>
<li>The .js file blocks the parsing of the page while it is loading, whereas the .htc file loads asynchronously.</li>
<li>You have to wait until the page's DOM has completely loaded before applying PIE.js to elements, whereas
the .htc behavior applies itself while the page is still loading. This means the "flash of unstyled content"
problem is much greater with PIE.js.</li>
<li>PIE.js cannot automatically attach and detach itself from elements which are dynamically added to/removed from
the page's DOM, so you have to write code to handle that yourself.</li>
</ul>
<h2 id="usage">Using PIE.js</h2>
<p>If you've decided the above advantages outweigh the disadvantages for you, here's how you go about using PIE.js.</p>
<p><em>Note: this API is currently very simplistic, and will likely be enhanced in the future to make it easier
to work with, for example allowing the use of CSS selectors to match a set of elements.</em></p>
<ol>
<li>Include the PIE.js script in your page, surrounded by a conditional comment to prevent it from being downloaded in other browsers:
<pre><code><!--[if IE]>
<script type="text/javascript" src="path/to/PIE.js"></script>
<![endif]--></code></pre>
</li>
<li>Invoke the <code>PIE.attach(el)</code> function for each element that needs CSS3 styling. Make sure you do this
after the page's DOM has been fully loaded. For example, using jQuery:
<pre><code>$(function() {
if (window.PIE) {
$('.rounded').each(function() {
PIE.attach(this);
});
}
});</code></pre>
</li>
</ol>
<p>If you are going to add new elements to the page via JavaScript after the fact, you will have to make sure your
JS code calls <code>PIE.attach(el)</code> for each new element that needs CSS3 styling. Calling attach for a
particular element more than once is safe (PIE will ignore the call if the element has already been attached),
so you don't need to worry about filtering out elements.</p>
<p>Also, if you remove elements from the page that had PIE attached, you will need to call
<code>PIE.detach(el)</code> to clean up their CSS3 rendering.</p>
<!-- noformat off -->
</body>
</html>