RubyGems - survivalkit - Versions diffs - 0.3.4 → 1.0.beta.1 - Mend

survivalkit 0.3.4 → 1.0.beta.1

Files changed (1362) hide show

data/templates/project/sources/pie/documentation/about.html DELETED Viewed

@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-    <title>PIE Documentation: About PIE</title>
-</head>
-<body>
-<h1>About PIE</h1>
-<!-- noformat on -->
-<p>CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on.  These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.</p>
-<p>CSS3 promises to do away with all that!  But as we all know, due to Internet Explorer's lack of support for any of these features, <strong>we must be patient and refrain from using them</strong>, and make do with the same old tedious techniques for the foreseeable future.</p>
-<p><strong>Or must we?</strong></p>
-<p>PIE stands for Progressive Internet Explorer.  It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.  Consider, if you will, the following CSS:</p>
-<pre><code>#myElement {
-    background: #EEE;
-    padding: 2em;
-    -moz-border-radius: 1em;
-    -webkit-border-radius: 1em;
-    border-radius: 1em;
-}</code></pre>
-<p>This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or 8, which all display a square box.  However, add the following single rule to that CSS:</p>
-<pre><code>#myElement {
-    ...
-    behavior: url(PIE.htc);
-}</code></pre>
-<p>Now the exact same rounded corners appear in IE!  That's all there is to it.  No, really, I mean it.</p>
-<p>PIE currently has full or partial support for the following CSS3 features:</p>
-<ul>
-    <li>border-radius</li>
-    <li>box-shadow</li>
-    <li>border-image</li>
-    <li>multiple background images</li>
-    <li>linear-gradient as background image</li>
-</ul>
-<p>Other features are under active development.</p>
-<p><strong>Want to learn more?</strong> View some live <a href="/demos">demos</a>, read the <a href="/documentation/">documentation</a>, and <a href="/download-latest">download PIE</a> to try it yourself. Be sure to read the <a href="/documentation/known-issues/">Known Issues</a> page for common problems and their solutions.</p>
-<p>PIE is still a young project with big plans. But it's already good enough to save you a <em>lot</em> of time and make your life as a Web developer much easier. Happy CSS3 coding!</p>
-<!-- noformat off -->
-</body>
-</html>

data/templates/project/sources/pie/documentation/build.html DELETED Viewed

@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
-    <title>PIE Documentation: Building PIE From Source</title>
-</head>
-<body>
-<h1>Building PIE From Source</h1>
-<!-- noformat on -->
-<p>This document describes how you can build PIE from the most recent source code. This is useful if you want to get a feature or bug fix which hasn't yet made it into a release package. It's also necessary if you want to make changes to the code yourself to try and fix a bug or implement a new feature. If you do so, please consider contributing your changes back to the main project so we can all benefit!</p>
-<h2 id="prereqs">Prerequisites</h2>
-<p>Building PIE is straightforward. You need  to have the following tools installed:</p>
-<ol>
-    <li><a href="http://git-scm.com/">Git</a>, if you are going to be checking out the source from the Git repository</li>
-    <li><a href="http://java.com">Java</a> runtime, version 6 or higher</li>
-    <li><a href="http://ant.apache.org">Ant</a>, for performing the build</li>
-</ol>
-<p>Once these prerequisites are installed, perform the following steps:</p>
-<h2 id="getsource">Get the source code</h2>
-<p>You have two options for getting the source:</p>
-<ol>
-    <li>Check out the source using Git:
-        <pre><kbd>git clone git://github.com/lojjic/PIE.git</kbd></pre>
-        or:
-    </li>
-    <li>Download an archive of the source:
-        <a href="http://github.com/lojjic/PIE/archives/master">http://github.com/lojjic/PIE/archives/master</a>
-    </li>
-</ol>
-<h2 id="build">Perform the build</h2>
-<p>From the root directory of your local copy of the source code, invoke the following command in the terminal:</p>
-<pre><kbd>ant</kbd></pre>
-<p>This will perform the build, creating a new directory named "build/". This directory will contain the following
-artifacts:</p>
-<ul>
-    <li>PIE.htc - The fully compressed behavior file; this is the version which should be deployed in production
-    environments.</li>
-    <li>PIE_uncompressed.htc - An uncompressed version of the behavior; this is useful for debugging purposes but is
-    very large so it should not be deployed in production environments.</li>
-    <li>PIE.js - The compressed version of the alternate <a href="/documentation/pie-js/">JavaScript edition</a> of
-    PIE. PIE.htc is the recommended file for most users.</li>
-    <li>PIE_uncompressed.js - The uncompressed version of the JavaScript edition.</li>
-</ul>
-<!-- noformat off -->
-</body>
-</html>

data/templates/project/sources/pie/documentation/getting-started.html DELETED Viewed

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
-  <title>PIE Documentation: Getting Started</title>
-</head>
-<body>
-<h1>Getting Started</h1>
-<!-- noformat on -->
-<p>The following instructions should get you up and running with PIE in most circumstances. If you run into
-problems along the way, consult our <a href="/documentation/known-issues/">known issues</a> page, or ask
-for help in the <a href="http://css3pie.com/forum">forums</a>.</p>
-<h2>Step 1: Download it</h2>
-<p><a href="/download-latest">Download the PIE distribution</a> and unzip it somewhere.</p>
-<h2>Step 2: Upload it</h2>
-<p>Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE,
-and is what does all the magic. Upload this file to the server where you're going to serve pages using
-CSS3. It doesn't matter where exactly, as long as you know where it is.</p>
-<h2>Step 3: Write some CSS3</h2>
-<p>Assuming you already have a HTML document, let's say you want to give one of its elements rounded corners.
-Create a CSS rule for that element and give it a border-radius style like so:</p>
-<pre><code>#myAwesomeElement {
-    border: 1px solid #999;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-}</code></pre>
-<p>(Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in
-WebKit and Mozilla-based browsers.)</p>
-<h2>Step 4: Apply PIE</h2>
-<p>In that same CSS rule, add the following style line:</p>
-<pre><code>behavior: url(path/to/PIE.htc);</code></pre>
-<p>Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. <em>Note: this
-path is relative to the HTML file being viewed, not the CSS file it is called from.</em></p>
-<h2>Step 5: View it in IE</h2>
-<p>If all went well, at this point you should be able to load the page in IE and see the CSS3 rounded corners
-rendered just like other browsers. Now you can play around with some of the other supported CSS3 decorations
-like box-shadow. See the documentation on <a href="/documentation/supported-css3-features/">supported CSS3
-features</a> to see exactly what PIE can do. Have fun!</p>
-<!-- noformat off -->
-</body>
-</html>

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

@@ -1,205 +0,0 @@
-<!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 DELETED Viewed

@@ -1,89 +0,0 @@
-<!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 DELETED Viewed

@@ -1,89 +0,0 @@
-<!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>