RubyGems - survivalkit - Versions diffs - 0.1 - Mend

survivalkit 0.1

Files changed (1368) hide show

data/templates/project/sources/pie/documentation/known-issues.html ADDED Viewed

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
+  <title>PIE Documentation: Known Issues</title>
+</head>
+<body>
+<h1>Known Issues</h1>
+<!-- noformat on -->
+<p>This document describes the most common general issues encountered when using PIE. For information regarding bugs
+and limitations in the implementations of specific features, see the detailed documentation of the
+<a href="/documentation/supported-css3-features/">supported CSS3 features</a>, and also
+our <a href="http://github.com/lojjic/PIE/issues">issue tracking system</a>.</p>
+<ul>
+    <li><a href="#z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</a></li>
+    <li><a href="#relative-paths">Relative paths</a></li>
+    <li><a href="#shorthand">Shorthand only</a></li>
+    <li><a href="#hasLayout">Problems with hasLayout</a></li>
+    <li><a href="#spec-bugs">Deviations from CSS3 spec</a></li>
+    <li><a href="#content-type">Serving the correct Content-Type</a></li>
+    <li><a href="#x-domain">Same domain limitation</a></li>
+    <li><a href="#elements">Problems on certain elements</a></li>
+    <li><a href="#zoom">Browser zooming</a></li>
+</ul>
+<h2 id="z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</h2>
+<p>First, a little background on how PIE renders CSS3 decorations: a single <code>&lt;css3-container/&gt;</code>
+element is created which holds all the VML objects. This container element is inserted as a previous sibling to the
+target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or
+position:relative, then the css3-container element is given the same z-index as the target element, and since it
+is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking
+in between.</p>
+<p>However, this does not work so well when the target element is position:static, because static elements do not
+participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give
+it <code>z-index:-1</code>. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the
+target element, it will also go <em>behind the background of any ancestor element(s) which are themselves position:static.</em>
+This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element's
+background.</p>
+<p>The only way I know of to work around this is to either:</p>
+<ol>
+    <li>make the target element position:relative, or</li>
+    <li>make the ancestor element position:relative and give it a z-index.</li>
+</ol>
+<p>Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and
+z-index stacking. PIE could easily force one or the other itself, but:</p>
+<ol>
+    <li>One or the other may be more appropriate depending on the particular situation, so the CSS author needs to
+    be able to control which one gets chosen.</li>
+    <li>Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to
+    confusing inconsistencies.</li>
+</ol>
+<p>PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In
+most cases simply adding position:relative to the target element is fine.</p>
+<h2 id="relative-paths">Relative paths</h2>
+<p>There are two main issues related to relative paths in CSS:</p>
+<h3>The behavior URL</h3>
+<p>IE interprets the URL for the <code>behavior</code> property relative to the source HTML document, rather than
+relative to the CSS file like every other CSS property. This makes invoking the PIE behavior inconvenient, because
+the URL has to either be:</p>
+<ol>
+    <li>Absolute from the domain root &mdash; this makes the CSS not easily moveable between directories &mdash; or,</li>
+    <li>Relative to the HTML document &mdash; this makes the CSS not easily reusable between different HTML files.</li>
+</ol>
+<h3>URLs in PIE-interpreted CSS properties</h3>
+<p>PIE does not parse the CSS stylesheets (to do so would be unacceptably slow); it lets IE handle the parsing,
+selector querying, cascading, etc. and then simply asks it for the resulting property values. This means that when
+PIE gets a property value, it has no knowledge of the context from which that value originated.</p>
+<p>As a result, for properties which contain URL values (such as border-image or -pie-background), PIE cannot resolve
+those URLs relative to the CSS file in which they appear. It resolves them instead relative to the JavaScript
+execution context, which is the location of the source HTML document.</p>
+<h2 id="shorthand">Shorthand only</h2>
+<p>For all CSS properties which PIE parses, only the shorthand versions of those properties will be recognized.
+For example, while <code>border-radius</code> is supported, the individual longhand <code>border-top-left-radius</code>
+etc. properties are not.</p>
+<p>The reason for this is the same reason URLs are not resolved relative to the CSS file (see above): PIE does not
+have visibility into where each style property comes from. If there is both a shorthand and a longhand
+property present, PIE cannot determine the order in which the CSS author specified those properties, nor can it
+determine the specificity of the selector for each property. It cannot therefore make an informed decision about
+which property should take precedence.</p>
+<p>To avoid making dumb guesses, we have opted to only support shorthand properties. Shorthand was chosen over longhand
+to keep file size small and avoid tedious repetition.</p>
+<h2 id="hasLayout">Problems with hasLayout</h2>
+<p>In order to automatically detect element position and dimension changes, PIE has to force
+"<a href="http://www.satzansatz.de/cssd/onhavinglayout.html">hasLayout</a>" on the target element (in IE6 and IE7).
+It does so by applying the style <code>zoom:1;</code> to the element.</p>
+<p>For the most part, doing this has no adverse effect on the rendering of the element. In fact, a lot of times it
+improves the rendering (hasLayout is often used as a hack to work around IE CSS bugs). However, in some cases this has
+<a href="http://www.satzansatz.de/cssd/onhavinglayout.html#rev">unwanted consequences</a>.</p>
+<h2 id="spec-bugs">Deviations from CSS3 spec</h2>
+<p>For the properties it supports, PIE attempts to match the syntax parsing and rendering as specified by the current
+CSS3 spec document drafts. Any deviations should be considered defects. If you find a bug, please open a ticket in
+our <a href="http://github.com/lojjic/PIE/issues">issue tracking system</a>. You can find information about many of the known issues in the
+detailed documentation of <a href="/documentation/supported-css3-features">supported CSS3 properties and values</a>.</p>
+<p>Do keep in mind, however, that the CSS3 specs are still a moving target. Some properties, such as border-radius,
+have been around long enough, and have sufficient cross-browser implementation, such that it is unlikely further
+changes to the spec will occur. Other things, such as gradients, are relatively new to the specs and are more likely
+to change in future drafts.</p>
+<p>Fortunately, this threat of future change is not as much of a problem when using PIE as it is when writing
+for other browsers. The reason is that the CSS author, by deploying PIE, essentially has control over the user agent.
+You know that when you deploy a certain version of PIE, all IE users will experience the same parsing and rendering
+behavior. You don't have to worry that some users will be using an old version which has more bugs, or that users will
+have a newer version in the future which has different behavior you can't plan for. You can safely depend on the
+behavior of the exact PIE version you deploy, indefinitely into the future.</p>
+<p>But what happens when the spec changes and PIE hasn't yet been updated to support the new syntax or behavior? Or
+what about when there's a bug in PIE that makes it impossible to use the same CSS property for both PIE and other
+browsers? To handle both these cases, any of the supported CSS3 properties can be prefixed with <code>-pie-</code>
+and that will be used in preference to the standard property. So for instance you could specify a <code>box-shadow</code>
+value which would be used by other browsers, and then a <code>-pie-box-shadow</code> value which will be used only by
+PIE. This is recommended only as a final resort; it's always best to use the standard property if at all possible.</p>
+<h2 id="content-type">Serving the correct Content-Type</h2>
+<p>IE requires that HTC behaviors are served up with a content-type header of "text/x-component", otherwise it will
+simply ignore the behavior. Many web servers are preconfigured to serve the correct content-type, but others are not.</p>
+<p>If you have problems with the PIE behavior not being applied, check your server configuration and if possible
+update it to use the correct content-type. For Apache, you can do this in a .htaccess file:</p>
+<pre><code>AddType text/x-component .htc</code></pre>
+<p>If for some reason you are unable to modify the server configuration (e.g. if you are on a shared host which does
+not allow custom .htaccess files), then you may also use a wrapper script. For instance, PIE includes in its
+distribution files a PHP script called PIE.php; this script simply serves up the PIE.htc file using the correct
+content-type header. To use it, simply make sure both PIE.php and PIE.htc are in the same directory, and then in your
+CSS point the behavior to the PHP file instead:</p>
+<pre><code>behavior: url(PIE.php);</code></pre>
+<h2 id="x-domain">Same-domain limitation</h2>
+<p>IE requires that the PIE.htc behavior file must be in the same domain as the HTML page which uses it. If you try
+to load the behavior from a different domain, you will get an "Access Denied" error.</p>
+<p>Note that the domain must be <em>exactly</em> the same; that means that http://www.foo.com is a different
+domain than http://foo.com.</p>
+<p>If this limitation is a dealbreaker for you, you may be able to use the alternate
+<a href="/documentation/pie-js/">PIE.js</a> approach to get around it.</p>
+<h2 id="elements">Problems on certain element types</h2>
+<p>PIE does not currently work when applied to the &lt;body> or &lt;html> elements. Try using a wrapper div
+around the body contents and applying your CSS3 styles and PIE.htc to it instead.</p>
+<p>Avoid using PIE on &lt;fieldset> elements, as it does not properly handle rendering of the &lt;legend>.</p>
+<p>Also, element types that cannot accept children (e.g. &lt;input> and &lt;img>) will fail or throw errors
+if you apply styles that use relative length units such as em or ex. Stick to using px units for these elements.</p>
+<h2 id="zoom">Browser Zooming</h2>
+<p>When the user uses the browser zoom function (available in IE7 and up), PIE does not currently scale any
+background images it manages to match. This can cause things to look broken at zoom levels other than 100%,
+if your background images are dependent on sizing (e.g. sprite images).</p>
+<!-- noformat off -->
+</body>
+</html>

