Skip to content
Browse files

Site documentation updates to get up to date with beta5 release

  • Loading branch information...
1 parent 5424e71 commit 67094dbfe93f6d656103f8b0a16cf990e00f3343 Jason Johnston committed
View
4 documentation/about.html
@@ -39,7 +39,7 @@
<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 @@
<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
60 documentation/demos.html
@@ -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>
View
13 documentation/known-issues.html
@@ -17,7 +17,8 @@
<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 -->
View
11 documentation/product-comparison.html
@@ -25,6 +25,7 @@
<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
37 documentation/q-and-a.html
@@ -26,7 +26,7 @@
<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>
@@ -34,16 +34,20 @@
<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 @@
<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>
View
106 documentation/supported-css3-features.html
@@ -38,7 +38,8 @@
<h2 id="border-radius">border-radius</h2>
<p>PIE fully supports the border-radius property as defined in the CSS3
-Backgrounds and Borders module specification.</p>
+Backgrounds and Borders module specification for IE 6-8. IE 9 and up support
+border-radius natively.</p>
<pre class="long">border-radius: [ &lt;length&gt; | &lt;percentage&gt; ]{1,4} [ / [ &lt;length&gt; | &lt;percentage&gt; ]{1,4} ]?</pre>
@@ -54,33 +55,14 @@ <h2 id="border-radius">border-radius</h2>
<p>Both the standard border-radius property name as well as a custom
prefixed -pie-border-radius property name are recognized; if both are
present then the prefixed value will take precedence. It is recommended
-to only use the standard unprefixed property when possible (in
-addition, of course, to -moz- and -webkit- prefixed properties as
-necessary), since the CSS3 spec for this property seems fairly
-solidified, and because there are no known incompatibilities between
-PIE's implementation and the standard.</p>
-
-<p>Notes on other browsers:</p>
-
-<p>Elliptical radii (the optional set of values after the slash) are
-only supported in Firefox versions 3.5 and up. As of the current
-release (3.6), percentage values for vertical radii are incorrectly
-calculated relative to the width of the box whereas the CSS3 spec says
-they should be relative to the height. PIE handles this correctly.</p>
-
-<p>WebKit deviates significantly from the CSS3 spec: the shorthand
-property cannot be used to specify different radii per corner, so you
-must use the separate longhand properties if you want to do that. It
-also does not support percentage values at all. (TODO: check this in
-WebKit nightlies and recent Chrome, I think these may now match the
-spec and drop the prefix.)</p>
-
+to only use the standard unprefixed property when possible.</p>
<h2 id="box-shadow">box-shadow</h2>
<p>PIE supports the <a href="http://dev.w3.org/csswg/css3-background/#box-shadow">box-shadow property syntax</a>
-as currently defined in the CSS3 Backgrounds &amp; Borders module.</p>
+as defined in the CSS3 Backgrounds &amp; Borders module, for IE 6-8. IE 9 and up support
+box-shadow natively so PIE does nothing.</p>
<pre class="long">box-shadow: none | &lt;shadow&gt; [,&lt;shadow&gt;]*
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>
@@ -88,18 +70,16 @@ <h2 id="box-shadow">box-shadow</h2>
<p>Both the standard box-shadow property name as well as a custom
prefixed -pie-box-shadow property name are recognized; if both are
present the prefixed value will take precedence. It is recommended to
-use the non-prefixed property when possible, since there are no known
-incompatibilities between PIE's implementation and others which use the
-non-prefixed property, such as Opera.</p>
+use the non-prefixed property when possible.</p>
<p>When used in conjunction with border-radius, the shape of the shadow
matches the shape of the rounded border box.</p>
-<p>When using the blur radius parameter, the strength and size of the
-blur as rendered by PIE should match that of other browsers almost
-identically, however you may notice some slight differences due to
-rounding, particularly when the blur is very small (this should not be
-more than a one-pixel difference).</p>
+<p>The shadow shape rendered by PIE is, unlike other browsers,
+<a href="https://github.com/lojjic/PIE/issues/12">opaque in the area behind the element's background</a>.
+This means that if your element has a transparent or semi-transparent background, the opaque shadow will
+show through. To avoid this you must either give the element a non-transparent background, or remove the
+box-shadow.</p>
<p>PIE does not currently support the 'inset' keyword, but support is
planned in a future version (see <a href="http://github.com/lojjic/PIE/issues#issue/3">issue #3</a>.</p>
@@ -113,35 +93,24 @@ <h2 id="box-shadow">box-shadow</h2>
<h2 id="border-image">border-image</h2>
-<p>PIE has preliminary support for the border-image property. This property allows
+<p>PIE adds support for the border-image property to IE 6-9. This property allows
you to specify an image which gets divided into nine squares which are then drawn as
-the corners, sides, and center of the target element. The sides and center will stretch
-to match the size of the element.</p>
+the corners, sides, and center of the target element.</p>
-<p>There are currently several limitations of PIE's implementation, including:</p>
+<p>There are currently a few limitations of PIE's implementation, including:</p>
<ol>
- <li>It only supports the 'stretch' scheme. I'd like to support the others in the future but performance
- is a big concern as it seems it will require creating a separate VML shape for each tile.</li>
+ <li>It only supports the 'stretch' scheme in IE 6-8. (The other schemes ('repeat' and 'round') are
+ fully supported in IE 9.)</li>
<li>It doesn't support the <a href="http://dev.w3.org/csswg/css3-background/#border-image-outset">outset parameter</a>
described in the Backgrounds &amp; Borders module spec, though other browsers don't seem to support
that yet either.</li>
- <li>It doesn't support the <a href="http://dev.w3.org/csswg/css3-background/#border-image-width">width override
- parameter</a> to the border-image shorthand; it will only use the element's border-width for determining
- the slice widths (again, support for this in other browsers is spotty too).</li>
- <li>Related to #3, if the element's <code>border-style</code> is 'none' it will treat that as
- <code>border-width:0</code>.</li>
<li>It requires the 'fill' keyword to be present for the center area to be filled in. This is correct
behavior according to the spec but other browsers don't require it and some even fail if 'fill' is
present, so it's a bit tricky making it work consistently across browsers.</li>
- <li>It doesn't hide the element's normal border when border-image is specified. In conjunction with #4
- above, this means you have to set the border-style to 'solid' (or something other than 'none')
- <strong>and</strong> set the border-color to transparent.</li>
<li>It seems there are on rare occasion rounding errors which cause 1px gaps between slices of the
image. I've seen these gaps occur in other browsers too, though.</li>
</ol>
-<p>These issues will be addressed in a future release.</p>
-
<h2 id="pie-background">CSS3 Backgrounds (-pie-background)</h2>
@@ -155,6 +124,10 @@ <h2 id="pie-background">CSS3 Backgrounds (-pie-background)</h2>
Therefore we use a custom -pie-background property for holding these
values.</p>
+<p>(Note that IE9 and up support multiple background images natively, so PIE only
+takes over in IE 6-8. It also takes over in IE 9 when there is a gradient present in the
+-pie-background -- see the section on <a href="#gradients">gradients</a> below.)</p>
+
<p>Only the single -pie-background shorthand value is recognized; longhand values (e.g.
-pie-background-origin) are ignored.</p>
@@ -173,7 +146,7 @@ <h2 id="pie-background">CSS3 Backgrounds (-pie-background)</h2>
}</code></pre>
<p>While the PIE parser will allow them, the following aspects of the
-background shorthand will currently be ignored when rendering:</p>
+background shorthand will currently be ignored when rendering in IE 6-8:</p>
<ul>
<li>background-attachment (will always use 'scroll' even if 'fixed'
@@ -193,32 +166,40 @@ <h2 id="pie-background">CSS3 Backgrounds (-pie-background)</h2>
<p>Notes on other browsers:</p>
-<p>Firefox supports multiple backgrounds as of version 3.6. Safari supports them as of version 1.3.
-See <a href="https://developer.mozilla.org/en/CSS/Multiple_backgrounds">https://developer.mozilla.org/en/CSS/Multiple_backgrounds</a></p>
+<p>See <a href="https://developer.mozilla.org/en/CSS/Multiple_backgrounds">https://developer.mozilla.org/en/CSS/Multiple_backgrounds</a></p>
<h2 id="gradients">Gradients</h2>
<p>PIE currently supports <code>linear-gradient</code> image values when used in the
--pie-background property. Uses in any contexts other than the background
+-pie-background property, for IE 6-9. Uses of linear-gradient in any contexts other than the -pie-background
are not supported. The supported syntax matches that of the current
<a href="http://dev.w3.org/csswg/css3-images/#linear-gradients">CSS3 Image Values module</a> draft.</p>
<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>
-<p>Currently all color stops are rendered fully opaque, even if
-specifying an rgba color value. This is due to a limitation in VML's
-linear gradient syntax which does not allow setting opacity for
-individual color stops. (See <a href="http://github.com/lojjic/PIE/issues#issue/7">issue #7</a>)</p>
+<p>PIE's linear-gradient support in IE 6-8 has a few limitations (all of these work
+properly in IE 9):</p>
-<p>Gradients containing color-stops which lie outside the bounding area
-of the element are not currently supported, due to limitations in VML's
-gradient rendering.</p>
+<ul>
+ <li>Currently all color stops are rendered fully opaque, even if
+ specifying an rgba color value. This is due to a limitation in VML's
+ linear gradient syntax which does not allow setting opacity for
+ individual color stops. (See <a href="http://github.com/lojjic/PIE/issues#issue/7">issue #7</a>)</li>
+
+ <li>Gradients containing color-stops which lie outside the bounding area
+ of the element are not currently supported, due to limitations in VML's
+ gradient rendering.</li>
+
+ <li>The background-size/origin/repeat/position parameters are not supported
+ for gradients, so you cannot do things like
+ <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">gradient pattern effects</a>.</li>
+</ul>
<p>Radial gradients are not supported at this time; this feature is planned
for a future release (see <a href="http://github.com/lojjic/PIE/issues#issue/2">issue #2</a>)
-but it may turn out to be impossible to implement due to VML's strange radial gradient behavior.</p>
+but it may turn out to be impossible to implement in IE 6-8 due to VML's strange radial gradient behavior.</p>
<p>Notes on other browsers:</p>
@@ -258,8 +239,9 @@ <h2 id="rgba">RGBA Color Values</h2>
the opacity will be rendered correctly:</p>
<ul>
- <li>The solid background-color as specified in the -pie-background property.</li>
- <li>The color value of box-shadow, if the shadow has no blur.</li>
+ <li>The solid background-color as specified in the -pie-background property.</li>
+ <li>The color value of box-shadow, if the shadow has no blur.</li>
+ <li>Color stops in linear-gradient, for IE 9 only (will be rendered fully opaque in IE 6-8)</li>
</ul>
@@ -408,7 +390,7 @@ <h3 id="pie-poll">Layout Polling (-pie-poll)</h3>
When polling is enabled for an element, PIE will manually query that element's layout several times a second, and
if the layout has changed then it will adjust the rendering.</p>
-<p>Polling is enabled by default for all elements in IE8 (as that version is particularly bad about not firing
+<p>Polling is enabled by default for all elements in IE 8 and 9 (as those version is particularly bad about not firing
the events) and disabled in IE 6 and 7. Users can override these defaults
to force polling on or off for individual elements by setting a custom CSS property: just specify
<code>-pie-poll:true;</code> to force polling on for an element, or <code>-pie-poll:false;</code> to disable it.</p>
View
2 site/pie-wp-theme/header/header-default.php
@@ -79,7 +79,7 @@
<![if lt IE 8]><nav id="mainNav"><![endif]>
<?php wp_nav_menu( array('menu' => 'Main Menu', 'container' => null )); ?>
- <p><a class="outbound" href="/download-latest"><strong>Download</strong> <span class="version">Version 1.0beta2</span></a></p>
+ <p><a class="outbound" href="/download-latest"><strong>Download</strong> <span class="version">Version 1.0beta5</span></a></p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">

0 comments on commit 67094db

Please sign in to comment.
Something went wrong with that request. Please try again.