Permalink
Browse files

Site documentation updates to get up to date with beta5 release

  • Loading branch information...
Jason Johnston
Jason Johnston committed Sep 8, 2011
1 parent 5424e71 commit 67094dbfe93f6d656103f8b0a16cf990e00f3343
View
@@ -39,7 +39,7 @@ <h1>About PIE</h1>
<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>
+<p>PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:</p>
<ul>
<li>border-radius</li>
@@ -49,6 +49,8 @@ <h1>About PIE</h1>
<li>linear-gradient as background image</li>
</ul>
+<p>In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.</p>
+
<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>
View
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>PIE Demos and Example Sites</title>
+
+</head>
+<body>
+
+<h1>Demos and Example Sites</h1>
+
+
+
+<h2>Demos</h2>
+
+<p>Here you can find demonstrations of common user interface elements, styled using pure CSS3. And of course they all work perfectly in IE thanks to PIE!</p>
+
+<p>We're currently working on getting more demos together. If you have ideas for demos you'd like to see, or want to contribute one yourself, please <a href="/contact/">let us know</a>.</p>
+
+[subpages]
+
+<h2>Example Sites</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://www.bitcloud.com.au/">BitCloud</a></li>
+ <li><a href="http://www.cahealthadvocates.org/">California Health Advocates</a></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.cthealth.org/">Connecticut Health Foundation</a></li>
+ <li><a href="http://setup.dynguide.com/">DynDNS</a></li>
+ <li><a href="http://www.journeyoutreach.org/">Journey Outreach</a></li>
+ <li><a href="http://www.kleinezeitung.at/">Kleine Zeitung</a></li>
+ <li><a href="http://sites.mckesson.com/betterhealth/">McKesson: For Better Health</a></li>
+ <li><a href="http://www.memyteam.com/">me:myteam</a></li>
+ <li><a href="http://modemerr.com/">Mode Merr</a></li>
+ <li><a href="http://mom.com/">Mom.com</a></li>
+ <li><a href="http://www.blogsouthwest.com/">Nuts About Southwest</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://roomandboard.com/">Room &amp; Board</a></li>
+ <li><a href="http://www.rudisglutenfree.com/">Rudi's Gluten-Free Bakery</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://www.socialistproductions.org/">Socialist Productions</a></li>
+ <li><a href="http://freestyle-developments.co.uk/demo/public/svs/">SVS Securities</a></li>
+ <li><a href="http://www.thenorthface.com/">The North Face</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>
+</ul>
+
+
+
+</body>
+</html>
@@ -17,7 +17,8 @@ <h1>Known Issues</h1>
<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>
+our <a href="http://github.com/lojjic/PIE/issues">issue tracking system</a> where bug reports
+and feature requests are tracked.</p>
<ul>
<li><a href="#z-index">Problems with z-index (disappearing backgrounds/borders/shadows)</a></li>
@@ -121,7 +122,8 @@ <h2 id="hasLayout">Problems with hasLayout</h2>
<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>
+<a href="http://www.satzansatz.de/cssd/onhavinglayout.html#rev">unwanted consequences</a> such as disappearing
+top margins.</p>
@@ -171,6 +173,10 @@ <h2 id="content-type">Serving the correct Content-Type</h2>
<pre><code>behavior: url(PIE.php);</code></pre>
+<p>Note that this issue is particularly a problem in IE 9, which seems more strict about the content-type
+than some other IE versions.</p>
+
+
<h2 id="x-domain">Same-domain limitation</h2>
@@ -195,7 +201,8 @@ <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>
+if your background images are dependent on sizing (e.g. sprite images). This will be fixed in an upcoming
+release; see <a href="https://github.com/lojjic/PIE/issues/79">issue 79</a>.</p>
<!-- noformat off -->
@@ -25,6 +25,7 @@ <h1>Comparing PIE to Other CSS3 Products</h1>
<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>
+ <li><a href="#cssSandpaper">cssSandpaper</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>
@@ -81,6 +82,16 @@ <h2 id="ie-css3-htc">Nick Fetchak's <a href="http://www.fetchak.com/ie-css3/">ie
<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>
+<h2 id="cssSandpaper">Zoltan Hawryluk's <a href="http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/">cssSandpaper</a></h2>
+
+<p>If you want to use CSS3 2D transforms (rotate, scale, etc.) in IE 6-8 then cssSandpaper is an excellent choice. It handles translating transform commands to their corresponding IE filter commands, as well as handling other necessary adjustments such as position offsets and working around text antialiasing issues.</p>
+
+<p>It also has an extension which adds amazingly accurate support for text-shadow.</p>
+
+<p>PIE currently lacks support for both 2D transforms and text-shadow; they are planned for a future release but for now I do recomment cssSandpaper.</p>
+
+<p>Unfortunately due to the special way PIE renders the features it supports, you cannot use cssSandpaper's 2D transform support in conjunction with PIE, or it will transform the element's foreground but leave its background in place. Once PIE adds its own 2D transform support this will work as expected.</p>
+
<!-- noformat off -->
View
@@ -26,24 +26,28 @@ <h2>How does it work?</h2>
<h2>What CSS3 properties are currently supported?</h2>
-<p>PIE currently has full or partial support for:</p>
+<p>PIE currently adds full or partial support in IE 6-8 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>In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.</p>
+
<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>The .htc behavior file is 40K. With gzip compression, it is 16K. (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>
+<p>Improvements to file size, by making features optional, are planned in a future release.</p>
<h2>What are the goals of the project?</h2>
@@ -107,34 +111,7 @@ <h3>Be as performant as possible</h3>
<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://www.bitcloud.com.au/">BitCloud</a></li>
- <li><a href="http://www.cahealthadvocates.org/">California Health Advocates</a></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.cthealth.org/">Connecticut Health Foundation</a></li>
- <li><a href="http://setup.dynguide.com/">DynDNS</a></li>
- <li><a href="http://www.journeyoutreach.org/">Journey Outreach</a></li>
- <li><a href="http://www.kleinezeitung.at/">Kleine Zeitung</a></li>
- <li><a href="http://sites.mckesson.com/betterhealth/">McKesson: For Better Health</a></li>
- <li><a href="http://www.memyteam.com/">me:myteam</a></li>
- <li><a href="http://modemerr.com/">Mode Merr</a></li>
- <li><a href="http://mom.com/">Mom.com</a></li>
- <li><a href="http://www.blogsouthwest.com/">Nuts About Southwest</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://roomandboard.com/">Room &amp; Board</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://www.socialistproductions.org/">Socialist Productions</a></li>
- <li><a href="http://freestyle-developments.co.uk/demo/public/svs/">SVS Securities</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>
-</ul>
+<p>See our <a href="/demos">Demos and Example Sites</a> page for a list of some live public sites using PIE.</p>
<h2>What are the licensing terms?</h2>
Oops, something went wrong.

0 comments on commit 67094db

Please sign in to comment.