data/templates/project/sources/pie/documentation/pie-js.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!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:
+        <pre><code>&lt;script type="text/javascript" src="path/to/PIE.js">&lt;/script></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() {
+    $('.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>

data/templates/project/sources/pie/documentation/product-comparison.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>PIE Documentation: Comparing PIE to Other CSS3 Products</title>
+</head>
+<body>
+<h1>Comparing PIE to Other CSS3 Products</h1>
+<!-- noformat on -->
+<p>PIE is not the first product by far to provide some level of CSS3 support in IE. It can be difficult to tell what the differences are between all the products out there, so I'm going to attempt to cover several of the major ones here, and clarify their similarities and differences with PIE.</p>
+<p>An aside: some of these comparisons are based on fairly cursory evaluations of the projects. As a result there may be some inaccuracies. I welcome any corrections, as I want to give each product a fair description.</p>
+<ul>
+    <li><a href="#ie7-js">IE7.js</a></li>
+    <li><a href="#selectivizr">Selectivizr</a></li>
+    <li><a href="#eCSStender">eCSStender</a></li>
+    <li><a href="#DD_roundies">DD_roundies</a></li>
+    <li><a href="#curved-corner">border-radius.htc (curved-corner)</a></li>
+    <li><a href="#ie-css3-htc">ie-css3.htc</a></li>
+</ul>
+<h2 id="ie7-js">Dean Edwards's <a href="http://code.google.com/p/ie7-js/">IE7.js</a> (and IE8.js, IE9.js)</h2>
+<p>This is the granddaddy of all IE shims, and probably the first major attempt at implementing CSS3 features in IE. I'm a big fan of Dean Edwards's work (<a href="http://dean.edwards.name/weblog/2006/03/base/">Base.js</a> is still the most elegant classical inheritance abstraction for JavaScript I've come across) and this is certainly one of his more impressive chunks of code.</p>
+<p>It is implemented as a series of drop-in .js scripts, the main focus of which is working around IE layout bugs and implementing advanced selectors. This includes, naturally, several CSS3 selectors. It doesn't currently attempt to implement rendering of any of the CSS3 box decoration properties.</p>
+<p>Conversely, PIE doesn't attempt to implement any CSS3 selectors. This means that the two products target completely different aspects of CSS3 with no overlap.</p>
+<p>The big downside with IE7.js as I understand it is performance. Because it has to parse all the document's stylesheets, rewrite many aspects of them, and add a bunch of extra elements and classNames to the DOM tree, page loads can feel sluggish. This is the main reason PIE makes no attempt to implement selectors, or anything else such as shorthand/longhand specificity resolution which would require parsing stylesheets. Performance is a primary goal, so I made the tough choice early on to sacrifice some completeness for speed.</p>
+<p>A possibility I find intriguing is combining the two libraries so that IE7.js gives you all the advanced selectors, and PIE gives you the advanced box decoration rendering. While I haven't tried this yet, I don't know of any reason it couldn't work splendidly.</p>
+<h2 id="selectivizr">Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a></h2>
+<p>This project, like IE7.js, implements CSS3 selectors only. It should also be possible to combine this with PIE to get both selectors and box decorations in IE.</p>
+<p>One of the more interesting things about this product is that it outsources all its parsing and matching of CSS selectors to a number of other JavaScript libraries. As a result, Selectivizr itself is extremely small. This makes a whole lot of sense if your site, like many or most sites, already include a JavaScript library like jQuery for other functionality; by reusing that code your total file download size can be much smaller.</p>
+<h2 id="eCSStender">Aaron Gustafson's <a href="http://ecsstender.org/">eCSStender</a></h2>
+<p>Of the products listed here, this is probably the most modular and well-documented from an API point of view. It consists of a "core" which parses the page's stylesheets and invokes one or more modular "extensions" based on conditions such as selector pattern or property name. There are a few extensions available which add some level of support for various features, including @font-face, CSS3 selectors, and CSS3 Backgrounds and Borders.</p>
+<p>That last one sounds like it might overlap with PIE somewhat, but alas not really, at least not yet. It appears that the main focus of eCSStender is not implementing advanced features where they are missing, but more just abstracting away some of the differences in how browsers already implement things. The Backgrounds and Borders extension, for example, allows you to just write <code>border-radius</code> in your CSS and it automatically adds the corresponding vendor-prefixed versions. This is definitely handy, but if the browser doesn't already natively support some variant of rounded corners (as IE obviously does not), then it does nothing for you. Similarly, it handles <code>box-shadow</code> and will add an IE shadow filter to try to mimic the shadow in IE, but the filter differs so much from standard box-shadow in rendering that this isn't really useful if precision matters to you.</p>
+<p>That said, eCSStender's modular nature should make it very easy to write an extension which would add references to PIE.htc where needed to implement the advanced renderings. This is a very interesting prospect.</p>
+<h2 id="DD_roundies">Drew Diller's <a href="http://www.dillerdesign.com/experiment/DD_roundies/">DD_roundies</a></h2>
+<p>It's difficult to express how much Drew's work on DD_roundies has influenced and inspired my work on PIE. The whole idea of positioning VML behind elements to mimic box decorations, proof that it could be done reliably and automatically adjust to position and size changes, and even some of the logic for building the rounded box paths, came from seeing DD_roundies in action and studying its source code. There are a lot of similarities between these two products... including, unfortunately, many of the "gotchas".</p>
+<p>DD_roundies is implemented as a JavaScript library which you can call to add rounded corners to elements. It isn't just limited to IE, but can also apply the appropriate [-webkit-][-moz-]border-radius CSS properties if so desired. It does handle different radius lengths for each corner, though not different x/y axis radius values.</p>
+<p>The main differences between DD_roundies and PIE are:</p>
+<ul>
+    <li>PIE is far more complete feature-wise. It basically handles everything DD_roundies does, but additionally supports non-solid border styles, differing x/y axis radius values, and details of the CSS3 border-radius spec such as how overlapping radii are adjusted. And then it adds in other CSS3 decoration features like box-shadow, multiple backgrounds, border-image, and gradients.</li>
+    <li>They are invoked very differently. DD_roundies is a .js file which requires you to write JavaScript to invoke it. Your radius values and selectors must be passed in that JS function call, which means they are separated from your CSS so you have two places to maintain styling code. PIE on the other hand is a .htc behavior, which is applied directly in your CSS file. It also picks up its target styles from your standard CSS rules, so you don't ever have to write any JavaScript. Both approaches have their strengths and weaknesses, but in my opinion PIE's approach gives a nicer coding experience to CSS authors.</li>
+</ul>
+<h2 id="curved-corner">Remiz Rahnas's <a href="http://code.google.com/p/curved-corner/">border-radius.htc</a> aka "curved-corner"</h2>
+<p>Like PIE, this project uses a .htc behavior which picks up the target border-radius value directly from the CSS. It also uses a similar approach of positioning VML directly behind the target element.</p>
+<p>Unfortunately it is extremely simplistic. It only supports a single border radius value for all corners, doesn't handle rendering background images which are positioned or have repeat values other than 'repeat', and only supports solid border styles. In addition, it doesn't automatically adjust to match position or size changes of target elements, making it difficult to use in dynamically scripted environments.</p>
+<p>That said, its simplicity comes with a big advantage: a minuscule file size. If you only require the basic features it provides, then this is probably an excellent choice.</p>
+<h2 id="ie-css3-htc">Nick Fetchak's <a href="http://www.fetchak.com/ie-css3/">ie-css3.htc</a></h2>
+<p>This project seems nearly identical to border-radius.htc mentioned above (in face Nick gives credit to Remiz on the site), but adds in some support for box-shadow, including blur, matching the rounded box shape. To my knowledge it is the first product to do so (though I had already implemented it in PIE before I found this project online).</p>
+<p>The box-shadow seems to work well, but due to the algorithm of IE's blur filter, the rendering for a given blur radius ends up looking quite a bit different between IE and other browsers. I ran into this same issue building PIE, but have made some adjustments to make the rendering much more similar to the standard blur algorithm.</p>
+<p>It also has some support for text-shadow, which PIE does not (yet) do at all. This is on the roadmap, but it is a very tricky problem to get text-shadow rendering correctly and adjust to on-the-fly DOM changes, perhaps even impossible.</p>
+<!-- noformat off -->
+</body>
+</html>

data/templates/project/sources/pie/documentation/q-and-a.html ADDED Viewed

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>PIE Documentation: Q &amp; A</title>
+</head>
+<body>
+<h1>Q &amp; A</h1>
+<!-- noformat on -->
+<h2>What is PIE?</h2>
+<p>PIE is a utility for Internet Explorer (currently versions 6-8) which gives it the ability to parse
+and render a number of the most useful CSS3 properties.</p>
+<h2>How does it work?</h2>
+<p>PIE is implemented as an attached behavior; in your CSS, you simply specify:</p>
+<pre><code>behavior: url(PIE.htc);</code></pre>
+<p>Once the behavior is attached, it looks for any of the supported CSS3 properties which might be attached to the
+target element, parses those properties, and renders them on the page.</p>
+<h2>What CSS3 properties are currently supported?</h2>
+<p>PIE currently has full or partial support for:</p>
+<ul>
+    <li>border-radius</li>
+    <li>box-shadow</li>
+    <li>border-image</li>
+    <li>multiple background images</li>
+    <li>linear-gradient background images</li>
+</ul>
+<p>You can find detailed information about the levels of support in the
+<a href="/documentation/supported-css3-features/">Supported CSS3 Properties and Values</a> documentation.</p>
+<h2>How large is it?</h2>
+<p>The .htc behavior file is 30K. With gzip compression, it is 12K. (You do gzip your content, right?)</p>
+<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
+you'd have to use otherwise, so this is usually a net win in terms of total page weight. Also, it's important to
+note that the behavior file is only downloaded by IE, so in other browsers which support these CSS3 features natively,
+that's pure win.</p>
+<h2>What are the goals of the project?</h2>
+<p>Even though today's advanced browsers are starting to implement decent levels of CSS3 support, it will still be
+years before Web authors can start using these CSS3 features in widespread deployment. The main reason is, of course,
+that Internet Explorer does not yet implement any of these features, has a majority market share, and has a notoriously
+slow upgrade cycle among its users. IE9 promises to start implementing some CSS3, but like it or not it will still
+likely be years before IE8 and below shrink to a negligible percentage of users.</p>
+<p>PIE aims to drastically shorten that timeframe, by implementing a simple shim to make CSS3 "just work" in IE. Our
+goals are:</p>
+<ol>
+    <li>
+        <h3>Be simple to use</h3>
+        <p>Applying PIE is extremely simple; in many cases the only thing you have to do is add the behavior property
+        to your CSS.</p>
+    </li>
+    <li>
+        <h3>Be a CSS-only solution</h3>
+        <p>Many of the current solutions for implementing CSS3 features like border-radius are implemented as
+        JavaScript libraries and require the author to write JavaScript to invoke them. That is less than ideal
+        because it requires the CSS author to also know how to write JS, and it makes development slower and less
+        maintainable because your styling code is scattered between CSS and JS files. PIE works entirely within the
+        stylesheet, so you only write CSS and it's all in a single place.</p>
+    </li>
+    <li>
+        <h3>Be seamless to the CSS author</h3>
+        <p>There have been several articles and resources in recent months which show ways that you can make IE
+        "mimic" certain CSS3 features, for example using IE filters to fake box-shadow, or jQuery plugins to implement
+        rounded corners. The problem with these solutions is that they require a lot of IE-specific code on top of your
+        real CSS3, increasing your development time and the size of your CSS files. PIE on the other hand uses your
+        CSS3 directly whenever possible; you simply write real CSS3, and PIE handles it seamlessly.</p>
+        <p>PIE handles attaching, detaching, and updating automatically without any intervention from the author. This
+        means that, unlike some other solutions, PIE does not require you to explicitly initialize elements when they
+        are added to or removed from the document via script, and does not require any sort of "update" method to be
+        called when an element's position, size, or styles are modified on the fly.</p>
+        <p>Another aspect of PIE's seamlessness is that it should be fully compatible with any JavaScript library the
+        site author might choose to use. You can create elements and assign CSS3 styles to them in jQuery or YUI or
+        MooTools or any other library and PIE will automatically apply itself. Also, PIE's objects are completely
+        self-contained except for a single global <code>PIE</code> object, so there's no chance that it will
+        override objects or functions from any other JS code.</p>
+    </li>
+    <li>
+        <h3>Be as compliant with the CSS3 specs as possible</h3>
+        <p>PIE aims to be a true CSS3 implementation for those features it supports, complying with the current spec
+        drafts as closely as possible. The goal is to allow authors to write a single set of CSS3 code and have it
+        "just work" between browsers.</p>
+    </li>
+    <li>
+        <h3>Be as performant as possible</h3>
+        <p>If it makes the browser feel sluggish (more so than IE normally does, that is) then it's useless. PIE was
+        architected with performance in mind from the very beginning:</p>
+        <ul>
+            <li>Rendering elements are only updated when they need to be.</li>
+            <li>CSS property values are only parsed when they have changed.</li>
+            <li>Internal objects are created lazily, and cached when appropriate.</li>
+            <li>The behavior script is written with file size in mind, and the most advanced JS compression tools
+            available are used to minimize the file size, so the initial download is as fast as possible.</li>
+        </ul>
+    </li>
+</ol>
+<h2>What sites have used PIE?</h2>
+<p>Here is just a tiny list of sites using PIE already in production. <a href="/contact/">Tell us about yours!</a></p>
+<ul>
+    <li><a href="http://americanapparel.net">American Apparel</a> (<strong><abbr title="Not safe for work">NSFW</abbr></strong>)</li>
+    <li><a href="http://demo.crowdfavorite.com/carrington-business">Carrington Business WordPress Theme</a></li>
+    <li><a href="http://www.composite.net/">Composite C1 CMS</a></li>
+    <li><a href="http://www.journeyoutreach.org/">Journey Outreach</a></li>
+    <li><a href="http://www.lizardq.com/">LizardQ Panoramic Cameras</a></li>
+    <li><a href="http://mirrorstonecrystals.com/">Mirrorstone Crystals</a></li>
+    <li><a href="http://www.blogsouthwest.com/">Nuts About Southwest</a></li>
+    <li><a href="http://oneillrealestate.ca/">O'Neill Real Estate</a></li>
+    <li><a href="http://www.protagonize.com">Protagonize</a></li>
+    <li><a href="http://realti.ca/">Realti.ca</a></li>
+    <li><a href="http://sheffieldismyplanet.co.uk/">Sheffield Is My Planet</a></li>
+    <li><a href="http://www.skillstar.com/">Skillstar</a></li>
+    <li><a href="http://twbasics.keycontent.org/">Tiki for Smarties</a></li>
+    <li><a href="http://www.tinypie.co.uk/">TinyPie Projects</a></li>
+    <li><a href="http://www.tractionco.com/">Traction</a></li>
+    <li><a href="https://www.viaprinto.de/">viaprinto</a></li>
+    <!-- Check these:
+    <li><a href="http://cahealthadvocates.org/">California Health Advocates</a></li>
+    <li><a href="http://www.kleinezeitung.at/">Kleine Zeitung</a></li>
+    <li><a href="http://www.memyteam.com/">me:myteam</a></li>
+    -->
+    <!--<li><a href=""></a></li>-->
+</ul>
+<h2>What are the licensing terms?</h2>
+<p>PIE is licensed under a <a href="http://github.com/lojjic/PIE/blob/master/LICENSE">dual license of Apache License
+Version 2.0 and General Public License (GPL) Version 2</a>.</p>
+<p>While you are welcome to use PIE free of charge, we do ask that you consider making a donation as you are able.
+Development of PIE happens almost exclusively during "free time" on evenings and weekends, so your donations are
+important to help keep this going. Think of the hours of costly, frustrating cross-browser hacking that PIE is saving
+you; if you can donate a small proportion of that it will be greatly appreciated!</p>
+<!-- noformat off -->
+</body>
+</html>