<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	>

<channel>
	<title>CSS, JavaScript and XHTML Explained</title>
	<atom:link href="http://www.evotech.net/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.evotech.net/blog</link>
	<description>Estelle Weyl's Blog of quirks, random thoughts and funky finds discovered in day-to-day coding</description>
	<pubDate>Wed, 10 Mar 2010 06:08:40 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<item>
		<title>View Source has a Posse: SXSW</title>
		<link>http://www.evotech.net/blog/2010/03/view-source-has-a-posse-sxsw/</link>
		<comments>http://www.evotech.net/blog/2010/03/view-source-has-a-posse-sxsw/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 06:08:40 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[SXSW]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=93</guid>
		<description><![CDATA[If you are going to be in Austin for SXSW this weekend, make sure to come to our panel discussion: View Source Has a Posse.
The &#8220;view source&#8221; functionality of browsers is near and dear to my heart, as it&#8217;s how I learned to code, it&#8217;s how I judge who to hire, and it&#8217;s how I [...]]]></description>
			<content:encoded><![CDATA[<p>If you are going to be in Austin for SXSW this weekend, make sure to come to our panel discussion: View Source Has a Posse.</p>
<p>The &#8220;view source&#8221; functionality of browsers is near and dear to my heart, as it&#8217;s how I learned to code, it&#8217;s how I judge who to hire, and it&#8217;s how I help trouble shoot bugs and quirks when developers ask me for help.</p>
<p>Here&#8217;s the summary from the the interwebs:</p>
<p><strong>View Source Has a Posse</strong> - <a href="http://my.sxsw.com/events/event/5005">http://my.sxsw.com/events/event/5005</a></p>
<p>“View source” is a feature of all modern browsers that few people  use, and that more probably wouldn’t miss if it disappeared. Still,  viewing other people’s source code has played an undeniable role in the  Web’s development, spurring a culture of creativity and sharing, and  cementing values of openness and transparency in developer practices.</p>
<p>However, as the Web becomes increasingly dedicated to social  interaction and applications rather than static documents, the value of  viewing machine-generated source code raises a critical question: will  view source be relevant to the next generation of Web apps? And what  might be lost if new Web applications refuse to include its  functionality?</p>
<p>Panelists include  Aza Raskin from <strong>Mozilla</strong>, Chris Wilson from <strong>Microsoft</strong>, Michael Lucaccini of Archetype, and Alex Russell of <strong>Dojo</strong> &amp; <strong>Google, </strong> and<strong> ME!</strong>.<br />
Questions addressed will include:</p>
<ol>
<li>what is View Source?</li>
<li>how have web developers and designers use View Source?</li>
<li>what were the original intentions of the feature?</li>
<li>how has view source functionality changed with things like Firebug and Web Inspector?</li>
<li>what alternatives exist to support iterative hacking on other people&#8217;s code?</li>
<li> how might tools and communities like GitHub augment or replace View Source?</li>
<li>how important is view source to learning to program complex web applications?</li>
<li> UserStyles, UserScripts, JetPacks and similar end-user web customizations - will these kinds of innovations be stifled if View Source goes away?</li>
<li>how can view source functionality be added to other &#8220;non-web&#8221; software? How would it be different than open source software?</li>
<li>is there a larger point to be made about the relevance of open source in the social/cloud era of computing?</li>
</ol>
<p>The panel is 3:30 on Saturday in room 12AB. I hope to see you there. Please do say &#8216;hi&#8217;.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2010/03/view-source-has-a-posse-sxsw/feed/</wfw:commentRss>
		</item>
		<item>
		<title>CSS3 Border Properties, etc.</title>
		<link>http://www.evotech.net/blog/2010/03/css3-border-properties-etc/</link>
		<comments>http://www.evotech.net/blog/2010/03/css3-border-properties-etc/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 10:38:59 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[CSS (including hacks)]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=92</guid>
		<description><![CDATA[At this blog you&#8217;ll find my summary article on all the CSS3 properties, values and browser support. CSS3 has many different components, and I am digging into each category. I just posted	 CSS3 Border Properties &#038; Browser Support tonight, and CSS Background Properties: possible values, default values, browser support and DOM last week&#8230;. but at [...]]]></description>
			<content:encoded><![CDATA[<p>At this blog you&#8217;ll find my summary article on all the CSS3 properties, values and browser support. CSS3 has many different components, and I am digging into each category. I just posted	 <a href="http://www.standardista.com/css3/css3-border-properties" title="CSS3 Border Properties &#038; Browser Support">CSS3 Border Properties &#038; Browser Support</a> tonight, and <a href="http://www.standardista.com/css3/css3-background-properties" title="CSS Background Properties: possible values, default values, browser support and DOM">CSS Background Properties: possible values, default values, browser support and DOM</a> last week&#8230;. but at <a href="http://www.standardista.com">my new blog</a>.  </p>
<p>I will continue to maintain this blog, but <a href="http://www.standardista.com">Standardista.com</a> will hopefully be better organized, and less of an eyesore.</p>
<p>Here are some of the CSS3 articles you&#8217;ll find in my new online home:</p>
<p>	<article class="post" id="post-191"></p>
<h2><a href="http://www.standardista.com/css3/css3-border-properties" title="CSS3 Border Properties &#038; Browser Support">CSS3 Border Properties &#038; Browser Support</a></h2>
<div class="entry">
<p>Border radius, border image and box-shadow are now supported in Firefox, Safari, Opera and Chrome. Take a look at all the border properties of CSS3 and how all the browsers handle all the values. Everything you could ever want to know about CSS3 border properties, values and browser support, in grid format. <a href="http://www.standardista.com/css3/css3-border-properties">CSS3 Border Properties &raquo;</a></p>
</p></div>
<p>		</article></p>
<p>		<article class="post" id="post-107"></p>
<h2><a href="http://www.standardista.com/css3/css3-background-properties" title="CSS Background Properties: possible values, default values, browser support and DOM">CSS Background Properties: possible values, default values, browser support and DOM</a></h2>
<div class="entry">
<p>There are 8 attributes controlling background images, including those added in CSS3. This blog post goes over all the CSS2.1 and CSS3  background properties, values and browser support,  how to target those properties via the DOM, with information on bugs you may find when implementing background properties</p>
</p></div>
<p>		</article></p>
<p>		<article class="post" id="post-38"></p>
<h2><a href="http://www.standardista.com/css3/css3-columns-browser-support" title="CSS3 Columns &#038; Browser Support">CSS3 Columns &#038; Browser Support</a></h2>
<div class="entry">
<p>Developers have been dividing their code, creating 3 &lt;ul&gt;s and floating each left, followed by a clear, to better use screen real estate.  CSS3 solves this issue with the &#8216;Multi-column Layout Module&#8217;. We can now  maximize the use of a large screen real-estate, by including limited-width columns of text placed side by side. Well, at least we can in non-IE browsers. Here is a grid of the CSS3 Multi-column Layout Module, all the properties, values and current browser support. </p>
</p></div>
<p>		</article></p>
<p>		<article class="post" id="post-29"></p>
<h2><a href="http://www.standardista.com/css3/font-face-browser-support-browser-support" title="@font-face browser support &#038; browser support">@font-face browser support &#038; browser support</a></h2>
<div class="entry">
<p>Up to now, web developers were limited in what typography they could use on a website to what the client had installed in their environments. Now that we have finally convinced designers to not include any fonts outside of georgia, helvetica, arial, times roman, and a handful of others because of the awfulness of text images, @font-face allows us to retrain designers to use unique fonts, only if they have the legal right to post those fonts on the web. This article explains how to do it, and what features are supported in the various browsers.</p>
</p></div>
<p></article><br />
		<article class="post" id="post-10"></p>
<h2><a href="http://www.standardista.com/css3/css3-selector-browser-support" title="CSS3 Selectors &#038; Browser Support">CSS3 Selectors &#038; Browser Support</a></h2>
<div class="entry">
<p>A list of all of the CSS3 Selectors (which includes all the CSS1 and CSS2.1 selectors), with a grid of every modern browser, and the support for each browser of each selector. Included at the bottom is a commentary on each browser and their quirks in handling a selector, if there are any.</p>
</div>
<p></article></p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2010/03/css3-border-properties-etc/feed/</wfw:commentRss>
		</item>
		<item>
		<title>CSS3 Properties, Values &#038; Browser Support</title>
		<link>http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/</link>
		<comments>http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/#comments</comments>
		<pubDate>Thu, 11 Feb 2010 06:47:13 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[CSS (including hacks)]]></category>

		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=91</guid>
		<description><![CDATA[CSS Properties Index
Below is every most CSS3  Properties, all the possible values for that property, and the support for each property value from grade-A browsers
This grid does not include animation, tranforms, grids, columns, layouts or templates. I have a separate post for CSS3 Background Properties and CSS3 border properties. Those are all coming soon. [...]]]></description>
			<content:encoded><![CDATA[<h2>CSS Properties Index</h2>
<h3>Below is every most CSS3  Properties, all the possible values for that property, and the support for each property value from grade-A browsers</h3>
<p>This grid does not include animation, tranforms, grids, <a href="http://www.standardista.com/css3/css3-columns-browser-support" title="CSS3 Column properties, values and browser support">columns</a>, layouts or templates. I have a separate post for <a href="http://www.standardista.com/css3/css3-background-properties">CSS3 Background Properties</a> and <a href="http://www.standardista.com/css3/css3-border-properties">CSS3 border properties</a>. Those are all coming soon. Sorry for the slow download, but this table is over 8000 lines worth of HTML.  I am breaking this out into smaller, related sections.  I&#8217;ll be posting those at my <a href="http://standardista.com">new site</a>. And, yes, I know this table breaks the layout of the page. This whole blog theme is ugly, but some of the content hopefully makes this eyesore worth it <img src='http://www.evotech.net/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  The new site should be ready soon: and way prettier! </p>
<table class="cssproperty">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col"><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a></th>
<th scope="col">Default Value</th>
<th scope="col">ie6</th>
<th scope="col">ie7</th>
<th scope="col">ie7comp</th>
<th scope="col">ie8</th>
<th scope="col">FF3</th>
<th scope="col">Saf</th>
<th scope="col">OP</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Property</th>
<th scope="col"><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a></th>
<th scope="col">Default Value</th>
<th scope="col">ie6</th>
<th scope="col">ie7</th>
<th scope="col">ie7comp</th>
<th scope="col">ie8</th>
<th scope="col">FF3</th>
<th scope="col">Saf</th>
<th scope="col">OP</th>
<th scope="col">&nbsp;</th>
</tr>
</tfoot>
<tbody style="height:800px; _height:auto">
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-azimuth"><code>azimuth</code></a></th>
<td>Audio</td>
<td><code>center</code></td>
<td colspan="7" rowspan="5" class="aural">aural</td>
<td rowspan="5">&nbsp;</td>
</tr>
<tr>
<th class="value">angle (270deg)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th colspan="3" class="value">left-side | far-left | left | center-left | center | center-right | right | far-right | right-side </th>
</tr>
<tr>
<th colspan="3" class="value">behind | leftwards | rightwards</th>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background"><code>background</code></a></th>
<td>CSS2.1/<a href="http://www.w3.org/TR/css3-background/#background">CSS3</a></td>
<td rowspan="6">
<pre>body {
    background-color: transparent;
    background-position: 0% 0%;
    background-size: auto auto;
    background-repeat: repeat repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none; }
                        </pre>
</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>see individual background properties below</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#background"><code>background</code></a></th>
<td>CSS3</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment"><code>background-attachment</code></a></th>
<td>CSS2.1</td>
<td class="iffy" title="only supported on the body element">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">scroll</th>
<td>default</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">fixed</th>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">local</th>
<td>not in spec</td>
<td>&nbsp;</td>
<td>&Delta;</td>
<td>&Delta;</td>
<td>&Delta;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-break"><code>background-break</code></a></th>
<td>not in spec</td>
<td>NO LONGER IN <a href="http://www.w3.org/TR/css3-background/">CSS3 Spec</a></td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#the-background-clip"><code>background-clip</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-background-clip">moz</a>-</td>
<td class="almostgood">-webkit</td>
<td class="almostgood">&nbsp;</td>
<td rowspan="4">Webkit uses both -webkit-border and -webkit-border-box. syntax may change.</td>
</tr>
<tr>
<th  class="value">border-box</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">border</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
</tr>
<tr>
<th  class="value">padding-box</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">
                            padding</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
</tr>
<tr>
<th class="value" ><em>content-box</em></th>
<td>not in spec</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">
                            content</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color"><code>background-color</code></a></th>
<td>CSS2.1/<a href="http://www.w3.org/TR/css3-background/#the-background-color">CSS3</a></td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgb()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&Delta;</td>
<td class="almostgood">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">#FFFFFF</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">colorName</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood" title="avoid silver">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">transparent</th>
<td>default</td>
<td>&nbsp;</td>
<td class="iffy" title="has trouble with transparent (shows black) on dymanic content">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgba()</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad" colspan="4" title="can use IE proprietar filter to create rgba effect. Declare supported color type first then rgba for backwards compatibilty, as IE will ignore the rgba declaration">filter</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image"><code>background-image</code></a></th>
<td>CSS2.1</td>
<td><code>not inherited</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url, url</th>
<td><a href="http://www.w3.org/TR/css3-background/#the-border-image-source">CSS3</a></td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#background-origin"><code>background-origin</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-background-origin">moz</a>-</td>
<td class="almostgood">-webkit</td>
<td class="bad">&nbsp;</td>
<td rowspan="4">mozilla and webkit ahve support, but use differnt value terms                          </td>
</tr>
<tr>
<th  class="value">border-box</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">border</td>
<td class="almostgood">border</td>
<td class="bad">&nbsp;</td>
</tr>
<tr>
<th  class="value">padding-box</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="almostgood">padding</td>
<td class="almostgood">padding</td>
<td class="good">&nbsp;</td>
</tr>
<tr>
<th  class="value">content-box</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">content</td>
<td class="almostgood">content</td>
<td class="bad">&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position"><code>background-position</code></a></th>
<td>CSS2.1</td>
<td><code>0% 0%</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">left | top | right | bottom | center</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">px</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">%</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">background-position-x</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">backgroun-position-y</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat"><code>background-repeat</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">repeat</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">no-repeat</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">repeat-x / repeat-y</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th height="39" class="property"><a href="http://www.w3.org/TR/css3-background/#background-size"><code>background-size</code></a></th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-background-origin">moz</a>- 3.6</td>
<td class="almostgood">-webkit<br />
				      3</td>
<td class="iffy">-o-9.5</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto - actual size of image</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">cover - scale to cover entire box</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">contain - scale to fit inside box</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value"><em>widthLength heightLength</em></th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#block-progression"><code>block-progression</code></a></th>
<td>CSS3</td>
<td>inherited</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">tb</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lr</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rl</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">
<p><a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border</code></a> </p>
<p><a href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom"><code>border-bottom</code></a> | <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-left</code></a> | <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-right</code></a> | <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-top</code></a></p>
</th>
<td>CSS2.1</td>
<td><code>medium  none (current color)</code></td>
<td class="iffy" title="gets it wrong in terms of box model and on col">&Delta;</td>
<td class="iffy" title="gets it wrong in terms of box model and on col">&Delta;</td>
<td class="iffy" title="gets it wrong in terms of box model and on col">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td><code>border-width || border-style || border-color</code></td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-color</code></a></p>
<p><a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-bottom-color</code></a> | <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-left-color</code></a> | <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-right-color</code></a> | <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-top-color</code></a></p>
</th>
<td>CSS2.1</td>
<td><code>(current color)</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgb()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">#CCCCCC</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">colorName</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood" title="avoid the color silver">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">transparent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="iffy" title="acts weird (not always initially transparent) and box model issues">&Delta;</td>
<td class="iffy" title="acts weird (not always initially transparent) and box model issues">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgba()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&radic;</td>
<td class="bad">&radic;</td>
<td class="bad">&radic;</td>
<td class="bad">&radic;</td>
<td class="iffy" title="doesn't render transparency, but at least renders the border">&Delta;</td>
<td class="iffy" title="doesn't render transparency, but at least renders the border">&Delta;</td>
<td class="bad">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-style</code></a></p>
<p>
                        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-bottom-style</code></a><br />
                        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-left-style</code></a> <br />
                        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-right-style</code></a> | <br />
                        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-top-style</code></a></p>
</th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">dashed</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">dotted</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">double</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">groove</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="the corners don't meet at 90% like they should">&Delta;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hidden</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inset</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="the corners don't meet at 90% like they should">&Delta;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">outset</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="colors are off on bottom/right">&Delta;</td>
<td class="iffy" title="colors are off on bottom/right">&Delta;</td>
<td class="iffy" title="colors are off on bottom/right">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="the corners don't meet at 90% like they should">&Delta;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">ridge</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="the corners don't meet at 90% like they should">&Delta;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">solid</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property">
<p><a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-width</code></a></p>
<p><a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-bottom-width</code></a><br /> <br />
				        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-left-width</code></a><br />
				        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-right-width</code></a><br />
				        <a href="http://www.w3.org/TR/CSS21/box.html#border-properties"><code>border-top-width</code></a></p>
</th>
<td>CSS2.1</td>
<td><code>medium</code></td>
<td class="iffy" title="gets it wrong in terms of box model">&Delta;</td>
<td class="iffy" title="gets it wrong in terms of box model in quirks mode">&Delta;</td>
<td class="iffy" title="gets it wrong in terms of box model in quirks mode">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">thin</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">medium</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">thick</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="">!!!!!<code>border-break</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">border-width</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">border-style</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">color</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">close</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse"><code>border-collapse</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="iffy" title="Overwritten by cellspacing if present">&Delta;</td>
<td class="iffy" title="Overwritten by cellspacing if present">&Delta;</td>
<td class="iffy" title="Overwritten by cellspacing if present">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td><code> 'table' and 'inline-table' elements</code></td>
</tr>
<tr>
<th class="value">collapse</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">separate</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#the-border-image"><code>border-image</code></a></th>
<td>CSS3</td>
<td>shorthand</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-border-image">moz</a>-</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">image</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">3.5</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#border-image-outset"><code>border-image-outset</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>-<a href="https://developer.mozilla.org/en/CSS/-moz-border-image">moz</a>-</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">length {1,4}</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#border-image-repeat"><code>border-image-repeat</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-border-image">moz</a>-</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">stretch</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">repeat</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">round</th>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">space</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#border-image-slice"><code>border-image-slice</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>-<a href="https://developer.mozilla.org/en/CSS/-moz-border-image">moz</a>-</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">length{1,4}</th>
<td>default=100%</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">fill</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#the-border-image-source"><code>border-image-source</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-border-image">moz</a>-</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">url()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#border-image-widht"><code>border-image-width</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-border-image">moz</a>-</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">length ({1,4}</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property" title="# <percentage> values are a Mozilla extension and not supported by Safari/WebKit.<br />
# Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.<br />
# Safari/WebKit doesn&#8217;t support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.&#8221;><a href="http://www.w3.org/TR/css3-background/#border-radius"><code>border-radius</code></a><br />
<code>border-top-right-radius<br />
border-bottom-right-radius<br />
border-bottom-left-radius<br />
border-top-left-radius</code></th>
<td>CSS3</td>
<td>Note: Firefox sytax is wrong: <br />
-moz-border-radius-topleft, <br />
-moz-border-radius-topright, <br />
-moz-border-radius-bottomright, <br />
-moz-border-radius-bottomleft</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood" title="gets the border radius correctly, but the sytax is incorrect. See notes">-moz-</td>
<td class="almostgood">-webkit-</td>
<td class="bad">-o-</td>
<td>values before slash = horizontal radius, values after the slash = vertical radius.</td>
</tr>
<tr>
<th  class="value">length</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://dev.w3.org/csswg/css3-background/#the-box-shadow"><code>box-shadow</code></a></th>
<td>CSS3</td>
<td>currently removed from spec. Will likely come back</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">-<a href="https://developer.mozilla.org/en/CSS/-moz-box-shadow">moz</a>-</td>
<td class="almostgood">-webkit-</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">inset lngth lngth lngth color</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">lngth lngth lngth color</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">(mulitple shadows)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="almostgood">3.5</td>
<td class="almostgood">4.0</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing"><code>border-spacing</code></a></th>
<td>CSS2.1</td>
<td><code>0</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td rowspan="4"><code>'table' and 'inline-table' elements. Used with {border-collapse: separate;}</code></td>
</tr>
<tr>
<th class="value">length</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
</tr>
<tr>
<th class="value">length length</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom"><code>bottom</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-background/#the-box-decoration-break"><code>box-decoration-break</code></a></th>
<td>CSS3</td>
<td>not inherited</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td rowspan="3">handling of border when a box is broken by a page, col break, etc.</td>
</tr>
<tr>
<th  class="value">clone</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
</tr>
<tr>
<th  class="value">slice</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side"><code>caption-side</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">top</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">bottom</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th height="21" class="value">left / right</th>
<td>not in spec</td>
<td>&nbsp;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td class="iffy" title="Vertical tables (-ms-writing-mode set to tb-* or bt-*) support the left and right values. Captions placed to the left or right of the table are not rotated so as to be read vertically: use the Rotation property of the BasicImage filter in IE8. ">&Delta;</td>
<td class="good">&radic;</td>
<td>&Chi;</td>
<td>&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/"><code>clear</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">both</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">left</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">right</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visufx.html#propdef-clip"><code>clip</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="iffy">&Chi;</td>
<td class="iffy">&Chi;</td>
<td class="iffy">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>on absolutely positioned elements</td>
</tr>
<tr>
<th class="value">rect(T, R, B, L)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="works, but does not use correct syntax. Doesn't understand commas">&Chi;</td>
<td class="iffy" title="works, but does not use correct syntax. Doesn't understand commas">&Chi;</td>
<td class="iffy" title="works, but does not use correct syntax. Doesn't understand commas">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="works, but does not use correct syntax">&Chi;</td>
<td class="iffy" title="works, but does not use correct syntax">&Chi;</td>
<td class="iffy" title="works, but does not use correct syntax">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/colors.html#propdef-color"><code>color</code></a></th>
<td>CSS2.1</td>
<td>depends on element and browser</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgb()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&Delta;</td>
<td class="almostgood">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">#CCCCCC</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">colorName</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">transparent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgba()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/generate.html#propdef-content"><code>content</code></a><br />:before &amp; :after						</th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="iffy" title="Doesn't completely support content in that while it renders the content correctly, it doesn't allow full CSS styling of generated content.">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="almostgood" title="Displays quotes on quotes. Makes sense, but it is not the spec.">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">string</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">open-quote / close-quote</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="almostgood" title="Doesn't nest quotes correctly, but does include the quotes">&Delta;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">no-open-quote / no-close-quote</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">attr(x)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">counter</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/"><code>counter-increment</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">counterName int</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/"><code>counter-reset</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">counterName int</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property">
<p><a href="http://www.w3.org/TR/CSS21/"><code>cue</code></a></p>
<p><a href="http://www.w3.org/TR/CSS21/"><code> cue-after</code></a><br /> <br />
				        <a href="http://www.w3.org/TR/CSS21/"><code>cue-before</code></a></p>
</th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td colspan="7" rowspan="4" class="aural">aural</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url(x.wav)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/"><code>cursor</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url(x.cur)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">crosshair</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">default</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">pointer</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">move</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="iffy" title="shows pointer, not move">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">e-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">ne-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">nw-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">n-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">se-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">sw-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">s-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">w-resize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">text</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">wait</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">progress</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">help</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"><code>direction</code></a></th>
<td>CSS2.1/<a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#direction">CSS3</a></td>
<td><code>inherited</code></td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">ltr</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rtl</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#display"><code>display</code></a></th>
<td>CSS2.1</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inline</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">block</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">list-item</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">run-in</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="iffy">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inline-block</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inline-table</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">3.0</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-row-group</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-header-group</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-footer-group</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-row</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-column-group</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-row</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-column</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-cell</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">table-caption</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="bad">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">ruby</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">ruby-base</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">ruby-text</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">ruby-base-group</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">ruby-text-group</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">compact</th>
<td>CSS2.0/CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-elevation"><code>elevation</code></a></th>
<td>CSS2.1</td>
<td><code>level</code></td>
<td colspan="7" rowspan="4" class="aural">aural</td>
<td rowspan="4"></td>
</tr>
<tr>
<th class="value">angle (270deg)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">below | level | above | higher | lower </th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells"><code>empty-cells</code></a></th>
<td>CSS2.1</td>
<td><code>show</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>sets whether or not to show empty cells in a table when &quot;separated</td>
</tr>
<tr>
<th class="value">show</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>Borders are drawn around empty cells</td>
</tr>
<tr>
<th class="value">hide</th>
<td>Default</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>No borders are drawn around empty cells</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#float"><code>float</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">left</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">right</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font"><code>font</code></a></th>
<td>CSS2.1</td>
<td>depends on element and browser</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">fStyle fVariant fWeight fSize/lineHeight fFamily</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">caption</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="4" rowspan="7" class="iffy" title="When specifying the user preferences caption, icon, menu, message-box, small-caption, or status-bar for this property, do not set other values for the font property on the same element. If you do, the other values might render, but the user preference value is ignored.">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">icon</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">menu</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">message-box</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">small-caption</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">status-bar</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><code>font-effect</code></th>
<td><del>CSS3</del></td>
<td>no longer in spec</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><code>font-emphasize</code></th>
<td><del>CSS3</del></td>
<td>no longer in spec</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font-family"><code>font-family</code></a></th>
<td>CSS2.1</td>
<td>depends on element and browser</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">font-1, font-2, generic</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">singleFontFamily</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font-size"><code>font-size</code></a></th>
<td>CSS2.1</td>
<td><code>medium</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">xx-small | x-small | small | medium | large | x-large | xx-large</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">larger | smaller</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (12px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">percent (108%)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro"><code>font-size-adjust</code></a></th>
<td>CSS2/CSS3</td>
<td><a href="http://www.evotech.net/sandbox/fontstretchandadjust.html">sandbox</a></td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&radic;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&radic;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">length</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&radic;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font-stretch"><code>font-stretch</code></a></th>
<td>CSS3</td>
<td><a href="http://www.evotech.net/sandbox/fontstretchandadjust.html">sandbox</a></td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">wider</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">narrower</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">ultra-condensed / ultra-expanded</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">extra-condensed/ extra-expanded</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">condensed / expanded</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">semi-condensed / semi-expanded</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font-style"><code>font-style</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">italic</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood" title="shows as oblique if there isn't italic">&Delta;</td>
<td class="almostgood" title="shows as oblique if there isn't italic">&Delta;</td>
<td class="almostgood" title="shows as oblique if there isn't italic">&Delta;</td>
<td class="almostgood" title="shows as oblique if there isn't italic">&Delta;</td>
<td class="almostgood" title="shows as oblique if there isn't italic">&Delta;</td>
<td class="almostgood" title="shows as oblique if there isn't italic">&Delta;</td>
<td class="almostgood"  title="shows as oblique if there isn't italic">&Delta;</td>
<td  title="shows as oblique if there isn't italic">&nbsp;</td>
</tr>
<tr>
<th class="value">oblique</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood" title="shows as italic">&Delta;</td>
<td class="almostgood" title="shows as italic">&Delta;</td>
<td class="almostgood" title="shows as italic">&Delta;</td>
<td class="almostgood" title="shows as italic">&Delta;</td>
<td class="almostgood" title="shows as italic">&Delta;</td>
<td class="almostgood" title="shows as italic">&Delta;</td>
<td class="almostgood"  title="shows as italic">&Delta;</td>
<td  title="shows as italic">&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font-variant"><code>font-variant</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">small-caps</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-fonts/#font-weight"><code>font-weight</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">bold</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">bolder</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lighter</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 </th>
<td>&nbsp;</td>
<td>couldn&#8217;t fully test because i don&#8217;t have &quot;light&quot; fonts</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#hanging-punctuation"><code>hanging-punctuation</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">start | end</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">end-edge</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#height"><code>height</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="iffy" title="Treats it as min-height">&Delta;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="Treats it as min-height">&Delta;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="Treats it as min-height">&Delta;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="Treats it as min-height">&Delta;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-left"><code>left</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/text.html#spacing-props"><code>letter-spacing</code></a></th>
<td>CSS2.1</td>
<td><code>inherited</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="iffy" title="seems to add a space before when adding a span of normal in a parent set with letter-spacing">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-linebox/#line-height"><code>line-height</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">number (2)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><code><a href="http://www.w3.org/TR/css3-linebox/#LineStacking">line-stacking</a></code></th>
<td>CSS3</td>
<td>shorthand</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">strategy ruby shift (see below)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><code><a href="http://www.w3.org/TR/css3-linebox/#line-stacking-strategy">line-stacking-strategy</a></code></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inline-line-height</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">block-line-height</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">max-height</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">grid-height</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><code><a href="http://www.w3.org/TR/css3-linebox/#line-stacking-ruby">line-stacking-ruby</a></code></th>
<td>CSS3</td>
<td>inherited</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">exclude-ruby</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">include-ruby</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><code><a href="http://www.w3.org/TR/css3-linebox/#line-stacking-shift">line-stacking-shift</a></code></th>
<td>CSS3</td>
<td>inherited</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">consider-shifts</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">disregard-shifts</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-lists/#list-style"><code>list-style</code></a></th>
<td>CSS2.1</td>
<td>depending on individual properties</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">type position image</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-lists/#list-style-image"><code>list-style-image</code></a></th>
<td>CSS2.1</td>
<td><code>inherited</code></td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url()</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-lists/#list-style-position"><code>list-style-position</code></a></th>
<td>CSS2.1</td>
<td><code>outside</code></td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inside</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">outside</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-lists/#list-style-type"><code>list-style-type</code></a></th>
<td>CSS2.1</td>
<td><code>disc <a href="http://www.evotech.net/sandbox/liststyletype2.html">sandbox</a></code></td>
<td class="iffy">&radic;</td>
<td class="iffy">&radic;</td>
<td class="iffy">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">disc</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">circle</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">square</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th height="42" class="value">decimal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">decimal-leading-zero</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lower-roman</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">upper-roman</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lower-greek</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lower-latin</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">upper-latin</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">armenian</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">georgian</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td class="iffy">&Delta;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lower-alpha</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">upper-alpha</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">asterisks</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">box</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">check</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">diamond</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">footnotes</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hyphen</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">cjk-ideographic</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hiragana</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">katakana</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hiragana-iroha</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">katakana-iroha</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property">
<p><a href="http://www.w3.org/TR/css3-box/#the-margin"><code>margin</code></a></p>
<p><a href="http://www.w3.org/TR/css3-box/#the-margin"><code>margin-bottom</code></a> <br />
 <a href="http://www.w3.org/TR/css3-box/#the-margin"><code>margin-left</code></a> <br />
 <a href="http://www.w3.org/TR/css3-box/#the-margin"><code>margin-right</code></a> <br />
 <a href="http://www.w3.org/TR/css3-box/#the-margin"><code>margin-top</code></a></p>
</th>
<td>CSS2.1</td>
<td>depends on element and browser</td>
<td class="iffy" title="gets the box model different from the W3C specifications">&Delta;</td>
<td class="iffy" title="gets the box model different from the W3C specifications">&Delta;</td>
<td class="iffy" title="gets the box model different from the W3C specifications">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="gets the box model different from the W3C specifications">&Delta;</td>
<td class="iffy" title="gets the box model different from the W3C specifications in quirks mod">&Delta;</td>
<td class="iffy" title="gets the box model different from the W3C specifications in quirks mod">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="gets the box model different from the W3C specifications">&Delta;</td>
<td class="iffy" title="gets the box model different from the W3C specifications in quirks mode">&Delta;</td>
<td class="iffy" title="gets the box model different from the W3C specifications in quirks mod">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-marquee/#the-marquee-direction"><code>marquee-direction</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">forward</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">reverse</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-marquee/#the-marquee-play-count"><code>marquee-play-count</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">infinite</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">number</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-marquee/#the-marquee-speed"><code>marquee-speed</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">slow</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">fast</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-marquee/#the-marquee-style"><code>marquee-style</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">scroll</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">slide</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">alternate</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#max-height"><code>max-height</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#max-width"><code>max-width</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#min-height"><code>min-height</code></a></th>
<td>CSS2.1</td>
<td><code>0</code></td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th height="44" class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#min-width"><code>min-width</code></a></th>
<td>CSS2.1</td>
<td><code>0</code></td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><a href="http://www.w3.org/TR/css3-color/#transparency"><code>opacity</code></a></th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="4" rowspan="3" class="iffy">IE has proprietary filter to simulate effect: <code></code>filter: alpha(opacity=xx)</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">10</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">10</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">(number)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">10</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-page/#orphans"><code>orphans</code></a></th>
<td>CSS2.1</td>
<td><code>2</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">integer</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-ui/#outline0"><code>outline</code></a></th>
<td>CSS2.1</td>
<td>depending on individual properties</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>see individual properties below</td>
</tr>
<tr>
<th class="value">color style width</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-ui/#outline-color0"><code>outline-color</code></a></th>
<td>CSS2.1</td>
<td><code>invert</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">rgb / #fff / colorName</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">invert</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><code><a href="http://www.w3.org/TR/css3-ui/#outline-offset">outline-offset</a></code></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">(length)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-ui/#outline-style0"><code>outline-style</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">dashed</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">dotted</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">double</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">groove</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hidden</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inset</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">outset</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">ridge</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">solid</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-ui/#outline-width0"><code>outline-width</code></a></th>
<td>CSS2.1</td>
<td><code>medium</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">thin</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">medium</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">thick</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#overflow0"><code>overflow </code></a></th>
<td>CSS2.1</td>
<td>depending on individual properties</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">visible</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad" title="treats the height value as min-height, growing the container element">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hidden</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">scroll</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">no-display</th>
<td><a href="http://www.w3.org/TR/css3-box/#overflow0">CSS3</a></td>
<td><a href="http://www.evotech.net/sandbox/overflow-no-display-no-content.html">sandbox</a></td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">no-content</th>
<td><a href="http://www.w3.org/TR/css3-box/#overflow0">CSS3</a></td>
<td><a href="http://www.evotech.net/sandbox/overflow-no-display-no-content.html">sandbox</a></td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-marquee/#the-overflow-style"><code>overflow-style</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">marquee-line</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">marquee-block</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><a href="http://www.w3.org/TR/css3-box/#overflow"><code>overflow-x</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="iffy">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><a href="http://www.w3.org/TR/css3-box/#overflow"><code>overflow-y</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="iffy">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property">
<p><a href="http://www.w3.org/TR/css3-box/#the-padding"><code>padding</code></a></p>
<p><a href="http://www.w3.org/TR/css3-box/#the-padding"><code>padding-bottom</code></a> <br />
 <a href="http://www.w3.org/TR/css3-box/#the-padding"><code>padding-left</code></a> <br />
 <a href="http://www.w3.org/TR/css3-box/#the-padding"><code>padding-right</code></a> <br />
 <a href="http://www.w3.org/TR/css3-box/#the-padding"><code>padding-top</code></a></p>
</th>
<td>CSS2.1</td>
<td>depends on element and browser</td>
<td class="iffy" title="box model issues">&Delta;</td>
<td class="iffy" title="box model issues">&Delta;</td>
<td class="iffy" title="box model issues">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="box model issues">&Delta;</td>
<td class="iffy" title="box model issues">&Delta;</td>
<td class="iffy" title="box model issues">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-page/#page"><code>page</code></a></th>
<td>2.0</td>
<td><code>auto</code></td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">identifier</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-page/#page-break-after"><code>page-break-after</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>not inherited</td>
</tr>
<tr>
<th class="value">always</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>force a page break after the element</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>page break where it would normally break</td>
</tr>
<tr>
<th class="value">left </th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="4" rowspan="2" class="almostgood">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>force page breaks so that next page is a left  page </td>
</tr>
<tr>
<th class="value">right</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>force page breaks so that next page is a right page </td>
</tr>
<tr>
<th class="value">avoid</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>Avoid a page break after the element</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-page/#page-break-before"><code>page-break-before</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>not inherited</td>
</tr>
<tr>
<th class="value">always</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>force a page break after the element</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>page break where it would normally break</td>
</tr>
<tr>
<th class="value">left</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="4" rowspan="2" class="almostgood">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>force page breaks so that next page is a left  page </td>
</tr>
<tr>
<th class="value">right</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>force page breaks so that next page is a right page </td>
</tr>
<tr>
<th class="value">avoid</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>Avoid a page break after the element</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-page/#page-break-inside"><code>page-break-inside</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>not inherited</td>
</tr>
<tr>
<th class="value">avoid</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>Avoid a page break inside the element</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>page break where it would normally break</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-speech/#pause"><code>pause</code></a></th>
<td>CSS2.1</td>
<td>implementation dependent</td>
<td colspan="7" rowspan="22" class="aural">aural</td>
<td>Shorthand for pause-before pause after</td>
</tr>
<tr>
<th class="value">time (in ms)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">%</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-speech/#pause-after"><code>pause-after</code></a></th>
<td>CSS2.1</td>
<td>implementation dependent</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">time (in ms)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>time in milliseconds</td>
</tr>
<tr>
<th class="value">%</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>pause the % of time it would take to say a word (&gt;100% ok)</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-speech/#pause-before"><code>pause-before</code></a></th>
<td>CSS2.1</td>
<td>implementation dependent</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">time (in ms)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">%</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-pitch"><code>pitch</code></a></th>
<td>CSS2.1</td>
<td><code>medium</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">Hz / kHz</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">x-low | low | medium | high | x-high</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-pitch-range"><code>pitch-range</code></a></th>
<td>CSS2.1</td>
<td><code>50</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">0 or more</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value"></th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value"></th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-play-during"><code>play-during</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url(x.wav) </th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url(x.wav) mix</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">url(x.wav) repeat</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-position"><code>position</code></a></th>
<td>CSS2.1</td>
<td><code>static</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">absolute</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">fixed</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="iffy" title="relatively positioned elements inside a fixed element may not show">&Delta;</td>
<td class="iffy" title="relatively positioned elements inside a fixed element may not show">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="dynamically changing positions can lead to issues with chid positioning">&Delta;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">relative</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="relatively positioning parents can cause problems (like entire sections or pages not being visible">&Delta;</td>
<td class="iffy" title="relatively positioning parents can cause problems (like entire sections or pages not being visible">&Delta;</td>
<td class="iffy" title="relatively positioning parents can cause problems (like entire sections or pages not being visible">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">static</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#punctuation-trim"><code>punctuation-trim</code></a></th>
<td>CSS3</td>
<td>inherited</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">start | end</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td colspan="3" rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">adjacent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/generate.html#propdef-quotes"><code>quotes</code></a></th>
<td>CSS2.1</td>
<td>implementation dependent</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">3.5</td>
<td class="good">&nbsp;</td>
<td  class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">string (&#8217;&rdquo;&#8217; &#8216;&ldquo;&#8217; &quot;&rsquo;&quot; &quot;&lsquo;&quot;)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-richness"><code>richness</code></a></th>
<td>CSS2.1</td>
<td><code>50</code></td>
<td colspan="7" rowspan="3" class="aural">aural</td>
<td  rowspan="3"></td>
</tr>
<tr>
<th class="value">number (50)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-right"><code>right</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="ignores bottom if top is declared">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-page/#size"><code>size</code></a></th>
<td>2.0</td>
<td><code>auto</code></td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (8.5in 11in)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">portrait / landscape</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td class="print">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-speech/#speak"><code>speak</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td colspan="7" rowspan="24" class="aural">aural</td>
<td></td>
</tr>
<tr>
<th class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">spell-out</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-speak-header"><code>speak-header</code></a></th>
<td>CSS2.1</td>
<td><code>once</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">once</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">always</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-speak-numeral"><code>speak-numeral</code></a></th>
<td>CSS2.1</td>
<td><code>continuous</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">digits</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">continuous</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-speak-punctuation"><code>speak-punctuation</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">code</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-speech-rate"><code>speech-rate</code></a></th>
<td>CSS2.1</td>
<td><code>medium</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">number</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">x-slow | slow | medium | fast | x-fast | faster | slower</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-stress"><code>stress</code></a></th>
<td>CSS2.1</td>
<td><code>50</code></td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">number</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout"><code>table-layout</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;7</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">fixed</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-align"><code>text-align</code></a></th>
<td>CSS2.1</td>
<td><code>start</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">left</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">right</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">center</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">justify</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">start | end</th>
<td><a href="http://www.w3.org/TR/css3-text/#text-align">CSS3</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>3.6</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value" title="When applied to a table cell, specifies a character on which all cells in its table column that also have a character value for 'text-align' will align">(char)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-align-last"><code>text-align-last</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="iffy">-<a href="http://msdn.microsoft.com/en-us/library/ms531163(VS.85).aspx">ms</a>-</td>
<td class="iffy">-<a href="http://msdn.microsoft.com/en-us/library/ms531163(VS.85).aspx">ms</a>-</td>
<td class="iffy">-<a href="http://msdn.microsoft.com/en-us/library/ms531163(VS.85).aspx">ms</a>-</td>
<td class="iffy">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">start | end</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">left | right | center</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">justify</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration"><code>text-decoration</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">underline</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">overline</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">line-through</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">blink</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-emphasis"><code>text-emphasis</code></a></th>
<td>CSS3</td>
<td>inherited</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property">&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">accent | dot | circle | disc</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">before | after</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="property"><a href="http://www.w3.org/TR/css3-linebox/#text-height"><code>text-height</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">text-size</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">font-size</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">max-size</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-indent"><code>text-indent</code></a></th>
<td>CSS2.1</td>
<td>inherited</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>default = 0</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hanging</th>
<td><a href="http://www.w3.org/TR/css3-text/#text-indent">CSS3</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-justify"><code>text-justify</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">inter-word</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">inter-ideograph | inter-cluster</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">distribute</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">kashida | tibetan</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-outline"><code>text-outline</code></a></th>
<td>CSS3</td>
<td>inherited</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">color</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">length</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><code>text-overflow</code></th>
<td>CSS3.X</td>
<td>not in the spec yet</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">string | clip | ellipses</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-shadow"><code>text-shadow </code></a></th>
<td>2.0/3</td>
<td>inherited</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>Not in the 2.1 spec</td>
</tr>
<tr>
<th class="value">color leftOffset topOffset blurRadius</th>
<td>2.0/3</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good" title="google Chrome does not support shadows at all">&radic;-</td>
<td class="good">&radic;</td>
<td><a href="/sandbox/text_shadow.html">text-shadow sandbox</a></td>
</tr>
<tr>
<th class="value">multiple shadows</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good" title="google Chrome does not support shadows at all">&radic;-</td>
<td class="good">10</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good" title="google Chrome does not support shadows at all">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/text.html#propdef-text-transform"><code>text-transform</code></a></th>
<td>CSS2.1</td>
<td><code>none</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td><a href="http://www.evotech.net/sandbox/texttransform.html">text-transform standbox</a></td>
</tr>
<tr>
<th class="value">capitalize</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">uppercase</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">lowercase</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#text-wrap"><code>text-wrap</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">unrestricted</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">suppress</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-top"><code>top</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi"><code>unicode-bidi</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">embed</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">bidi-override</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-linebox/#vertical-align"><code>vertical-align</code></a></th>
<td>CSS2.1/<a href="http://www.w3.org/TR/css3-linebox/#vertical-align">CSS3</a></td>
<td><code>baseline</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>inline-level and table-cell elements only</td>
</tr>
<tr>
<th class="value">baseline</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="a bit above baseline">&Chi;</td>
<td class="good">&radic;;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="bad" title="almost middle">&Chi;</td>
<td class="iffy" title="a bit above baseline">&Delta;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">sub</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">super</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">top</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">text-top</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">middle</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood" title="middle on images in the middle, which is a little higher than it is supposed to be">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="middle on images in the middle, which is a little higher than it is supposed to be">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">bottom</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">text-bottom</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="vertically aligns in table cells (it shouldn't)">&Delta;</td>
<td class="iffy" title="vertically aligns in table cells (it shouldn't)">&Delta;</td>
<td class="iffy" title="vertically aligns in table cells (it shouldn't)">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="almostgood" title="inline text is below the text bottom">&Delta;</td>
<td title="inline text is below the text bottom">&nbsp;</td>
</tr>
<tr>
<th class="value">percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="iffy" title="on table cells, doesn't inherit (should, since this value is no good on table cells)">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">central</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">use-script</th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-box/#visibility"><code>visibility</code></a></th>
<td>CSS2.1</td>
<td><code>visible</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value"> visible </th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">hidden</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="in col should not hide, but does">&Delta;</td>
<td class="iffy" title="in col should not hide, but does">&Delta;</td>
<td class="iffy" title="in col should not hide, but does">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">collapse</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="iffy" title="doesn't work on columns">&Delta;</td>
<td class="iffy" title="doesn't work on columns">&Delta;</td>
<td title="doesn't work on columns">collapse in tables, hidden elsewhere</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-speech/#voice-family"><code>voice-family</code></a></th>
<td>CSS2.1</td>
<td>implementation dependent</td>
<td colspan="7" rowspan="7" class="aural">aural</td>
<td  rowspan="7"></td>
</tr>
<tr>
<th class="value">specificVoice, genericVoice</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/aural.html#propdef-volume"><code>volume</code></a></th>
<td>CSS2.1</td>
<td><code>medium</code></td>
</tr>
<tr>
<th class="value">number / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">silent | x-soft | soft | medium | loud | x-loud</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#white-space"><code>white-space</code></a></th>
<td>CSS2.1</td>
<td><code>normal</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td><a href="http://www.evotech.net/sandbox/whitespace2.html">test</a></td>
<td>&nbsp;</td>
<td class="iffy" title="works on block level only">&Delta;</td>
<td class="iffy" title="works on block level only">&Delta;</td>
<td class="iffy" title="works on block level only">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">pre</th>
<td><a href="http://www.evotech.net/sandbox/whitespace.html">test</a></td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">nowrap</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">pre-wrap</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">pre-line</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#white-space-collapse"><code>white-space-collapse</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">preserve</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">collapse</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">preserve-breaks</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">discard</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/page.html#propdef-widows"><code>widows</code></a></th>
<td>CSS2.1</td>
<td><code>2</code></td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">integer</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td class="bad">&Chi;</td>
<td class="bad">&Chi;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/page.html#propdef-widows"><code>width</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length / percent</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">inherit</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="iffy" title="gets the W3C box model wrong">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#word-break"><code>word-break</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">-ms-</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">normal</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">keep-all</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">loose</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">break-strict</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">break-all</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing"><code>word-spacing</code></a></th>
<td>CSS2.1</td>
<td><code>inherited</code></td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">length (3px)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="negative values are a bit off">&Delta;</td>
<td class="iffy" title="negative values are a bit off">&Delta;</td>
<td class="iffy" title="negative values are a bit off">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/css3-text/#word-wrap"><code>word-wrap</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="almostgood"><a href="http://msdn.microsoft.com/en-us/library/ms531186%28VS.85,loband%29.aspx">-ms-</a></td>
<td class="almostgood"><a href="http://msdn.microsoft.com/en-us/library/ms531186%28VS.85,loband%29.aspx">-ms-</a></td>
<td class="almostgood"><a href="http://msdn.microsoft.com/en-us/library/ms531186%28VS.85,loband%29.aspx">-ms-</a></td>
<td class="good">&nbsp;</td>
<td class="good">3.5</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">break-word</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><code><a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#writing-mode">writing-mode</a></code></th>
<td>&nbsp;</td>
<td>Shorthand for direction and block progression</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td rowspan="5"><a href="http://msdn.microsoft.com/en-us/library/ms531187%28VS.85%29.aspx">IE8</a> also supports bottom to top modes</td>
</tr>
<tr>
<th  class="value">lr-tb</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">rl-tb</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">tb-rl</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="value">tb-lr</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th  class="property"><a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index"><code>z-index</code></a></th>
<td>CSS2.1</td>
<td><code>auto</code></td>
<td class="iffy" title="Has issues with positioning and z-index">&Delta;</td>
<td class="iffy" title="Has issues with positioning and z-index">&Delta;</td>
<td class="iffy" title="Has issues with positioning and z-index">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>applies to positioned elements</td>
</tr>
<tr>
<th class="value">integer (3)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="iffy" title="Has issues with positioning and z-index">&Delta;</td>
<td class="iffy" title="Has issues with positioning and z-index">&Delta;</td>
<td class="iffy" title="Has issues with positioning and z-index">&Delta;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th class="value">auto</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td class="good">&radic;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>Notes</p>
<ul>
<li>Level of support for property is based on CSS2.1. So, if a browser supports all of CSS2.1 but not CSS3, they will get be listed as supporting the property, unless it&#8217;s a purely CSS3 property. If there is a browser specific prefix to make the CSS3 work, it passes as &quot;almost good.&quot;</li>
<li>Browsers include:<br />
  (if it passed originally in older browser, i did not retest)</p>
<ul>
<li>IE6</li>
<li>IE7</li>
<li>IE7 compatibility mode</li>
<li>IE8</li>
<li>Firefox 3, 3.5, 3.6</li>
<li>Safari 3.2 and 4 beta</li>
<li>Opera 9.64 and 10</li>
</ul>
</li>
<li>There are a lot of hidden title attributes in this page. When you hover over the deltas and underlined table cells, in standards compliant browsers, informaiton on how the browsers fails to comply with standards should be displayed.</li>
<li>This is still a work in progress, but it&#8217;s pretty far along, so I am posting. It will be updated soon and often until done&#8230; then I&#8217;ll remove this bullet point.</li>
</ul>
<p>Key</p>
<table class="cssproperty" style="height:auto">
<tbody style="height:auto">
<tr>
<th scope="col">Haven&#8217;t run tests yet</th>
<th class="bad" scope="col">Fails</th>
<th scope="col">Some Support</th>
<th scope="col">Almost Compliant</th>
<th scope="col">Compliant</th>
<th scope="col">Aural (will not support)</th>
<th scope="col">Print </th>
</tr>
<tr>
<td class="value">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="almostgood">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="aural">&nbsp;</td>
<td class="print">&nbsp;</td>
</tr>
<tr>
<td class="value">will test soon</td>
<td>&nbsp;</td>
<td>may add links to tests</td>
<td>may add link to tests</td>
<td>&nbsp;</td>
<td>will unlikely be supporting</td>
<td>will add support soon</td>
</tr>
</tbody>
</table>
<style type="text/css">
.cssproperty	th {background-color:#CCCCCC;}
.cssproperty	td {background-color: #dedede; position:relative;max-width: 150px;}
.cssproperty	td.good {background-color:#339900;}
.cssproperty	td.almostgood {background-color:#00CC66;}
.cssproperty	td.bad {background-color:#CC0000;}
.cssproperty	td.iffy {background-color:#FFFF66;}
.cssproperty	td.aural {background-color:#B8CBD8;}
.cssproperty	td.print {background-color:#DBE5BC;}
.cssproperty	td[title]:hover:after {
		content:attr(title);
		position:absolute;
		background-color:#CCCCCC;
		border:1px solid #999;
		padding:5px;
		display:block;
		width:50px;
		top: 0;
		left:0;
		}
th.property {text-align:left;}
th.value {padding-left: 10px; text-align:left;}
.cssproperty code {background-color:transparent;}
.cssproperty tbody { overflow-x: none; overflow-y: auto;}
.cssproperty th.property {border: 1px solid #aaa; border-width: 1px 0; background-color: #bbb; text-align:left;}
td[title] {border-bottom: 1px solid #3300FF;}</p>
</style>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/feed/</wfw:commentRss>
		</item>
		<item>
		<title>CSS3 Columns &#038; Browser Support</title>
		<link>http://www.evotech.net/blog/2010/02/css3-columns-browser-support/</link>
		<comments>http://www.evotech.net/blog/2010/02/css3-columns-browser-support/#comments</comments>
		<pubDate>Sat, 06 Feb 2010 08:17:43 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[CSS (including hacks)]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=90</guid>
		<description><![CDATA[I am busy working away at a grid of all the CSS3 properties. But, as I test them, I figure I would share.  Here is the first set: the column properties.
I have a grid of all of the CSS3 properties, values and browser support that you may want to check out as well.

.cssproperty	th {background-color:#CCCCCC;}
.cssproperty	td [...]]]></description>
			<content:encoded><![CDATA[<p>I am busy working away at a grid of all the CSS3 properties. But, as I test them, I figure I would share.  Here is the first set: the column properties.</p>
<p>I have a grid of all of the <a href="http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/">CSS3 properties, values and browser support</a> that you may want to check out as well.</p>
<style type="text/css">
.cssproperty	th {background-color:#CCCCCC;}
.cssproperty	td {background-color: #dedede; position:relative;}
.cssproperty	td.good {background-color:#339900;}
.cssproperty	td.almostgood {background-color:#00CC66;}
.cssproperty	td.bad {background-color:#CC0000;}
.cssproperty	td.iffy {background-color:#FFFF66;}
.cssproperty	td.aural {background-color:#B8CBD8;}
.cssproperty	td.print {background-color:#DBE5BC;}
.cssproperty	td[title]:hover:after {
		content:attr(title);
		position:absolute;
		background-color:#CCCCCC;
		border:1px solid #999;
		padding:5px;
		display:block;
		width:50px;
		top: 0;
		left:0;
		}
th.property {text-align:left;}
th.value {padding-left: 10px; text-align:left;}
.cssproperty code {background-color:transparent;}
.cssproperty tbody {height: 500px; _height: auto;  overflow-x: none; overflow-y: auto;}
.cssproperty th.property {border: 1px solid #aaa; border-width: 1px 0; background-color: #bbb; text-align:left;}</p>
</style>
<table class="cssproperty">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Inherited?</th>
<th scope="col">Default Value</th>
<th scope="col">ie6</th>
<th scope="col">ie7</th>
<th scope="col">ie7comp</th>
<th scope="col">ie8</th>
<th scope="col">FF<br />
			            3.6</th>
<th scope="col">Saf<br />
			            4</th>
<th scope="col">Chrome</th>
<th scope="col">OP<br />
			            10</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Property</th>
<th scope="col"><a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a></th>
<th scope="col">Default Value</th>
<th scope="col">ie6</th>
<th scope="col">ie7</th>
<th scope="col">ie7comp</th>
<th scope="col">ie8</th>
<th scope="col">FF3</th>
<th scope="col">Saf</th>
<th scope="col">&nbsp;</th>
<th scope="col">OP</th>
<th scope="col">&nbsp;</th>
</tr>
</tfoot>
<tbody style="height:500px; _height:auto">
<tr>
<th scope="col">COLUMNS</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
<th scope="col">&nbsp;</th>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#cc"><code>column-count</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th class="value"  scope="row"><strong>auto</strong></th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">(integer) </th>
<td><a href="http://www.evotech.net/sandbox/column-count.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#column-fill"><code>column-fill</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">auto</th>
<td><a href="sandbox/column-fill.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">balance </th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">-moz-</td>
<td class="bad">-webkit</td>
<td class="bad">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#column-gap"><code>column-gap</code></a> - gap between columns</th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">normal</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">(positive length) </th>
<td><a href="sandbox/column-gap.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#column-rule"><code>column-rule</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">column width/style/color (see below)</th>
<td><a href="http://www.evotech.net/sandbox/column-rule.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#crc"><code>column-rule-color</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">(rgb or #color)</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value"> (rgba color)</th>
<td><a href="http://www.evotech.net/sandbox/column-rule-color.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#crs"><code>column-rule-style</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">(see border style)</th>
<td><a href="http://www.evotech.net/sandbox/column-rule-style.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">none</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#crw"><code>column-rule-width</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">thin | medium | thick</th>
<td><a href="http://www.evotech.net/sandbox/column-rule-width.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">(length) </th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#columns"><code>columns</code></a> (shorthand)</th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">length for column-width and/or int for column-count</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">omitted value set to initial value</th>
<td>initial values</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">-moz-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#column-span"><code>column-span</code></a></th>
<td>CSS3</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">1</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">all</th>
<td><a href="http://www.evotech.net/sandbox/column-span.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="property"><a href="http://www.w3.org/TR/css3-multicol/#cw"><code>column-width</code></a></th>
<td>no</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit</td>
<td class="good">-webkit</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">(length)</th>
<td><a href="http://www.evotech.net/sandbox/column-width.html">sandbox</a></td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">-webkit-</td>
<td class="good">-webkit-</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="cssproperty">
<th  scope="row" class="value">auto</th>
<td>default</td>
<td>&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td class="good">-moz-</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>Note that the CSS3 specifications are still in draft mode. Note the -webkit- and -moz- in the cells. Until this is supported, code like this:</p>
<pre class="code">
-moz-column-count:3; /* for mozilla */
-webkit-column-count:3;  /* for webkit (Safari and Google) */
-o-column-count:3;  /* for opera, likely, when supported */
column-count:3; /* for all and future proofing */
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2010/02/css3-columns-browser-support/feed/</wfw:commentRss>
		</item>
		<item>
		<title>@font-face Browser Support &#038; Tutorial</title>
		<link>http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/</link>
		<comments>http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 21:28:25 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[CSS (including hacks)]]></category>

		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=89</guid>
		<description><![CDATA[
.good {background-color:#00CC00; }
.bad {background-color:#FF0000;}
.iffy {background-color:#FFFF00;}
.selectors {float: left; width:10em;}

Up to now, web developers were limited in what typography they could use on a website to what the client had installed in their environments. Now that we have finally convinced designers to not include any fonts outside of georgia, helvetica, arial, times roman, and a handful of [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">
.good {background-color:#00CC00; }
.bad {background-color:#FF0000;}
.iffy {background-color:#FFFF00;}
.selectors {float: left; width:10em;}
</style>
<p>Up to now, web developers were limited in what typography they could use on a website to what the client had installed in their environments. Now that we have finally convinced designers to not include any fonts outside of georgia, helvetica, arial, times roman, and a handful of others because of the awfulness of text images, @font-face allows us to retrain designers to use unique fonts, only if they have the legal right to post those fonts on the web.</p>
<style type="text/css">
.good {background-color:#00CC00; }
.bad {background-color:#FF0000;}
.iffy {background-color:#FFFF00;}
.selectors {float: left; width:10em;}
</style>
<div style="float: right; padding: 0 0 20px 20px"><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 300x250, created 9/2/09 */
google_ad_slot = "4342979058";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<h2 style="clear: none;">What is @font-face</h2>
<p style="clear: left;">Generally, we&#8217;ve been limited to using the fonts pre-installed on MS Windows, Mac and Linux OSs. Increasing support of the CSS3 @font-face allows us to load a font onto our servers, link to and name that font in our CSS, and then use that font  we&#8217;ve imported as if it were a native font in the client&#8217;s environment. With @font-face, we can worry less about what font our users have installed, and make our sites better match the intentions of our designers. @font-face enables you to provide your own font(s), @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers </p>
<h2>Browser Support for @font-face</h2>
<p>CSS2 introduced @font-face. CSS2.1 killed it. CSS3 is reintroducing it. Why do you need to know the history? Because, it means there is actually a feature of CSS3 that internet explorer supports, albeit, differently than all other supporting browsers.</p>
<p class="testA">Because I am browser support table happy, here is the @font-face browser support table:</p>
<table>
<tr>
<th scope="col">CSS Property</th>
<th scope="col">IE6</th>
<th scope="col">IE7</th>
<th scope="col">IE8</th>
<th scope="col">Safari</th>
<th scope="col">iPhone</th>
<th scope="col">Chrome</th>
<th scope="col">Firefox</th>
<th scope="col">Opera</th>
</tr>
<tr>
<th scope="row">@font-face</th>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td class="good">3.2</td>
<td class="bad">&nbsp;</td>
<td class="iffy">4.0.249.78</td>
<td class="good">3.5</td>
<td class="good">10</td>
</tr>
<tr>
<th scope="row">format</th>
<td class="good">EOT</td>
<td class="good">EOT</td>
<td class="good">EOT</td>
<td class="good">TTF/OTF</td>
<td class="bad">
    <span class="good">3.1 supports SVG</span></td>
<td class="iffy">TTF/OTF support added 1/25/10<br />
      <span class="good">SVG supported by default</span></td>
<td class="good">TTF/OTF</td>
<td class="good">TTF/OTF</td>
</tr>
</table>
<p>* SVG is supported, but it&#8217;s a larger file size</p>
<h3>Google Chrome and @font-face:</h3>
<p>Google Chrome actually does support @font-face, but it was turned off by default until version 4.0.249.78 released on 1/25/20. Chrome has supporte SVG fonts for a while now.</p>
<p>While developers have been able to turn on @font-face support in Chrome in their own environment, only Chrome users who have updated to the January 25, 2010 release have it on by default. Google chrome users tend to be quick at updating, but stats don&#8217;t indicate the version number, so as of right now you can&#8217;t assume that Chrome has @font-face turned ON as the default settings for most users. Like with all site enhancement features, feel free to include fonts of type TTF/OTF, but make sure to pick a font backup that degrades nicely.</p>
<p>Note: Digging deeper, I found <a href="http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master">Becoming a font embedding master</a> which both explains a link on where you can convert <a href="http://code.google.com/p/ttf2eot/">TTF2EOT</a> so you can display similarly on IE than on good browsers (yeah, I said it) and <a href="http://xmlgraphics.apache.org/batik/tools/font-converter.html">exporting to SVG</a> for font support on iPhone 3.1, Chrome 2 &#038; 3, and 4 less than 4.0.249.78, and Opera 9 (your SVG font will work in Opera 10 and future versions of FF, Chrome, iPhone and Safari as well). Also check out <a href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel</a> to convert your font files to differing formats (EOT, SVG, <a href="http://people.mozilla.com/~jkew/woff/woff-spec-latest.html">WOFF</a>) for greater browser support. WOFF is a new format that Mozilla is hoping will become the browser standard. It is supported in FireFox only, as of FF3.6</p>
<h3>Internet Explorer and @font-face:</h3>
<p>Internet Explorer has been implementing @font-face support since version 4*.  In any event, it is defintely supported in IE6, IE7 and IE8. However, their implementation relies on Embedded Open Type (.eot), a proprietary format, which no other browsers use. To make IE users happy (which some could argue you shouldn&#8217;t, as a method to encourage them to upgrade), import EOT fonts in addition to TTF/OTF fonts, and included them as &quot;fall backs&quot; in the font family declaration (discussed in @font-face implementation below) . <a href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel</a> is a place where you can convert fonts you can legally distribute to EOT (and SVG) format.</p>
<p>* Note: Most people say original support of @font-face was IE5. I am not sure and I am not going to pull out my 286 to check. However, with a search, I found that IE4 had a few rendering issues, like not rendering anything on the page until the font was downloaded, so I am sticking with 4.</p>
<h2>@font-face implementation</h2>
<p>The syntax for the @font-face implemenation is:</p>
<pre class="code">
@font-face {
  font-family: yourNameForTheFont; /* required */
  src: source;						/* required */
  font-weight: weight;				/* optional */
  font-style: style;				/* optional */
}
</pre>
<p>
The font-family name can be anything you make up. I like to make it one word, for ease of entering it correctly as a value of the font-family property of a CSS selector later.</p>
<h4>Declaring  font-family source(s):</h4>
<p>The source can take several formats. In addition, you can declare more than one source. If the browser doesn&#8217;t find the first source, it will go for the next source, and so on, until it either finds a source, or it runs out of sources. Example formats include:</p>
<pre class="code">@font-face {
     font-family: curlyQ;
     src: url('../fonts/makeUpSomethingElse.eot');
     src: local('Edwardian Script ITC'),
          url('../fonts/EdwrdScrpItc') format('opentype'),
          url('../fonts/GaelicWimsy') format('svg'),
          url(data:font/otf;base64,T1RUTMillIONsOfLETteRsInaROW12fAtGrrYUUUUBx);
}</pre>
<p>In the above example, I&#8217;ve listed 5 sources. A bit excessive, but I wanted to explain those five components, so I made an excessive example.</p>
<p>The first declaration is for IE. IE ignores local, which is the first declaration in the second listing. In this way, IE only downloads what it needs and doesn&#8217;t download stuff it doesn&#8217;t understand. </p>
<p>Next I declare a font local to the user&#8217;s machine: <code>local('Edwardian Script ITC')</code>**. This looks for the font file locally on the site visitors computer. IE ignores <code>local</code>, which is great, since it will then ignore the other stuff it doesn&#8217;t understand. If you don&#8217;t have a <code>local</code> font style to declaration, it is OK. IE also doesn&#8217;t understand the multiple listings or the format, so as long as you include local, more than one declaration or a declaration with a format suggestions,  IE will do o.k. IE will either ignore in the case of local, or misunderstand it, if there is a format or more than one declaration withing a property/value pair.</p>
<p>If your suggested format is incorrect, as long as the file is an understood format, it should work in Safari, Opera and Firefox.</p>
<p>The next example looks for a file in the SVG format. This is what you are feeding to Chrome and Opera 9. </p>
<p>The last example is a data example, cut way short. Actual fonts will have a few thousand characters. Similar to how you can include a data source for images, you can include them for fonts. TypeKit (described below) actually serves their fonts up in data format to Firefox and Safari, and serves EOT for IE.</p>
<p>**Note: Watch this page become the first google results for Edwardian Script. That would be funny.  None of these examples are actually meant to work. I made the URLs and file names up.</p>
<h4>Applying imported fonts with CSS selectors</h4>
<p>Once the font is declared using the @font-face syntax, you can then refer to it as you would helvetica, arial, etc. Using the example above:</p>
<pre class="code">h3 {
    font-family: yourNameForTheFont, curlyQ, arial, helvetica, sans-serif;
}
</pre>
<p>Note that I have included two imported font family names. That is legal. Note that I have also included common fonts and a default font. That is HIGHLY recommended.</p>
<h3>TypeKit</h3>
<p class="test3">While the TypeKit website indicates support for Firefox 3.5+, Safari 3.4+ and all versions of IE, parsing the TypeKit javascript, they have support for the following browser engine versions:</p>
<table>
<tr>
<th scope="col">Browser Type</th>
<th scope="col">Version</th>
</tr>
<tr>
<th scope="row">Gecko</th>
<td class="good">1.9.1</td>
</tr>
<tr>
<th scope="row">Safari</th>
<td class="good">525.13</td>
</tr>
<tr>
<th scope="row">Chrome</th>
<td class="iffy">
<p>4.249.4<br />
    supported by TypeKit.<br />
      Chrome has @font-face support turned off by default</p>
</td>
</tr>
<tr>
<th scope="row">IE</th>
<td class="good">6.0</td>
</tr>
<tr>
<th scope="row">iPhone</th>
<td class="bad">specifically excluded in Typekit</td>
</tr>
<tr>
<th scope="row">Opera</th>
<td class="bad">not included in Typekit, though Opera Supports @font-face</td>
</tr>
</table>
<p>However, I am reading obfuscated code, so I could be talking out of my tushy. I did test in those browsers (not necessarily those versions, but those browsers), and it works in all except iPhone.</p>
<p class="testB">The way TypeKit works is you join TypeKit, enter the domain you want to use TypeKit on (you&#8217;re only allowed one domain for the free version), and select the fonts you would like to enable for that domain. TypeKit provides you with a link to a script file and a javascript snippet to add to your document &lt;head&gt;. TypeKit also provides you with a class that you can add to elements that you want to have the font, and provides you with a snippet of CSS code for the font-family property that you can sprinkle your CSS with for selectors where you want to use the TypeKit font. </p>
<p>The TypeKit javascript that you attach to your code basically does a LOT of browser sniffing, and only serves up to Gecko, Safari (not iPhone), Chrome and IE6+. Since it is sniffing, it doesn&#8217;t serve up any CSS to browsers not in the sniffing. So, while Opera10 does support @font-face, TypeKit does not.</p>
<h3>Microsoft WEFT</h3>
<p>The Microsoft WEFT is a free utility to create linked font objects. WEFT font objects are compressed and are privately installed by IE in a way that is inaccessible to other applications on the computer and other websites. WEFT supports OpenType (OTF) and TrueType (TTF) fonts in TrueType (TTF) format. </p>
<h3>Legalese</h3>
<p>The main issue with @font-face is the ownership of the fonts. Make sure you are legally allowed to upload and share a font before using @font-face, as when you embed a font, that is what you are doing: sharing a file. Just like music, for most fonts it is illegal to upload and share without proper attribution and/or payment. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Web Development for the iPhone: HTML, CSS &#038; JS Support</title>
		<link>http://www.evotech.net/blog/2009/12/web-development-for-the-iphone-html-css-support/</link>
		<comments>http://www.evotech.net/blog/2009/12/web-development-for-the-iphone-html-css-support/#comments</comments>
		<pubDate>Sun, 06 Dec 2009 04:27:56 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Accessibility]]></category>

		<category><![CDATA[Best Practices]]></category>

		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[CSS (including hacks)]]></category>

		<category><![CDATA[Character Entities]]></category>

		<category><![CDATA[DTD]]></category>

		<category><![CDATA[HTML]]></category>

		<category><![CDATA[IE7]]></category>

		<category><![CDATA[InvoiceApp]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Web Development]]></category>

		<category><![CDATA[contactApp]]></category>

		<category><![CDATA[firebug]]></category>

		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=88</guid>
		<description><![CDATA[
.good {background-color:#00CC00; }
.bad {background-color:#FF0000;}
.iffy {background-color:#FFFF00;}
.selectors {float: left; width:10em;}





Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I&#8217;ve also added the attributes [...]]]></description>
			<content:encoded><![CDATA[<style type="text/css">
.good {background-color:#00CC00; }
.bad {background-color:#FF0000;}
.iffy {background-color:#FFFF00;}
.selectors {float: left; width:10em;}
</style>
<div style="float: right; padding: 0 0 20px 20px"><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 300x250, created 9/2/09 */
google_ad_slot = "4342979058";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<p>Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I&#8217;ve also added the attributes that each element supports. I didn&#8217;t include id, class, style, dir &amp; title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.</p>
<ul>
<li><a href="#iphone1">iPhone Support for CSS3 Selectors</a></li>
<li><a href="#iphone1b">iPhone Support for CSS3 properties</a></li>
<li><a href="#iphone2">iPhone &amp; Safari Support for HTML elements, including HTML5</a></li>
<li><a href="#iphone3">HTML attributes for the iPhone and Safari</a></li>
<li><a href="#iphone4">Safari and iPhone Event Handlers</a></li>
<li><a href="#iphone5">Other iPhone and Safari Resources</a></li>
</ul>
<h2 id="iphone1">iPhone Support for CSS3 Selectors</h2>
<p>All CSS Selectors are supported by Safari on the iPhone. See <a href="http://www.evotech.net/blog/2009/02/css-browser-support/">CSS browser support</a> for a chartcomparison of all the selectors. Selectos include:</p>
<ul class="selectors">
<li>*</li>
<li>E</li>
<li>.class</li>
<li>#id</li>
<li>E F</li>
<li>E &gt; F</li>
<li>E + F</li>
<li>E[attribute]</li>
<li>E[attribute=value]</li>
<li>E[attribute~=value]</li>
<li>E[attribute|=value]</li>
</ul>
<ul class="selectors">
<li>:first-child</li>
<li>:link</li>
<li>:visited</li>
<li>:lang()</li>
<li>:before</li>
<li>::before</li>
<li>:after</li>
<li>::after</li>
<li>:first-letter</li>
<li>::first-letter</li>
<li>:first-line</li>
<li>::first-line</li>
</ul>
<ul class="selectors">
<li>E[attribute^=value]</li>
<li>E[attribute$=value]</li>
<li>E[attribute*=value]</li>
<li>E ~ F</li>
<li>:root</li>
<li>:last-child</li>
<li>:only-child</li>
<li>:nth-child()</li>
<li>:nth-last-child()</li>
<li>:first-of-type</li>
<li>:last-of-type</li>
<li>:only-of-type</li>
<li>:nth-of-type()</li>
<li>:nth-last-of-type()</li>
</ul>
<ul class="selectors">
<li>:empty</li>
<li>:not()</li>
<li>:target</li>
<li>:enabled</li>
<li>:disabled</li>
<li>:checked</li>
<li><a href="http://www.evotech.net/blog/2009/02/css-browser-support/">see them all</a></li>
</ul>
<h2 id="iphone1b"  style="clear:both">iPhone Support for CSS3 properties</h2>
<p>Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all <a href="http://www.evotech.net/blog/2009/05/css-properties-values-and-browser-support/">CSS2.1 properties and values by browser </a>for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:</p>
<p style="clear:both">Some CSS3 including the following, which will be discussed in future blog posts.</p>
<ul>
<li>hsl(), rgba(), hsla() color support</li>
<li>native rounded corners (<a href="http://www.evotech.net/blog/?s=iphone#saf_rc">-webkit-border-radius</a>)</li>
<li>IE box model (-webkit-box-sizing) </li>
<li>Shadows on text (text-shadow was in CSS2.0)</li>
<li>Shadows on elements (-webkit-box-shadow)</li>
<li><a href="http://www.evotech.net/blog/?s=iphone#saf_mbi">multiple background images</a></li>
<li>opacity /gradient transparency</li>
<li>@font-face web fonts</li>
<li>CSS Animation </li>
<li>Media Queries</li>
<li>namespaces</li>
</ul>
<h2 id="iphone2">iPhone &amp; Safari Support for HTML elements, including HTML5</h2>
<h3 id="iphone3">includes HTML attributes for the iPhone and Safari</h3>
<p>Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.</p>
<table class="htmlelements" border="1">
<thead>
<tr>
<th width="103"  scope="col">&lt;ELEMENT&gt;</th>
<th width="170"  scope="col">Element Name</th>
<th width="53"  scope="col">Safari<br />
      Version</th>
<th width="84"  scope="col">iPhone Support</th>
<th width="717"  scope="col">Attributes (and Notes in italic)</th>
</tr>
</thead>
<tbody style="height:500px; overflow-y:scroll; overflow-x:hidden">
<tr>
<th colspan="5" scope="col">Elements occuring outside the body element</th>
</tr>
<tr>
<th scope="row">&lt;!DOCTYPE&gt;</th>
<td>Document Type Declaration</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;html&gt;</th>
<td>html</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>manifest (Saf. 4, iphone 2.2)</td>
</tr>
<tr>
<th scope="row">&lt;head&gt;</th>
<td>document head</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>profile</td>
</tr>
<tr>
<th scope="row">&lt;base /&gt;</th>
<td>url base for links</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>href, target</td>
</tr>
<tr>
<th scope="row">&lt;link /&gt;</th>
<td>link</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>charset, href, media, rel, rev, target</td>
</tr>
<tr>
<th scope="row">&lt;meta /&gt;</th>
<td>meta</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>content, name, http-equiv, scheme</td>
</tr>
<tr>
<th scope="row">&lt;style&gt;</th>
<td>style</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>media, type</td>
</tr>
<tr>
<th scope="row">&lt;script&gt;</th>
<td>script</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>charset, defer, language, src, type</td>
</tr>
<tr>
<th scope="row">&lt;title&gt;</th>
<td>document title</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th colspan="5" scope="row">Elements Occuring in the &lt;body&gt; in HTML 4.01 and HTML5</th>
</tr>
<tr>
<th scope="row">&lt;body&gt;</th>
<td>document body</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>bgproperties (value: fixed)</td>
</tr>
<tr>
<th scope="col">&lt;a&gt;</th>
<td scope="col">Anchor</td>
<td class="good" scope="col">1.0</td>
<td class="good" scope="col">1.0</td>
<td scope="col"><em>different event handlers for iPhone than Safari</em><br />
      accesskey, charset, href (required), hreflang, rel, rev, shape (rect/cirlce/poly), target (deprecated, but useful), type</td>
</tr>
<tr>
<th scope="row">
<p>&lt;abbr&gt;</p>
</th>
<td>Abbreviation</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td><em>title shows on hover in Safari</em></td>
</tr>
<tr>
<th scope="row">&lt;acronym&gt;</th>
<td>acronym</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td><em>title shows on hover in Safari</em></td>
</tr>
<tr>
<th scope="row">&lt;address&gt;</th>
<td>address</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td><em>italic</em></td>
</tr>
<tr>
<th scope="row">&lt;area&gt;</th>
<td>image map area</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accesskey, alt (required), coords, href (required), hreflang, shape (rect/cirlce/poly), target</td>
</tr>
<tr>
<th scope="row">&lt;article&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;aside&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;audio&gt;</th>
<td>audio</td>
<td class="good">3.1</td>
<td class="good">3.0</td>
<td><em>HTML5: Similar to object, can nest sources and content to cascade until supported found.<br />
    Audio support includes AAC,  M4A, MP3, Wave, AIFF , Apple Lossless, Quicktime, but not OGG;<br />
      </em><br />
      autoplay, controls, end, loopend, loopstart, playcount, src, start</td>
</tr>
<tr>
<th scope="row">&lt;bdo&gt;</th>
<td>bi-directional override</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;blockquote&gt;</th>
<td>long quote</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>cite</td>
</tr>
<tr>
<th scope="row">
<p>&lt;br&gt;</p>
</th>
<td>break return or forced line break</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;button&gt;</th>
<td>push button</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accesskey, disabled, type, value</td>
</tr>
<tr>
<th scope="row">&lt;canvas&gt;</th>
<td>canvas drawing region</td>
<td class="good">1.3</td>
<td class="good">1.0</td>
<td><em>HTML5:     Stroke and fill colors, rgba/hsla colors, paths, rectangles,  shadows, gradients, patterns, translations, rotation and scale</em></td>
</tr>
<tr>
<th scope="row">&lt;caption&gt;</th>
<td>caption</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;cite&gt;</th>
<td>citation</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;code&gt;</th>
<td>code</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;col /&gt;</th>
<td>column</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>char, charoff, span</td>
</tr>
<tr>
<th scope="row">&lt;colgroup&gt;</th>
<td>column group</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>char, charoff, span</td>
</tr>
<tr>
<th scope="row">&lt;dd&gt;</th>
<td>definition description</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;del&gt;</th>
<td>delete</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>datetime</td>
</tr>
<tr>
<th scope="row">
<p>&lt;dfn&gt;</p>
</th>
<td>definition</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;div&gt;</th>
<td>generic block element</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4.0)</td>
</tr>
<tr>
<th scope="row">&lt;dl&gt;</th>
<td>definition list</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;dt&gt;</th>
<td>definition term</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;em&gt;</th>
<td>emphasized text</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;fieldset&gt;</th>
<td>field set</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;figure&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;footer&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;form&gt;</th>
<td>form</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accept, accept-charset, action, enctype. method, target</td>
</tr>
<tr>
<th scope="row">&lt;frame /&gt;</th>
<td>frame</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>frameborder, longdesc, marginheight, marginwidth, noresize, scrolling (yes/no/auto), src</td>
</tr>
<tr>
<th scope="row">&lt;frameset&gt;</th>
<td>frameset</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>cols, rows</td>
</tr>
<tr>
<th scope="row">&lt;h1-6&gt;</th>
<td>headers</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;header&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;hgroup&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;hr /&gt;</th>
<td>horizontal rule</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;iframe&gt;</th>
<td>internal frame</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>frameborder, longdesc, marginheight, marginwidth, scrolling (yes/no/auto), src</td>
</tr>
<tr>
<th scope="row">&lt;img /&gt;</th>
<td>image</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>alt (required), composite, ismap, longdesc, src, usemap</td>
</tr>
<tr>
<th scope="row">&lt;input /&gt;</th>
<td>input</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accept, accesskey, alt, autocapitalize (iphone 1.1, values: on/off), autocomplete, autocorrect (iphone 1.1, values: on/off), autosave (safari), checked, disabled, incremental (safari), ismap, max, maxlength, min, placeholder, results, src, type, usemap, value</td>
</tr>
<tr>
<th scope="row">&lt;ins&gt;</th>
<td>Insert</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>datetime</td>
</tr>
<tr>
<th scope="row">&lt;kbd&gt;</th>
<td>keyboard</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;keygen&gt;</th>
<td>key generation</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>challenge, keytype</td>
</tr>
<tr>
<th scope="row">&lt;label&gt;</th>
<td>label</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accesskey, for</td>
</tr>
<tr>
<th scope="row">&lt;legend&gt;</th>
<td>caption for fieldset</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accesskey</td>
</tr>
<tr>
<th scope="row">&lt;li&gt;</th>
<td>list item</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>type, value</td>
</tr>
<tr>
<th scope="row">&lt;map&gt;</th>
<td>image map</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;mark&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;meter&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;object&gt;</th>
<td>object</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>archive, classid, codetype, data, declare, loop, type, usemap</td>
</tr>
<tr>
<th scope="row">
<p>&lt;ol&gt;</p>
</th>
<td>ordered list</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>type</td>
</tr>
<tr>
<th scope="row">&lt;optgroup&gt;</th>
<td>option group</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>disabled, label</td>
</tr>
<tr>
<th scope="row">&lt;option&gt;</th>
<td>option</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>disabled, label, selected, value</td>
</tr>
<tr>
<th scope="row">&lt;p&gt;</th>
<td>paragraph</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;param&gt;</th>
<td>parameter</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>type, value, valuetype</td>
</tr>
<tr>
<th scope="row">&lt;pre&gt;</th>
<td>preformatted text</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;progress&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;q&gt;</th>
<td>inline quotation</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>cite</td>
</tr>
<tr>
<th scope="row">&lt;samp&gt;</th>
<td>sample computer code</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;select&gt;</th>
<td>option selector</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>disabled, multiple</td>
</tr>
<tr>
<th scope="row">&lt;source&gt;</th>
<td>&nbsp;</td>
<td class="good">3.1</td>
<td>&nbsp;</td>
<td><em>HTML5</em><br />
      media</td>
</tr>
<tr>
<th scope="row">&lt;span&gt;</th>
<td>span (generic non-semantic container)</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4)</td>
</tr>
<tr>
<th scope="row">&lt;strong&gt;</th>
<td>strong emphasized text</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;sub&gt;</th>
<td>subscript</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;sup&gt;</th>
<td>superscript</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;table&gt;</th>
<td>data table</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>frame (values: above, below, hsides, vsides, rhs, lhs, box, border), rules (values: none, groups, rows, cols, and all), summary</td>
</tr>
<tr>
<th scope="row">&lt;tbody&gt;</th>
<td>table body</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>char, charoff</td>
</tr>
<tr>
<th scope="row">&lt;td&gt;</th>
<td>table data cell</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>abbr, axis, char, charoff, colspan, headers, rowspan, scope</td>
</tr>
<tr>
<th scope="row">&lt;textarea&gt;</th>
<td>text area</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>accesskey, cols, disabled, readonly, rows, wrap</td>
</tr>
<tr>
<th scope="row">&lt;time&gt;</th>
<td>&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td class="iffy">&nbsp;</td>
<td><em>HTML5</em></td>
</tr>
<tr>
<th scope="row">&lt;tfoot&gt;</th>
<td>table footer</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>char, charoff</td>
</tr>
<tr>
<th scope="row">&lt;th&gt;</th>
<td>table header cell</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>abbr, axis, char, charoff, colspan, headers, rowspan, scope</td>
</tr>
<tr>
<th scope="row">&lt;thead&gt;</th>
<td>table head</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>char, charoff</td>
</tr>
<tr>
<th scope="row">&lt;tr&gt;</th>
<td>table row</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>char, charoff</td>
</tr>
<tr>
<th scope="row">&lt;ul&gt;</th>
<td>unordered list</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;var&gt;</th>
<td>variable</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;video&gt;</th>
<td>video</td>
<td class="good">3.1</td>
<td class="good">3.0</td>
<td><em>HTML5</em><br />
      autoplay, controls, end, loopend, loopstart, playcount, poster, src, start</td>
</tr>
<tr>
<th colspan="5" scope="row">Elements you should not be using, that are still valid</th>
</tr>
<tr>
<th scope="row">&lt;tt&gt;</th>
<td>teletype</td>
<td rowspan="5" class="good">1.0</td>
<td rowspan="5" class="good">1.0</td>
<td rowspan="5">&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;i&gt;</th>
<td>italic</td>
</tr>
<tr>
<th scope="row">&lt;b&gt;</th>
<td>bold</td>
</tr>
<tr>
<th scope="row">&lt;big&gt;</th>
<td>big font</td>
</tr>
<tr>
<th scope="row">&lt;small&gt;</th>
<td>small font</td>
</tr>
<tr>
<th scope="row">&lt;noframes&gt;</th>
<td>no frames</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;noscript&gt;</th>
<td>no script</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th colspan="5" scope="row">Elements that are deprecated or were never in a W3C spec, but you may still see on older websites</th>
</tr>
<tr>
<th scope="row">&lt;applet&gt;</th>
<td>applet</td>
<td class="good">1.0</td>
<td class="bad">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;center&gt;</th>
<td>center</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;dir&gt;</th>
<td>direction</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;embed&gt;</th>
<td>embed</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td><em>use object instead</em><br />
      hidden, loop, pluginpage, pluginspage, pluginurl</td>
</tr>
<tr>
<th scope="row">&lt;font&gt;</th>
<td>font</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;layer&gt;</th>
<td>layer</td>
<td class="good">1.0</td>
<td class="iffy">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;listing&gt;</th>
<td>listing</td>
<td class="good">3.0</td>
<td class="good">1.0</td>
<td><em>use &lt;pre&gt; instead. from HTML 3.2</em></td>
</tr>
<tr>
<th scope="row">&lt;marquee&gt;</th>
<td>,arquee</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>behavior, direction, loop, scrollamount, scrolldelay, truespeed</td>
</tr>
<tr>
<th scope="row">&lt;menu&gt;</th>
<td>menu</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;nobr&gt;</th>
<td>no break</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;noembed&gt;</th>
<td>no embed</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;nolayer&gt;</th>
<td>no layer</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;plaintext&gt;</th>
<td>plaintext</td>
<td class="iffy">1.0</td>
<td class="iffy">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;strike&gt;</th>
<td>strikethrough</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td><em>use &lt;del&gt;</em></td>
</tr>
<tr>
<th scope="row">&lt;u&gt;</th>
<td>underline</td>
<td class="good">&nbsp;</td>
<td class="good">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;wbr&gt;</th>
<td>with breaks</td>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&lt;xmp&gt;</th>
<td>sequence of literal characters</td>
<td class="good">1.o</td>
<td class="good">1.0</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 728x90, created 8/13/09 */
google_ad_slot = "2305706550";
google_ad_width = 728;
google_ad_height = 90;
google_hints = 'iphone, xhtml, css, javascript, programming, accessibility, search engine optimization'
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>
<h2 id="iphone3">Safari and iPhone Event Handlers:</h2>
<table border="1">
<tr>
<th>Event</th>
<td>Safari</td>
<td>iPhone</td>
<td>Explanation</td>
</tr>
<tr>
<th>
onabort</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>When an image element  is aborted during load. (for &lt;img /&gt; elements)</td>
</tr>
<tr>
<th>
onbeforecopy</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>before  the  element is copied.</td>
</tr>
<tr>
<th>
onbeforecut</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>before  the  element is cut.</td>
</tr>
<tr>
<th>
onbeforepaste</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>before  the  element has something pasted into it.</p>
</td>
</tr>
<tr>
<th>
onbeforeunload</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>before  the  element is unloaded from the page.</p>
</td>
</tr>
<tr>
<th>
onblur</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element loses focus.</p>
</td>
</tr>
<tr>
<th>
onchange</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element changes its value.</p>
</td>
</tr>
<tr>
<th>
onclick</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element is clicked.</p>
</td>
</tr>
<tr>
<th>
oncontextmenu</th>
<td class="good">1.1</td>
<td>&nbsp;</td>
<td>when  the  element is right-clicked or when the mouse button is held down long enough to generate a contextual menu.</p>
</td>
</tr>
<tr>
<th>
oncopy</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element is copied.</p>
</td>
</tr>
<tr>
<th>
oncut</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element is cut.</p>
</td>
</tr>
<tr>
<th>
ondblclick</th>
<td class="good">1.0</td>
<td>&nbsp;</td>
<td>when  the  element is double-clicked.</p>
</td>
</tr>
<tr>
<th>
ondrag</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element is dragged.</p>
</td>
</tr>
<tr>
<th>
ondragend</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element is done being dragged.</p>
</td>
</tr>
<tr>
<th>
ondragenter</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when a drag has entered  the  element.</p>
</td>
</tr>
<tr>
<th>
ondragleave</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when a drag has left  the  element.</p>
</td>
</tr>
<tr>
<th>
ondragover</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when a drag is over  the  element.</p>
</td>
</tr>
<tr>
<th>
ondragstart</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element has started to be dragged.</p>
</td>
</tr>
<tr>
<th>
ondrop</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element is dropped.</p>
</td>
</tr>
<tr>
<th>
onerror</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element has an error in loading.</p>
</td>
</tr>
<tr>
<th>
onfocus</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element gets focus.</p>
</td>
</tr>
<tr>
<th>
ongesturechange</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When fingers are moved during a gesture.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
ongestureend</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When the gesture ends (when there are 1 or 0 fingers touching the surface).</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
ongesturestart</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When two or more fingers touch the surface.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
oninput</th>
<td class="good">1.3</td>
<td class="good">1.0</td>
<td>when text is entered into  the  element. </td>
</tr>
<tr>
<th>
onkeydown</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when a key is pressed over  the  element.</p>
</td>
</tr>
<tr>
<th>
onkeypress</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when a key is pressed and released over  the  element.</p>
</td>
</tr>
<tr>
<th>
onkeyup</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when a key is released over  the  element.</p>
</td>
</tr>
<tr>
<th>
onload</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element finishes loading.</p>
</td>
</tr>
<tr>
<th>
onmousedown</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when the mouse button is pressed over  the  element.</p>
</td>
</tr>
<tr>
<th>
onmousemove</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when a key is moved within  the  element.</p>
</td>
</tr>
<tr>
<th>
onmouseout</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when the mouse leaves  the  element.</p>
</td>
</tr>
<tr>
<th>
onmouseover</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when the mouse is over  the  element.</p>
</td>
</tr>
<tr>
<th>
onmouseup</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when the mouse button is released over  the  element.</p>
</td>
</tr>
<tr>
<th>
onmousewheel</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when the mouse wheel button is rotated.</p>
</td>
</tr>
<tr>
<th>
onorientationchange</th>
<td>&nbsp;</td>
<td class="good">1.1</td>
<td>
<p>When the orientation of the device changes.</td>
</tr>
<tr>
<th>
onpaste</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element is pasted.</p>
</td>
</tr>
<tr>
<th>
onreset</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  form element is reset.</p>
</td>
</tr>
<tr>
<th>
onresize</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  element is resized.</p>
</td>
</tr>
<tr>
<th>
onscroll</th>
<td class="good">1.2</td>
<td class="good">1.0</td>
<td>when  the  element is scrolled (a text box would use this, for example).</td>
</tr>
<tr>
<th>
onsearch</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>
<p>when a search is performed.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
onselect</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when text within  the  element is selected.</p>
</td>
</tr>
<tr>
<th>
onselectstart</th>
<td class="good">1.3</td>
<td>&nbsp;</td>
<td>when  the  element begins to be selected. You can use this to prevent selections.</p>
</td>
</tr>
<tr>
<th>
onsubmit</th>
<td class="good">1.0</td>
<td class="good">1.0</td>
<td>when  the  form element is submitted.</p>
</td>
</tr>
<tr>
<th>
ontouchcancel</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When the system cancels tracking for the touch.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
ontouchend</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When a given event lifts from the surface.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
ontouchmove</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When a finger for a given event moves on the surface.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
ontouchstart</th>
<td>&nbsp;</td>
<td class="good">2.0</td>
<td>
<p>When a finger for a given event touches the surface.</p>
<p>(proprietary)</td>
</tr>
<tr>
<th>
onunload</th>
<td>&nbsp;</td>
<td class="good">2.1</td>
<td>when  the  element is unloaded from the page.</td>
</tr>
</table>
<p>&nbsp;</p>
<p id="iphone4">Other iPhone posts in my blog</p>
<ul>
<li><a href="http://www.evotech.net/blog/2009/09/iphone-screen-orientation-portrait-and-landscape/">iPhone Screen Orientation: portrait and landscape</a></li>
<li><a href="http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/">:hover pseudoclass for the iphone</a></li>
<li><a href="http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/">Web Development for the iPhone</a></li>
<li><a href="http://www.evotech.net/blog/2007/06/targeting-safari-30-with-css/">Safari 3.0 filter/hack</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2009/12/web-development-for-the-iphone-html-css-support/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Dreamweaver tip for screen shot creation</title>
		<link>http://www.evotech.net/blog/2009/10/dreamweaver-tip-for-screen-shot-creation/</link>
		<comments>http://www.evotech.net/blog/2009/10/dreamweaver-tip-for-screen-shot-creation/#comments</comments>
		<pubDate>Sat, 24 Oct 2009 23:08:36 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=86</guid>
		<description><![CDATA[I write a lot of tutorials. Really, really basic tutorials.  While I generally program in BBedit, Eclipse, vi, gEdit, NoteTab, or whatever makes sense at the moment, I write most of my tutorials and blog posts in Dreamweaver.  While this blog doesn&#8217;t contain many screen shots, my basic tutorials are filled with them.  I made [...]]]></description>
			<content:encoded><![CDATA[<p>I write a lot of tutorials. Really, really basic tutorials.  While I generally program in BBedit, Eclipse, vi, gEdit, NoteTab, or whatever makes sense at the moment, I write most of my tutorials and blog posts in Dreamweaver.  While this blog doesn&#8217;t contain many screen shots, my basic tutorials are filled with them.  I made a new discovery today that is going to make my tutorial writing so much easier. This may be old news for avid Dreamweaver users, but it&#8217;s new to me, so I thought I would share.</p>
<p>The Tip: <em>When you do a screen capture in Firefox (or any other open application) and you  go to Dreamweaver, pasting whatever is in memory (your screenshot) into Dreamweaver design view enables you to save and add your screen shot directly into your open page.</em></p>
<p>I&#8217;ve been spending a huge amount of time creating my tutorial images for my Community MX workshops in Fireworks.  I&#8217;ve successfully reduced the time to create screen shots.</p>
<div style="float: right; padding: 0 0 20px 20px"><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 300x250, created 9/2/09 */
google_ad_slot = "4342979058";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<p>Here are my steps:</p>
<ol>
<li>While in Firefox, I go into Firebug to alter the  text of what i want to take a screen shot of so I can anonymize my  email address and provide generic domain names. I don&#8217;t really own &#8220;you@yourdomain.com&#8221;. With Firebug, I can change all the email address examples, IP addresses, domain names, etc., to make them generic to hide from possible creeps who enjoy stalking in their spare time.  Using firebug to alter text is much faster than trying to create text that fits into the available space and matches the other text in an image editing program.</li>
<li>Then I use &#8220;screengrab&#8221;, another firefox extension, to take a screen shot of just the section of my Firefox. I could also use &#8220;grab&#8221; to capture a selection on my Mac.</li>
<li>Then, in Dreamweaver, I hit where I  want the picture added to my tutorial. I get the Fireworks style &#8220;Export image as&#8221; and &#8220;Save&#8221; screens, enabling me to save the image to my images folder.   If i am in design view, I also get prompted for an alt attribute, and  the image is added to the page. If I am in code view, the image is not  actually added to the page.</li>
</ol>
<p>Maybe this is old news, but I just discovered it (I don&#8217;t use DW much).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2009/10/dreamweaver-tip-for-screen-shot-creation/feed/</wfw:commentRss>
		</item>
		<item>
		<title>iPhone Screen Orientation: Portrait and Landscape</title>
		<link>http://www.evotech.net/blog/2009/09/iphone-screen-orientation-portrait-and-landscape/</link>
		<comments>http://www.evotech.net/blog/2009/09/iphone-screen-orientation-portrait-and-landscape/#comments</comments>
		<pubDate>Fri, 11 Sep 2009 07:22:00 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[Character Entities]]></category>

		<category><![CDATA[HTML]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Web Development]]></category>

		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=68</guid>
		<description><![CDATA[When you tilt your iPhone, the screen changes orientation.  The website you developed for the default portrait orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.
In my original iPhone post, I instructed detecting the width of the screen at regular intervals [...]]]></description>
			<content:encoded><![CDATA[<p>When you tilt your iPhone, the screen changes orientation.  The website you developed for the default <var>portrait</var> orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.</p>
<p>In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the <var>onOrientationChange</var> method to change the class of your body based on the page&#8217;s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.</p>
<p>What you want to include is the unobstrusive javascript equivalent of:</p>
<pre>&lt;body onOrientationChange="changeMyClass();"&gt;</pre>
<p>In this case, we&#8217;ll call</p>
<pre>switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = &#8216;portrait&#8217;;
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName(&#8217;body&#8217;)[0].className = &#8216;landscape&#8217;;
       break;
} //end switch</pre>
<p><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 728x90, created 8/13/09 */
google_ad_slot = "2305706550";
google_ad_width = 728;
google_ad_height = 90;
google_hints = 'iphone, xhtml, css, javascript, programming, accessibility, search engine optimization'
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2009/09/iphone-screen-orientation-portrait-and-landscape/feed/</wfw:commentRss>
		</item>
		<item>
		<title>IE6 &#038; IE7  label bug (implicit label bug)</title>
		<link>http://www.evotech.net/blog/2009/09/ie6ie7-implicit-label-bug/</link>
		<comments>http://www.evotech.net/blog/2009/09/ie6ie7-implicit-label-bug/#comments</comments>
		<pubDate>Thu, 10 Sep 2009 18:01:37 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[IE7]]></category>

		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=83</guid>
		<description><![CDATA[HTML and XHTML specifications allow both implicit and explicit labels. However,  IE6 and IE7 do not correctly handle implicit labels. When including implicit labels, IE6 and IE7 treat the input as one label and the text within the element as a second label. In other words, if you include padding, margin, bakcground images, or, in [...]]]></description>
			<content:encoded><![CDATA[<p>HTML and XHTML specifications allow both implicit and explicit labels. However,  IE6 and IE7 do not correctly handle implicit labels. When including implicit labels, IE6 and IE7 treat the input as one label and the text within the element as a second label. In other words, if you include padding, margin, bakcground images, or, in the case of IEs, hasLayout like &quot;zoom&quot;, the styles will be added to both the input part of the label and to the text part of the label.</p>
<p>For example, &lt;label&gt;First name &lt;input type=&#8221;text&#8221; name=&#8221;firstname&#8221;&gt;&lt;/label&gt;. IE6 and IE7 interpret the code as if you wrote &lt;labe&gt;First name&lt;/label&gt;&lt;label&gt;&lt;input type=&#8221;text&#8221; name=&#8221;firstname&#8221;&gt;&lt;/label&gt;.</p>
<p style="clear: both;">
<div style="float: right; padding: 0 0 20px 20px">
<script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 300x250, created 9/2/09 */
google_ad_slot = "4342979058";
google_ad_width = 300;
google_ad_height = 250;
google_hints = "microsoft internet explorer, web development, css, javascript, html, programming"
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style="float: left">
<p>This is how IE6 and IE7 render:<br />
<img src="http://evotech.net/blog/images/label_ie7.gif" alt="implicit label in IE7" /></p>
<p style="clear: both;">
This is how it should be rendered:<br />
<img src="http://evotech.net/blog/images/label_ie8.gif" alt="implicit label in IE8" />
</p>
</div>
<p style="clear: both">
Generally, this isn&#8217;t a major issue, which is probably why I couldn&#8217;t find documentation on this bug. However, if you want to put a background image between the input and the text,  if you want to put a border around the label, or if the label is floated left and you need to give &quot;hasLayout&quot; for IE6, that&#8217;s where it gets tricky.</p>
<p>(note: if you use zoom: 1 on your label, the label will display on two lines: one for the input, and the other for the text)</p>
<p>The implicit label is valid according to the w3c. See the <a href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL">W3C Label Specifications</a>. The w3c states &#8220;<span class="index-inst" title="label::implicit association with control"><a name="idx-label-1">To associate a label</a></span> with another control implicitly, the control element must be within the contents of the <a class="noxref" href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL"><samp class="einst">LABEL</samp></a> element. In this case, the <a class="noxref" href="http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL"><samp class="einst">LABEL</samp></a> may only contain one control element. The label itself may be positioned before or after the associated control.&#8221;</p>
<p>Some may argue &#8220;just use explicit labels&#8221;, and there are accessibility arguments around that. However, old versions of JAWS , in forms mode, did not read the label for                   implicit labels on checkboxes and radio fields. I believe that has been fixed.</p>
<p>My fix was inane, yet valid. I assume this is such an esoteric bug that I don&#8217;t need to create recommendations on fixing it. I just wanted to document it in case someone else comes across this bug</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 728x90, created 8/13/09 */
google_ad_slot = "2305706550";
google_ad_width = 728;
google_ad_height = 90;
google_hints = "microsoft internet explorer, web development, css, javascript, html, programming"
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2009/09/ie6ie7-implicit-label-bug/feed/</wfw:commentRss>
		</item>
		<item>
		<title>More CSS, XHTML and JavaScript at Community MX</title>
		<link>http://www.evotech.net/blog/2009/09/more-css-xhtml-and-javascript-at-community-mx/</link>
		<comments>http://www.evotech.net/blog/2009/09/more-css-xhtml-and-javascript-at-community-mx/#comments</comments>
		<pubDate>Wed, 09 Sep 2009 19:55:59 +0000</pubDate>
		<dc:creator>Estelle Weyl</dc:creator>
		
		<category><![CDATA[CSS (including hacks)]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Web Development]]></category>

		<category><![CDATA[firebug]]></category>

		<guid isPermaLink="false">http://www.evotech.net/blog/?p=81</guid>
		<description><![CDATA[I have been somewhat prolific as a technical writer for Community MX over the past 12 months. If you are interested in any of the articles, they are listed below. I will add new articles to this list as they get published (and as I get around to it). While Community MX is a subscription [...]]]></description>
			<content:encoded><![CDATA[<p>I have been somewhat prolific as a technical writer for Community MX over the past 12 months. If you are interested in any of the articles, they are listed below. I will add new articles to this list as they get published (and as I get around to it). While Community MX is a subscription based website, you can get a one week free trial, and several of the articles (as noted below) are accessible without a subscription, and without logging in.</p>
<div style="float: right; padding: 0 0 20px 20px"><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 300x250, created 9/2/09 */
google_ad_slot = "4342979058";
google_ad_width = 300;
google_ad_height = 250;
google_hints = "microsoft internet explorer, web development, css, javascript, html, programming"
// --></script><br />
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script></div>
<p>Most articles are part of a series. These four random ones are standalone:</p>
<ul>
<li> <a href="http://www.communitymx.com/abstract.cfm?cid=F7E7C">Clearing Floats Without Touching Your HTML</a> - <em>30-Sep-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=7D9B1">Browser Support: What should I test?</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>31-Oct-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=75D3D">Extracting Images from Flash Files</a> — <em>17-Feb-09</em></li>
<li><em><a href="http://communitymx.com/content/article.cfm?cid=AEB6A">Creating rounded corners without touching your HTML (including IE)</a> </em><img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /><em>- 18-Sep-09 </em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=4E137">JavaScript Variable Scope: Local and Global Variables</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>05-Feb-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=40C92">CSS: All Browsers Can Be Created Equally</a> — <em>11-Jul-08</em></li>
</ul>
<p>There is a lot of interest in my <a href="http://www.evotech.net/blog/2009/03/ie8-css-support/">IE8</a> post. It was a basic post, and I couldn&#8217;t get my butt in gear to write more. By writing for community MX, I kind of forced myself to research IE8. This seried has just begun&#8230; there will be a bunch more.</p>
<ul>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=C9E77">IE8 - The Good, the Bad, the Ugly (and Pretty)</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>22-Jul-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=3FAF0">IE8 - The Good - CSS2.1 Selector Support</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>11-Aug-09</em></li>
<li><em>IE8 - The Good - CSS2.1 Properties and Values</em></li>
<li><em>IE8 - The bad - CSS3 and lack of support </em></li>
</ul>
<p>Based on my blog post on all<a href="http://www.evotech.net/blog/2008/11/xhtml-elements/"> XHTML elements, their attributes and their semantic meaning</a> that I was wrote for this blog, I wrote an 18 part series going into each element in greater detail. The <a href="http://www.communitymx.com/abstract.cfm?cid=D1EFD">Object</a> and <a href="http://www.communitymx.com/abstract.cfm?cid=82A7A">input element</a> (free) ones are the most intersting. The <a href="http://www.communitymx.com/abstract.cfm?cid=A565F">table of XHTML elements</a> (also free) is the most useful:</p>
<ul>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=B81FE">Semantic XHTML - Part 1: The Required Elements</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>16-Sep-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=D21C2">Semantic XHTML - Part 2: Elements Within the &lt;head&gt; Element</a> — <em>01-Oct-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=FE91B">Semantic XHTML - Part 3: Common Block Level Elements</a> — <em>13-Oct-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=44C0B">Semantic XHTML - Part 4:  List Elements</a> — <em>29-Oct-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=26529">Semantic XHTML - Part 5: Table Elements</a> — <em>13-Nov-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=97055">Semantic XHTML - Part 6: Inline Elements</a> — <em>24-Nov-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=E8A8E">Semantic XHTML - Part 7: The Phrase Elements</a> — <em>03-Dec-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=30210">Semantic XHTML - Part 8: Empty Elements</a> — <em>08-Dec-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=00DA9">Semantic XHTML - Part 9: The Image Element</a> — <em>12-Dec-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=2FE33">Semantic XHTML - Part 10: Image Maps</a> — <em>05-Jan-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=D1EFD">Semantic XHTML - Part 11: The Obj</a>ec<a href="http://www.communitymx.com/abstract.cfm?cid=D1EFD">t Element</a> — <em>02-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=0F67C">Semantic XHTML - Part 12: The FORM Element</a> — <em>09-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=82A7A">Semantic XHTML - Part 13: The INPUT Element</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>11-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=0AABB">Semantic XHTML - Part 14: TEXTAREA and BUTTON Elements</a> — <em>17-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=D7F5A">Semantic XHTML - Part 15: Drop Down Menus</a> — <em>19-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=EF257">Semantic XHTML - Part 16: Organizing Forms</a> — <em>25-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=DC73F">Semantic XHTML - Part 17: Non-Semantic Elements</a> — <em>26-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=80BA3">Semantic XHTML - Part 18: INS, DEL &amp; NOSCRIPT</a> — <em>31-Mar-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=A565F">Semantic XHTML - Table of XHTML Elements</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>21-Apr-09</em></li>
</ul>
<div style="float: right; padding: 0 0 20px 20px"><script type="text/javascript"><!--
google_ad_client = "pub-5095172600058476";
/* 300x250, created 9/2/09 */
google_ad_slot = "4342979058";
google_ad_width = 300;
google_ad_height = 250;
google_hints = "microsoft internet explorer, web development, css, javascript, html, programming"
//-->
// &#8211;&gt;
// &#8211;&gt;
// &#8211;&gt;
// &#8211;&gt;
// &#8211;&gt;
// &#8211;&gt;</script><br />
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script></div>
<p>While simple, the Three Column layout series teaches the reader how to make a three column layout, with the columns being able to be rearranged into any order without touching the HTML source code. If you don&#8217;t know how to make a CSS 3-column layouts, this series is definitely worth the read.</p>
<ul>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=67EEC">Making a Three Column Layout Using CSS: Part 1</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>24-Jul-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=DF7DD"> Making a Three-Column Layout Using CSS: Part 2</a> — <em>08-Aug-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=95463">Making a Three-Column Layout Part 3: Changing Column Order With CSS</a> — <em>18-Aug-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=92638">Making a Three-Column Layout - Part 4: Fixed, Fluid and Elastic Layouts</a> — <em>03-Sep-08</em></li>
</ul>
<p>My <a href="http://www.evotech.net/blog/2007/06/introduction-to-firebug/">firebug tutorial</a> has already had over 100,000 views. Obviously there is interest. My Community MX Firebug series is only half way done, but as you can imaging, it&#8217;s going deeper into this most excellent tool. Similar to the IE8 series, I am still in the middle of this series. There should be several more.</p>
<ul>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=6B0D6">Firebug - Part 1: The What and Why</a> <img src="http://www.communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> — <em>05-Nov-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=37427">Firebug - Part 2: Overview of Firebug Functionality</a> — <em>10-Nov-08</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=1BA52">Firebug Part 3: Editing with Firebug</a> — <em>20-Jan-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=3F01F">Firebug - Part 4A: Inspecting and Troubleshooting CSS</a> — <em>17-Apr-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=EF80C">Firebug - Part 4B: Inspecting and Troubleshooting CSS</a> — <em>22-Apr-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=CBE94">Firebug - Part 5: Inspecting the Box Model</a> — <em>27-Apr-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=B581B">Firebug - Part 6: HTTP Requests &amp; Download Speed</a> — <em>07-Aug-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=20E70">Firebug - Part 7a: The Script Tab (Basics)</a> - <em>02-Sep-09</em></li>
<li><em>Firebug - part 7b: Debugging Javascript - breakpoints, debugger &amp; watch expressions</em></li>
<li><em>Firebug - Part 7c: Debugging Javascript - The Firebug Console<br />
</em></li>
</ul>
<p>The EMail Setup series is especially useful for anyone using CPanel or anyone trying to manage several email to and from accounts:</p>
<ul>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=7B31B">Email 4b: Using Gmail as Your Email Client</a> <em>17-Dec-09</em></li>
<li> <a href="http://www.communitymx.com/abstract.cfm?cid=8432D">Email 4a: Using Gmail as Your Email Client</a> <em>15-Dec-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=DA990">Email 3c: Accessing Webmail on Your Web Site&#8217;s Server</a> - <em>07-Dec-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=EFF4F">Email 3b: Email Options Accessed On Your Web Site&#8217;s Server</a> <img src="http://communitymx.com/images/free.gif" alt="Free content" width="28" height="16" /> - <em>24-Nov-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=E349B">Email 3a: Accessing Email On Your Web Server</a> - <em>04-Nov-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=910D3">Email 2: Creating Email Forwarders</a> - <em>23-Oct-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=ACC64">Email 1: Creating New Email Accounts On Your Server</a> <em>16-Oct-09</em></li>
</ul>
<p>The CSS for Absolute Beginners series is very basic, and likely to simplistic for readers of this blog: as noted, it&#8217;s fore beginners. However, if you do want the basics, I am including the list of articles for those of you who are interested:</p>
<ul>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=CC1EA">CSS for Absolute Beginners - Part 33b: attr(),counter, increment &amp; reset</a> — <em>17-Aug-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=46B58">CSS for Absolute Beginners - Part 33a: The CSS content Property </a> — <em>20-Jul-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=A94E2">CSS for Absolute Beginners - Part 32: Generating Content with CSS</a> — <em>10-Jul-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=A4014">CSS For Absolute Beginners - Part 31: The background Shorthand Property</a> — <em>18-Jun-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=FDA90">CSS For Absolute Beginners - Part 30: The background-attachment Property</a> — <em>08-Jun-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=8AE2E">CSS for Absolute Beginners - Part 29c: background-position Property</a> — <em>26-May-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=2B2EC">CSS for Absolute Beginners - Part 29b: background-position Property</a> — <em>22-May-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=602DC">CSS for Absolute Beginners - Part 29a: background-position Property</a> — <em>13-May-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=A4008">CSS For Absolute Beginners - Part 28: background-repeat Property</a> — <em>06-May-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=D20FF">CSS For Absolute Beginners - Part 27: background-image Property</a> — <em>01-May-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=93C71">CSS For Absolute Beginners - Part 26: background-color Property</a> — <em>29-Apr-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=2BD29">CSS for Absolute Beginners - Part 25: Understanding Color Names</a> — <em>14-Apr-09</em></li>
<li><a href="http://www.communitymx.com/abstract.cfm?cid=A5F27">CSS for Absolute Beginners - Part 24: Understanding RGB Colors</a> — <em>03-Apr-09</em></li>
</ul>
<p>Don&#8217;t worry. Obviously I am still writing here too. Just wanted to share these in case anyone is interested.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.evotech.net/blog/2009/09/more-css-xhtml-and-javascript-at-community-mx/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
