tag:blogger.com,1999:blog-19513844993908693652024-02-22T15:27:36.024-05:00Instructional TechnologiesAnonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.comBlogger46125tag:blogger.com,1999:blog-1951384499390869365.post-76887543728305497842015-01-18T20:02:00.001-05:002015-01-18T20:02:21.756-05:00The Top 6 eLearning Courses Payment Gateways<div style="font-family: Lato, sans-serif; font-size: 2.1em; line-height: 1.2; margin: 0px 0px 2.4rem; outline: none; padding: 0px; position: relative;">
<span style="font-weight: normal;">The Top 6 eLearning Courses Payment Gateways</span></div>
Original post by Christopher Pappas @ <a href="http://elearningindustry.com/top-6-elearning-courses-payment-gateways">http://elearningindustry.com/top-6-elearning-courses-payment-gateways</a><br />
<br />
<span style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px;">There's a lot of thought and preparation that goes into selling your eLearning courses online. From</span><a href="http://elearningindustry.com/7-tips-proofreading-and-editing-elearning-course" style="color: #006699; font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px; margin: 0px; outline: none; padding: 0px;" target="_blank" title="perfecting your eLearning course"><strong style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">perfecting your eLearning course</strong></a><span style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px;"> </span><span style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px;">to</span><span style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px;"> </span><strong style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px; margin: 0px; outline: none; padding: 0px;"><a href="http://elearningindustry.com/boost-elearning-course-sales-5-tips-choose-ecommerce-platform" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="choosing the ideal eCommerce platform">choosing the ideal eCommerce platform</a></strong><span style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px;">, the process involves a variety of steps that require your full attention. However, one of the most important choices you have to make when selling your eLearning course online is the eLearning courses payment gateway that you are going to use. After all, all of your hard work and dedication will be for naught if you fail to provide your learners with a proper way to pay. Here are a few of the most well known and widely used eLearning courses payment gateways to sell your eLearning courses online, you may want to consider.</span><br />
<ol style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px; margin: 0px 0px 0px 1.414em; outline: none; padding: 0px;">
<li style="margin: 0px 0px 1.3em; outline: none; padding: 0px;"><strong style="margin: 0px; outline: none; padding: 0px;">PayPal</strong>There's a reason why <strong style="margin: 0px; outline: none; padding: 0px;"><a href="http://paypal.com/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="PayPal">PayPal</a></strong> is one of the most popular eLearning courses payment gateways online today. It's easy to use, easy to set up, and its payment structure is simple and straightforward. There is a free version, which is ideal for <a href="http://elearningindustry.com/tags/elearning-freelancers" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="eLearning freelancers"><strong style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">eLearning freelancers</strong></a>, as well as an upgraded service for businesses and sites (Payments Pro). While this payment gateway option may involve higher per-transaction fees, it also happens to be flexible and easily integrable, which often makes it worthwhile. Paypal has been one of the most widely used payment gateways for about a decade, because it gives merchants the opportunity to boost sales by accepting a variety of forms of payment, from credit cards to checking accounts. It also has an advanced encryption system, which means that customer data is safe and secure, making them feel more confident when clicking the buy button.</li>
<li style="margin: 0px 0px 1.3em; outline: none; padding: 0px;"><strong style="margin: 0px; outline: none; padding: 0px;">GoEmerchant<br style="margin: 0px; outline: none; padding: 0px;" /><a href="http://www.goemerchant.com/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="GoEmerchant">GoEmerchant</a></strong> is a great option for those who don't want a contract-based solution, as it is a monthly service. The downside is that its features and functions are a bit basic. However, if you are looking for a more simple and straightforward preconfigured web store design, then it may be the ideal option. It does offer you the ability to set up an <a class="broken_link" href="http://elearningindustry.com/the-top-payment-gateways-to-sell-your-elearning-course-online" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="eCommerce platform"><strong style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">eCommerce platform</strong></a> from start to finish, including a web storefront, payment processing gateway, and a customer account management platform. You can even configure your eLearning courses payment gateway and set up a merchant account. Best of all, GoEmerchant is flexible, and you can choose to use its proprietary gateway or go through <strong style="margin: 0px; outline: none; padding: 0px;"><a href="http://www.authorize.net/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="Authorize.Net">Authorize.Net</a></strong>, who is its partner.</li>
<li style="margin: 0px 0px 1.3em; outline: none; padding: 0px;"><strong style="margin: 0px; outline: none; padding: 0px;">Merchant One</strong>There is a long list of “pros” for <strong style="margin: 0px; outline: none; padding: 0px;"><a href="http://www.merchantone.com/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="Merchant One">Merchant One</a></strong> payment processing. First, it offers competitive rates, which means that even eLearning professionals with slimmer margins can increase their online revenue. Secondly, it's easy to setup a merchant account and start accepting credit card payments quickly. Last, but not least, the gateway is safe and reliable. The “con” is that you have to sign a contract that may involve cancellation fees. If you are looking for a payment solution that allows you to accept credit cards and eChecks, and to set up recurring payments from customers, then Merchant One may be worth researching.</li>
<li style="margin: 0px 0px 1.3em; outline: none; padding: 0px;"><strong style="margin: 0px; outline: none; padding: 0px;">CyberSource<a href="http://www.cybersource.com/solutions/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="CyberSource"><br style="margin: 0px; outline: none; padding: 0px; text-decoration: none;" /></a></strong>If you are looking for an all-in-one eLearning courses payment gateway solution for your eLearning courses<strong style="margin: 0px; outline: none; padding: 0px;"> <a href="http://www.cybersource.com/solutions/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="CyberSource">CyberSource</a></strong> is easy to implement. The downside is that it does require a contract. In addition, it tends to have higher start up fees than many other payment platforms, and it typically has higher per-transaction fees, as well, which could be problematic for <a href="http://elearningindustry.com/tags/elearning-professionals" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="eLearning professionals"><strong style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">eLearning professionals</strong></a> who do larger volumes of sales. However, the higher cost may be worth it, given that it offers a range of features and functions, including a virtual shopping cart, support services, and merchant account payment gateways. CyberSource accepts e-checks, American Express, and Diners Club, in addition to most of the major credit cards.</li>
<li style="margin: 0px 0px 1.3em; outline: none; padding: 0px;"><strong style="margin: 0px; outline: none; padding: 0px;">MerchantPlus<br style="margin: 0px; outline: none; padding: 0px;" /><a href="https://www.merchantplus.com/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="MerchantPlus">MerchantPlus</a></strong> is a great eLearning courses payment gateway if you are on the hunt for competitive rates, shopping cart features, and advanced customer support options. However, if you are looking for accounting features also, then you may want to look elsewhere, as MerchantPlus' proprietary gateway, NaviGate, is a bit lacking in that regard. The good news is that it is affordable and flexible, making it the ideal solution for eLearning professionals who are in need of a reliable, simple, and easy to use system. Its credit card processing system integrates with most shopping cart software, web stores, and accounting software. It also makes all of its fees and contract agreements fully transparent, so you won't have to worry about any hidden surprises, which is always a plus. Lastly, it gives you the option to use Authorize.Net, if you prefer, for an additional monthly fee.</li>
<li style="margin: 0px 0px 1.3em; outline: none; padding: 0px;"><strong style="margin: 0px; outline: none; padding: 0px;">Authorize.Net</strong>The last eLearning courses payment gateway on the list is <strong style="margin: 0px; outline: none; padding: 0px;"><a href="http://www.authorize.net/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="Authorize.Net">Authorize.Net</a></strong> which is actually one that has partnered with many others featured herein, as it is a proprietary solution that outsources its service to other providers. So, if you would like to forego the middle man and just want to stick with the source, then you may want to think about going with Authorize.Net. It offers competitive rates, shopping cart features, and premade “buy” buttons that you can use on your eLearning course page. The downside is that, since it doesn't offer you the opportunity to manage implementation directly through its platform, you will not have a merchant account, as you would typically have with other eLearning courses payment gateways. As such, it may be ideal for more experienced eCommerce eLearning professionals who don't need those extra tools or are planning on using third-party software to take care of those eCommerce functions.</li>
</ol>
<div style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px; margin-bottom: 1.5em; outline: none; padding: 0px;">
Take the time to research these eLearning courses payment gateways to sell your eLearning course online, and choose the one which offers you the features and value you are looking for. In fact, it may be worthwhile to try out a few, especially those that offer free trials, to see which best suits your needs.</div>
<div style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px; margin-bottom: 1.5em; outline: none; padding: 0px;">
In addition, choosing an eCommerce platform that meets your needs and has the potential to boost your eLearning course sales is no easy task. At the article, <a href="http://elearningindustry.com/boost-elearning-course-sales-5-tips-choose-ecommerce-platform" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="Boost Your eLearning Course Sales"><strong style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">Boost Your eLearning Course Sales</strong></a>, you will find 5 tips to choose an eCommerce platform in order to boost your eLearning course sales.</div>
<div style="font-family: Lato, sans-serif; font-size: 17px; line-height: 24.6499996185303px; margin-bottom: 1.5em; outline: none; padding: 0px;">
Looking for ways to increase your income? In the article <a href="http://lectora.com/blog/10-tips-earn-money-elearning-professional/" style="color: #006699; margin: 0px; outline: none; padding: 0px;" target="_blank" title="10 Tips to Earn Money as an eLearning Professional"><strong style="margin: 0px; outline: none; padding: 0px; text-decoration: none;">10 Tips to Earn Money as an eLearning Professional</strong></a> you will find a number of ways to help you boost your earning potential and increase your profits, even if you are new in the eLearning field.</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-50285461220280791602014-11-14T09:44:00.001-05:002014-11-14T09:44:40.744-05:00Layering Multiple Box Shadow with CSS3<span style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 21px; letter-spacing: -0.02em; line-height: 1.4;">Layering multiple shadows</span><br />
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
<i>Abridged from <a href="http://www.techrepublic.com/search/?a=ryan+boudreaux" target="_blank">Ryan Boudreaux</a>'s post <a href="http://www.techrepublic.com/blog/web-designer/css3-layering-multiple-shadows-creates-lightweight-pages/" target="_blank">here</a></i></div>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
See also <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" target="_blank">another page</a>.</div>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
The box-shadow property allows elements to have multiple and unlimited numbers of shadows, which are divided by a comma-separated list. The syntax for the CSS3 box-shadow is written in the form:</div>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">box-shadow: Xpx Ypx Bpx Lpx #abc;</pre>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
Where:</div>
<ul style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin: 0px 0px 20px 25px; padding: 0px;" type="disc">
<li>Xpx = x-axis horizontal offset</li>
<li>Ypx = y-axis vertical offset</li>
<li>Bpx = blur effect</li>
<li>Lpx = spread length</li>
<li>#abc = color</li>
</ul>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
When more than one shadow is specified, the shadows are layered from front to back in the order in which they are listed, as in the example CSS3 code below, utilizing code prefixes for<em>-moz</em>- and <em>-webkit</em>- followed by the standard element reference box-shadow. The example CSS3 code below shows six shadows specified in the following order: first a purple shadow with an offset to the bottom left and a blur effect of 11px and a spread distance of 5px, second a khaki shadow offset to the top right with a 5px blur, third a coral shadow offset to the bottom right with a 50px blur effect applied, fourth a goldenrod shadow offset to the bottom left with a 5px blur, fifth a turquoise shadow offset to the top left with a blur effect of 50px applied, and sixth a chartreuse shadow with a bottom left offset with a blur effect applied:</div>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">.Multiple_Shadow {</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> -moz-box-shadow: 5px 5px 11px 5px purple, 40px -30px 5px khaki, 40px 30px 50px coral, -40px 30px 5px goldenrod, -40px -30px 60px turquoise, -70px 50px 50px chartreuse;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> -webkit-box-shadow: 5px 5px 11px 5px purple, 40px -30px 5px khaki, 40px 30px 50px coral, -40px 30px 5px goldenrod, -40px -30px 50px turquoise, -70px 50px 50px chartreuse;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> box-shadow: 5px 5px 11px 5px purple, 40px -30px 5px khaki, 40px 30px 50px coral, -40px 30px 5px goldenrod, -40px -30px 50px turquoise, -70px 60px 50px chartreuse;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> width:500px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> padding: 10px 10px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> margin:120px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">}</pre>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
Here, it is classified for the following HTML5 section:</div>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"><section class="Multiple_Shadow"></pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> <p><strong>Multiple Shadow Example</strong> <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.</p></pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"></section></pre>
<strong style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px;">Figure A</strong><span style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px;"> shows the result displayed in Firefox 7.0:</span><br />
<h4 style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4; margin: 20px 0px 10px; text-rendering: optimizelegibility;">
Figure A</h4>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
<a href="http://b2b.cbsimg.net/blogs/10112011figure_a.gif" style="color: #3289c8; cursor: pointer; text-decoration: none;" target="_blank"><img alt="" class="alignnone size-full wp-image-759" height="248" src="http://b2b.cbsimg.net/blogs/10112011figure_a.gif" style="border: 0pt none; display: block; height: auto; max-width: 100%;" title="10112011figure_a" width="450" /></a></div>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
Next, more fun with shadow layering in this example, utilizing just four layered colors within the CSS3 box-shadow styling element using similar HTML:</div>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">.Multiple_Shadow2 {</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">-moz-box-shadow: -20px -10px 11px 15px purple, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blue, 50px 40px 5px 10px orange;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> -webkit-box-shadow: -20px -10px 11px 15px purple, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blue, 50px 40px 5px 10px orange;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> box-shadow: -20px -10px 11px 15px purple, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blue, 50px 40px 5px 10px orange;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> width:500px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> height: 600px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> padding: 5px 5px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;"> margin:120px;</pre>
<pre style="background-color: white; color: #778596; font-family: monospace, serif; font-size: 12px; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">}</pre>
<span style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px;">This results in </span><strong style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px;">Figure B</strong><span style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px;"> as displayed in Firefox 7.0:</span><br />
<h4 style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4; margin: 20px 0px 10px; text-rendering: optimizelegibility;">
Figure B</h4>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
<a href="http://b2b.cbsimg.net/blogs/10112011figure_b.gif" style="color: #3289c8; cursor: pointer; text-decoration: none;"><img alt="" class="alignnone size-full wp-image-760" height="509" src="http://b2b.cbsimg.net/blogs/10112011figure_b.gif" style="border: 0pt none; display: block; height: auto; max-width: 100%;" title="10112011figure_b" width="450" /></a></div>
<div style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 23.25px; margin-bottom: 20px;">
In future CSS3 segments, I will review 3D text, text-shadow, transitioning properties, and other styling options that can be implemented in most modern browsers today.</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-32805343358883287532014-07-27T23:15:00.000-04:002014-07-27T23:15:08.243-04:004 jQuery Cross-Domain AJAX Request methods<h1 itemprop="name" style="background-color: white; color: #444444; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 38.5px; line-height: 40px; margin: 0px; position: relative; text-rendering: optimizelegibility;">
4 jQuery Cross-Domain AJAX Request methods</h1>
<div>
<br /></div>
<div>
A post by <a href="http://jquery-howto.blogspot.com/" target="_blank">jQuery Howto</a> @ <a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#cors">http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#cors</a></div>
<div class="post-info muted" style="background-color: white; border-color: rgb(204, 204, 204); border-style: dotted; border-width: 1px 0px; color: #999999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; line-height: 20px; margin: 15px 0px 20px; padding: 5px; text-transform: uppercase;">
<div class="post-date pull-right" itemprop="datePublished" style="float: right;">
<i class="icon-calendar" style="background-image: url(http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/img/glyphicons-halflings.png); background-position: -192px -120px; background-repeat: no-repeat; display: inline-block; height: 14px; line-height: 14px; margin-top: -1px; vertical-align: text-top; width: 14px;"></i> MONDAY, SEPTEMBER 23, 2013</div>
<div class="tags">
<i class="icon-bookmark" style="background-image: url(http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/img/glyphicons-halflings.png); background-position: -72px -48px; background-repeat: no-repeat; display: inline-block; height: 14px; line-height: 14px; margin-top: -1px; vertical-align: text-top; width: 14px;"></i> TAGS: <a href="http://jquery-howto.blogspot.com/search/label/ajax" rel="tag" style="color: #0088cc; text-decoration: none;">AJAX</a>, <a href="http://jquery-howto.blogspot.com/search/label/javascript" rel="tag" style="color: #0088cc; text-decoration: none;">JAVASCRIPT</a>, <a href="http://jquery-howto.blogspot.com/search/label/jquery" rel="tag" style="color: #0088cc; text-decoration: none;">JQUERY</a>, <a href="http://jquery-howto.blogspot.com/search/label/reference" rel="tag" style="color: #0088cc; text-decoration: none;">REFERENCE</a></div>
</div>
<div class="post-body" id="post-body-9063121180735638347" itemprop="articleBody" style="background-color: white; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.75em; width: 690px;">
<div class="post-body-ad" style="float: left; margin: 10px 20px 5px 0px;">
</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
The web has changed and with it the way we develop websites. Today, the web is becoming a place where we develop web apps, rather than websites. We use third party API's to create our next mashups. So knowing how to make a cross-site AJAX request or requests that do not comply with the same origin policy is a must. In this article, you will learn 4 cross-site AJAX request methods (plus 4 bonus legacy methods and links to jQuery plugins).</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This methods will be handy to overcome Same origin policy as well. Browsers will throw an error if you are making AJAX request to the same domain but with different protocol (to https from http), use different port (http://same-domain.com:81) or subdomain.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This article reviews the following 4 methods and discusses their advantages & disadvantages. Also, summarise cases when they are better used.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Here is the list of methods:</strong></div>
<ol style="margin: 0px 0px 10px 25px; padding: 0px;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#cors" style="color: #0088cc; text-decoration: none;">CORS (Cross-Origin Resource Sharing)</a></li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#jsonp" style="color: #0088cc; text-decoration: none;">JSONP</a></li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#postm" style="color: #0088cc; text-decoration: none;">window.postMessage</a></li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#proxy" style="color: #0088cc; text-decoration: none;">Setting up a local proxy</a></li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">+ <a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#legacy" style="color: #0088cc; text-decoration: none;">4 bonus legacy methods</a> (document.domain, window.name, iframe, flash)</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">+ <a href="http://jquery-howto.blogspot.com/2013/09/jquery-cross-domain-ajax-request.html#resources" style="color: #0088cc; text-decoration: none;">list of JavaScript libraries and jQuery plugins</a> for making XSS requests.</li>
</ol>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Before we dive into the method details, let's cover most common cases:</div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Firstly, if you are trying to read data that is available as RSS feed, you are better off with universal<a href="http://jquery-howto.blogspot.com/2009/05/google-feeds-api-jquery-plugin.html" style="color: #0088cc; text-decoration: none;">RSS to JSON converter</a> powered by Google.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Secondly, if you are accessing data from some popular website API, it's more likely they support JSONP as well. See their documentation.</li>
</ul>
<div style="line-height: 1.75em; margin-bottom: 10px;">
JSONP is a cross browser method that does not rely on any browser hacks. It is supported by all browsers and many javascript libraries provide methods that make JSONP request seamless.</div>
<a href="https://www.blogger.com/null" name="more" style="color: #0088cc;"></a><h2 style="color: inherit; font-family: inherit; font-size: 18px; line-height: 40px; margin: 30px 0px 10px; position: relative; text-rendering: optimizelegibility;">
<a href="https://www.blogger.com/null" name="cors" style="color: #0088cc;">1</a>. CORS (Cross-Origin Resource Sharing)</h2>
<div style="line-height: 1.75em; margin-bottom: 10px;">
CORS is a <a href="http://www.w3.org/TR/cors/" style="color: #0088cc; text-decoration: none;">W3C recommendation</a> and supported by all <a href="http://caniuse.com/cors" style="color: #0088cc; text-decoration: none;">major browsers</a>. It makes use of HTTP headers to help browser decide if a cross-domain AJAX request is secure. Basically, when you make a CORS request, browser adds <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">Origin</code> header with the current domain value. For example:</div>
<pre class="prettyprint" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="typ" style="color: #660066;">Origin</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> http</span><span class="pun" style="color: #666600;">:</span><span class="com" style="color: #880000;">//jquery-howto.blogspot.com</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
The server, where the script makes its' CORS request, checks if this domain is allowed and sends response with <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">Access-Control-Allow-Origin</code> response header. Upon receiving, browser checks if the header is present and has the current domain value. If domains match, browser carries on with AJAX request, if not throws an error.</div>
<pre class="prettyprint" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="typ" style="color: #660066;">Access</span><span class="pun" style="color: #666600;">-</span><span class="typ" style="color: #660066;">Control</span><span class="pun" style="color: #666600;">-</span><span class="typ" style="color: #660066;">Allow</span><span class="pun" style="color: #666600;">-</span><span class="typ" style="color: #660066;">Origin</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> http</span><span class="pun" style="color: #666600;">:</span><span class="com" style="color: #880000;">//jquery-howto.blogspot.com</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
To make a CORS request you simply use <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">XMLHttpRequest</code> in Firefox 3.5+, Safari 4+ & Chrome and<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">XDomainRequest</code> object in IE8+. When using <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">XMLHttpRequest</code> object, if the browser sees that you are trying to make a cross-domain request it will seamlessly trigger CORS behaviour.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Here is a javascript function that helps you create a cross browser CORS object.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">function</span><span class="pln" style="color: black;"> createCORSRequest</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">method</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> url</span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> xhr </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">new</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">XMLHttpRequest</span><span class="pun" style="color: #666600;">();</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">if</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">"withCredentials"</span><span class="pln" style="color: black;"> in xhr</span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// XHR has 'withCredentials' property only if it supports CORS</span><span class="pln" style="color: black;">
xhr</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">open</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">method</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> url</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">true</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">else</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">if</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="kwd" style="color: #000088;">typeof</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">XDomainRequest</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">!=</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"undefined"</span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// if IE use XDR</span><span class="pln" style="color: black;">
xhr </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">new</span><span class="pln" style="color: black;"> </span><span class="typ" style="color: #660066;">XDomainRequest</span><span class="pun" style="color: #666600;">();</span><span class="pln" style="color: black;">
xhr</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">open</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">method</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> url</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">else</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">
xhr </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">null</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">return</span><span class="pln" style="color: black;"> xhr</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Function takes 2 arguments: <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">method</code> - request method ("GET", "POST", etc.) and <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">url</code> - URL where to send the request. Here is how to make a "GET" request to Google.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> request </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> createCORSRequest</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"get"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://www.google.com"</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">if</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> request </span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Define a callback function</span><span class="pln" style="color: black;">
request</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">onload </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(){};</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Send request</span><span class="pln" style="color: black;">
request</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">send</span><span class="pun" style="color: #666600;">();</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Because CORS specification relies on HTTP headers and all the heavy lifting is done by browser and server, our code does not need to change. In other words, you can make cross-domain AJAX requests like any other in jQuery.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">$</span><span class="pun" style="color: #666600;">.</span><span class="kwd" style="color: #000088;">get</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'http://cors-support.com/api'</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> data </span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">
alert</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'Successful cross-domain AJAX request.'</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span></code></pre>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Requirements & Notes</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
In order to be able to make a CORS request, you need CORS supporting browser and a server. Check if your <a href="http://caniuse.com/cors" style="color: #0088cc; text-decoration: none;">browser</a> and <a href="http://www.test-cors.org/" style="color: #0088cc; text-decoration: none;">server</a> support it.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Also note, that if AJAX request adds any custom HTTP headers or use any method other than GET, POST or HEAD as a request type; browser will make a "preflight" request to check if the server responds with correct headers before sending the actual request. This adds an overhead to your AJAX requests.</div>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Advantages & Disadvantages</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
CORS is a W3C specification and supported by all major browsers. It is how the cross domain AJAX querying will work in the future. So using CORS would be a future safe bet.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
However, it requires CORS supporting server and browser. If you have administrative privileges at the server you can <a href="http://enable-cors.org/server.html" style="color: #0088cc; text-decoration: none;">add CORS support as explained here</a>. If you do not have any control over the server, then you are out of luck. You will need to choose some other method.</div>
<h2 style="color: inherit; font-family: inherit; font-size: 18px; line-height: 40px; margin: 30px 0px 10px; position: relative; text-rendering: optimizelegibility;">
<a href="https://www.blogger.com/null" name="jsonp" style="color: #0088cc;">2</a>. JSONP (JSON Padding)</h2>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Because of the same origin policy, we can not make cross domain AJAX requests, but we can have<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;"><script></code> tags that load javascript files from other domains. <a href="http://json-p.org/" style="color: #0088cc; text-decoration: none;">JSONP</a> uses this exception in order to make cross domain requests by dynamically creating a <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;"><script></code> tag with necessary URL.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Here is how it works. Server wraps data, usually in JSON format, in a function call. Upon loading the script, browser calls that function and passes loaded data. This implies the third party server knows the local javascript function name, but for obvious reasons that is not practical. The workaround is to pass the function name as a parameter to the request URL.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Let's seen an example. Facebook's Open Graph supports JSONP calls. Here is a normal JSON response:</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="com" style="color: #880000;">// https://graph.facebook.com/10150232496792613</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"id"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"10150232496792613"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"url"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://jquery-howto.blogspot.com/"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"type"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"website"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"title"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"jQuery Howto"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">...</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Open Graph documentation says that it takes <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">callback</code> parameter to turn JSON into JSONP response. So let's add callback parameter and turn it into JSONP request.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="com" style="color: #880000;">// https://graph.facebook.com/10150232496792613</span><strong><span class="com" style="color: #880000;">?callback=myFunc</span></strong><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">/**/</span><span class="pln" style="color: black;"> myFunc</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"id"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"10150232496792613"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"url"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://jquery-howto.blogspot.com/"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"type"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"website"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="str" style="color: #008800;">"title"</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"jQuery Howto"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">...</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Noticed how the previous JSON data is now wrapped into <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">myFunc();</code>? So if we had defined <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">myFunc()</code>function previously, it would have been called with the Open Graph data.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">function</span><span class="pln" style="color: black;"> myFunc</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> data </span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
console</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">log</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> data</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">title </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// Logs "jQuery Howto"</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
jQuery has built in support for JSONP requests in it's AJAX methods. To trigger a JSONP request you need to add <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">callback_name=?</code> string at the end of the URL. Here is a previous example using jQuery.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">$</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">getJSON</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"https://graph.facebook.com/10150232496792613?callback=?"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> data </span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
console</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">log</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> data</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">title </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// Logs "jQuery Howto"</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// OR using $.ajax()</span><span class="pln" style="color: black;">
$</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">ajax</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;">
type</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"GET"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
url</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"https://graph.facebook.com/10150232496792613"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
dataType</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"jsonp"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;">
success</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">data</span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
console</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">log</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">data</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span></code></pre>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Requirements & Notes</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
The JSONP has become de facto method to overcome same origin policy restrictions and it is supported by major data providers (Facebook, Twitter, Google, Yahoo, etc.). In order to be able to use JSONP, the third party server must support it. In other words wrapping JSON data into a function call.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Please remember, that the returned data is plain javascript file. This means that you are running arbitrary javascript code within the scope of your domain with access to all of the user cookies and data in the browser. This introduces a huge security concern. That is why you absolutely must trust the server you are fetching data using JSONP method.</div>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Advantages & Disadvantages</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Advantages:</strong></div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Supported by almost all browsers.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Supported by major data providers and easy to implement on your own server.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Well supported by javascript libraries, including jQuery (see examples above).</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">No request overhead.</li>
</ul>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Disadvantages:</strong></div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Run as arbitrary javascript code. Using JSONP implies that you <em>absolutely trust</em> data provider.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Requires server support (even though easy to implement).</li>
</ul>
<h2 style="color: inherit; font-family: inherit; font-size: 18px; line-height: 40px; margin: 30px 0px 10px; position: relative; text-rendering: optimizelegibility;">
<a href="https://www.blogger.com/null" name="postm" style="color: #0088cc;">3</a>. window.postMessage</h2>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<a href="https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage" style="color: #0088cc; text-decoration: none;">window.postMessage</a> method is part of HTML5 introductions. It allows communication between window frames without being subject to same origin policy. Using <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">postMessage()</code> one can trigger a <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">message</code> event with attached data on another window, even if the window has different domain, port or a protocol. The frame where the event is triggered must add an event listener in order to be able to respond.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Let's see an example. Assume, we are on http://example.com (1) website and would like to make a request to http://example2.net (2) domain. We first must obtain a reference to (2) window. This can be either<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">iframe.contentWindow</code>, <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">window.open</code>, or <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">window.frames[]</code>. For our case it's best to create a hidden iframe element and send messages to it. Here is how it looks.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="com" style="color: #880000;">// </span><a href="http://jquery-howto.blogspot.com/2010/02/dynamically-create-iframe-with-jquery.html" style="color: #0088cc; text-decoration: none;"><span class="com" style="color: #880000;">Create an iframe element</span></a><span class="pln" style="color: black;">
$</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'<iframe />'</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;"> id</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'myFrame'</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> src</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'http://example2.net'</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">}).</span><span class="pln" style="color: black;">appendTo</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'body'</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Get reference to the iframe element</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> iframe </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> $</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'#myFrame'</span><span class="pun" style="color: #666600;">).</span><span class="kwd" style="color: #000088;">get</span><span class="pun" style="color: #666600;">(</span><span class="lit" style="color: #006666;">0</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Send message with {some: "data"} data</span><span class="pln" style="color: black;">
iframe</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">postMessage</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">some</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'data'</span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'http://example2.net'</span><span class="pun" style="color: #666600;">);</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
The first argument is the data to be sent, the second is the URL of the current document. If this value is different from <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">document.domain</code> at the time when message is sent, browser will do nothing and silently ignore it. This is done for security reasons, since the frame's URL may change.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
The page on server (2) must have an html content with a "message" event listener function. Let's use jQuery to do just that:</div>
<pre class="prettyprint lang-html" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="tag" style="color: #000088;"><html></span><span class="pln" style="color: black;">
</span><span class="tag" style="color: #000088;"><body></span><span class="pln" style="color: black;">
</span><span class="tag" style="color: #000088;"><script></span><span class="pln" style="color: black;">
$</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">window</span><span class="pun" style="color: #666600;">).</span><span class="pln" style="color: black;">on</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">"message"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> event </span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// We must check event.origin, because anyone can</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// trigger event. Unless, you are public data provider.</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">if</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">event</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">origin </span><span class="pun" style="color: #666600;">!==</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://example.com"</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Now let's send the (1) window data</span><span class="pln" style="color: black;">
event</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">source</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">postMessage</span><span class="pun" style="color: #666600;">({</span><span class="pln" style="color: black;">name</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"Someone"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> avatar</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"url.jpg"</span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> event</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">origin</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span><span class="pln" style="color: black;">
</span><span class="tag" style="color: #000088;"></script></span><span class="pln" style="color: black;">
</span><span class="tag" style="color: #000088;"></body></span><span class="pln" style="color: black;">
</span><span class="tag" style="color: #000088;"></html></span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
In order to receive the data sent from server (2), we must add another event listener on page (1). Let's update our previous code.</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="kwd" style="color: #000088;">var</span><span class="pln" style="color: black;"> iframe </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> $</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'#myFrame'</span><span class="pun" style="color: #666600;">).</span><span class="kwd" style="color: #000088;">get</span><span class="pun" style="color: #666600;">(</span><span class="lit" style="color: #006666;">0</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
iframe</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">postMessage</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">some</span><span class="pun" style="color: #666600;">:</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'data'</span><span class="pun" style="color: #666600;">},</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'http://example.com'</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
$</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">window</span><span class="pun" style="color: #666600;">).</span><span class="pln" style="color: black;">on</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">"message"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> event </span><span class="pun" style="color: #666600;">){</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">if</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">event</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">origin </span><span class="pun" style="color: #666600;">!==</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"http://example2.net"</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">return</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;">
console</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">log</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;"> event</span><span class="pun" style="color: #666600;">.</span><span class="pln" style="color: black;">data </span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;"> </span><span class="com" style="color: #880000;">// Logs {name: "Someone", avatar: "url.jpg"}</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span></code></pre>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Requirements & Notes</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This method is relatively new and it is not used by that many services yet. All <strong>latest</strong> major <a href="http://caniuse.com/x-doc-messaging" style="color: #0088cc; text-decoration: none;">browsers support it</a>. However, IE8 & IE9 support only messaging between <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;"><frame></code> and <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;"><iframe></code>'s. IE10 supports messaging between windows, but only through <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;"><a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh441303.aspx" style="color: #0088cc; text-decoration: none;">MessageChannel</a></code>'s.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This method is great for intranet projects where you control the environment (know exactly installed browsers, etc.). Also, it has high performance compared to any other method of communication.</div>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Advantages & Disadvantages</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Advantages:</strong></div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">No need to install or update on the server.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Recommended way of communication between the browser windows.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Secure (when <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage#Security_concerns" rel="nofollow" style="color: #0088cc; text-decoration: none;">used correctly</a>).</li>
</ul>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Disadvantages:</strong></div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Not supported by all major browsers (mainly IE problems).</li>
</ul>
<h2 style="color: inherit; font-family: inherit; font-size: 18px; line-height: 40px; margin: 30px 0px 10px; position: relative; text-rendering: optimizelegibility;">
<a href="https://www.blogger.com/null" name="proxy" style="color: #0088cc;">4</a>. Setup local proxy</h2>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This method overcomes same origin policy by proxying content on another domain through itself. Thus making cross-domain issue irrelevant. To use this method you will either a) setup your server as a reverse proxy to fetch content from another server or b) write a script that would do that.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This cross domain querying solution works because you actually loading content from your own domain. You request the URL and the proxy script on your server loads the content and passes it over to you.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Here is a sample PHP proxy to get RSS feed from FeedBurner.</div>
<pre class="prettyprint lang-php" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pun" style="color: #666600;"><?</span><span class="pln" style="color: black;">php</span><span class="com" style="color: #880000;">// Set your return content type</span><span class="pln" style="color: black;">
header</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">'Content-type: application/xml'</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Website url to open</span><span class="pln" style="color: black;">
$url </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">'http://feeds.feedburner.com/jQueryHowto'</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Get that website's content</span><span class="pln" style="color: black;">
$handle </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> fopen</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">$url</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="str" style="color: #008800;">"r"</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// If there is something, read and return</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">if</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">$handle</span><span class="pun" style="color: #666600;">)</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">
</span><span class="kwd" style="color: #000088;">while</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">(!</span><span class="pln" style="color: black;">feof</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">$handle</span><span class="pun" style="color: #666600;">))</span><span class="pln" style="color: black;"> </span><span class="pun" style="color: #666600;">{</span><span class="pln" style="color: black;">
$buffer </span><span class="pun" style="color: #666600;">=</span><span class="pln" style="color: black;"> fgets</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">$handle</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="lit" style="color: #006666;">4096</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
echo $buffer</span><span class="pun" style="color: #666600;">;</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;">
fclose</span><span class="pun" style="color: #666600;">(</span><span class="pln" style="color: black;">$handle</span><span class="pun" style="color: #666600;">);</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">}</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">?></span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Named the file proxy.php and make AJAX request to this URL. Here is a jQuery code example:</div>
<pre class="prettyprint lang-js" style="background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-left-color: rgb(204, 204, 204); border-left-width: 3px; border-style: none none none solid; border-top-left-radius: 4px; border-top-right-radius: 4px; clear: both; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; margin-bottom: 20px; margin-top: 20px; padding: 0.5em; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><code style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 0px;"><span class="pln" style="color: black;">$</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">"#rssFeeds"</span><span class="pun" style="color: #666600;">).</span><span class="pln" style="color: black;">load</span><span class="pun" style="color: #666600;">(</span><span class="str" style="color: #008800;">"path/to/proxy.php"</span><span class="pun" style="color: #666600;">,</span><span class="pln" style="color: black;"> </span><span class="kwd" style="color: #000088;">function</span><span class="pun" style="color: #666600;">(){</span><span class="pln" style="color: black;">
</span><span class="com" style="color: #880000;">// Some callback functions</span><span class="pln" style="color: black;">
</span><span class="pun" style="color: #666600;">});</span></code></pre>
<div style="line-height: 1.75em; margin-bottom: 10px;">
And this is how you can overcame the jQuery cross site scripting problem.</div>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Requirements & Notes</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
While setting up a proxy script, do not forget to cache the fetched data. This will reduce the loading times and save some processing on your hosting server.</div>
<div style="line-height: 1.75em; margin-bottom: 10px;">
This method must be your last resort, when previous 3 methods do not meet your requirements.</div>
<h3 style="color: inherit; font-family: inherit; font-size: 16px; line-height: 40px; margin: 20px 0px 0px; position: relative; text-rendering: optimizelegibility;">
Advantages & Disadvantages</h3>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Advantages:</strong></div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Does not rely on browser support.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Does not rely on data provider's support.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Can be used to solve any cross-domain request problem.</li>
</ul>
<div style="line-height: 1.75em; margin-bottom: 10px;">
<strong>Disadvantages:</strong></div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;">Requires setting up a proxy server. The bad news is that not all web hosting companies allow<code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">fopen()</code> to other domains, but enable it on request. My web server was very strict on security but the script above worked well on it.</li>
</ul>
<h2 style="color: inherit; font-family: inherit; font-size: 18px; line-height: 40px; margin: 30px 0px 10px; position: relative; text-rendering: optimizelegibility;">
<a href="https://www.blogger.com/null" name="legacy" style="color: #0088cc;">5</a>. Legacy methods</h2>
<div style="line-height: 1.75em; margin-bottom: 10px;">
Before new methods of cross domain request and messaging were introduced, developers relied on hacks and workarounds. Most popular ones were:</div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><strong>iframe</strong> - Include a hidden <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">iframe</code> and change it's URL fragment to exchange data. Latest browsers have added security restrictions that throw an error for accessing iframe location properties from different domains.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><strong>window.name</strong> - Changing <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">window.name</code> property for exchanging data.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><strong>flash</strong> - Flash can communicate with javascript and has different security rules. So developers included flash object on their pages to make cross-domain requests.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><strong>document.domain</strong> - This method is used for communication between two subdomains on the same domain by changing the <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(234, 234, 234); color: #555555; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; padding: 2px 4px; white-space: nowrap;">document.domain</code> property to the root domain value.</li>
</ul>
<h2 style="color: inherit; font-family: inherit; font-size: 18px; line-height: 40px; margin: 30px 0px 10px; position: relative; text-rendering: optimizelegibility;">
<a href="https://www.blogger.com/null" name="resources" style="color: #0088cc;">6</a>. Links & Resources for making cross-domain requests</h2>
<div style="line-height: 1.75em; margin-bottom: 10px;">
There are many libraries built around cross-domain AJAX problem. Here is a list of notable libraries and plugins.</div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="http://easyxdm.net/wp/" style="color: #0088cc; text-decoration: none;">easyXDM</a> - Makes use of all possible cross-domain AJAX request methods and workarounds. If a browser does not support postMessage, CORS, etc. it will fall back to hacks (flash, etc.).</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="https://github.com/cowboy/jquery-postmessage" style="color: #0088cc; text-decoration: none;">jQuery postMessage plugin</a> - a wrapper around postMessage.</li>
<li style="line-height: 20px; margin: 0px 0px 0.25em; padding: 0px;"><a href="http://api.jquery.com/jQuery.ajax/" style="color: #0088cc; text-decoration: none;">jQuery.ajax()</a> - read jQuery's AJAX documentation to learn more about it's settings that help to configure remote requests.</li>
</ul>
<div style="line-height: 1.75em; margin-bottom: 10px;">
In this post I tried to collect all the information available on cross-domain AJAX requests. If I missed anything, please let me know in the comments. Like/share for future reference.</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-10227028879943763902014-07-25T09:42:00.003-04:002014-07-25T09:42:28.696-04:00Maximizing Your Meta Tags for SEO and CTRoriginal post: <a href="http://www.searchenginejournal.com/maximizing-your-meta-tags-for-seo-and-ctr/" target="_blank">Maximizing Your Meta Tags for SEO and CTR</a><br />
<header class="entry-header" style="background-color: white; box-sizing: border-box; color: #6f6f6f; font-family: museo-sans, sans-serif; font-size: 18px; line-height: 27px;"><h1 class="entry-title" style="border: 0px; box-sizing: border-box; clear: both; color: #2d2d2d; font-size: 4.8rem; font-style: inherit; font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
Maximizing Your Meta Tags for SEO and CTR</h1>
</header><br />
<div class="entry-content" style="background-color: white; border: 0px; box-sizing: border-box; color: #6f6f6f; font-family: museo-sans, sans-serif; font-size: 18px; line-height: 27px; margin: 1.5em 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<img alt="Maximize SEO Maximizing Your Meta Tags for SEO and CTR" class=" wp-image-57045 alignright" src="http://cdn.searchenginejournal.com/wp-content/uploads/2013/01/Maximize-SEO.jpg" height="131" style="box-sizing: border-box; display: block; float: right; height: auto; margin-left: 1.5em; max-width: 50%;" title="Maximizing Your Meta Tags for SEO and CTR" width="210" />By <a href="http://www.searchenginejournal.com/author/ann-smarty/" style="border: 0px; box-sizing: border-box; color: #999999; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Ann Smarty</a></div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
While it’s true that you no longer need to optimize your meta description and meta keyword tags for Google, that doesn’t mean you should ignore these fields entirely!</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
In fact, because your page title and meta description are frequently pulled to form the snippet that appears whenever your pages are listed in the natural search results, the content you include in these areas can play a major role in your ability to attract visitors from the SERPs.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
With this in mind, here’s what you need to know about optimizing your meta tags for both search engine optimization (SEO) and click-through rates (CTR):</div>
<h3 style="border: 0px; box-sizing: border-box; clear: both; color: #2d2d2d; font-size: 3.6rem; font-style: inherit; font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin: 1.1111em 0px 0.44444em; outline: 0px; padding: 0px; vertical-align: baseline;">
<b style="box-sizing: border-box;">Meta tags should be filled out as completely as possible</b></h3>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
The first step to properly optimizing your meta tags is to use as many characters as you’re given access to. Think about your title tag and your meta description tag as being the first introduction that many new visitors will have to your brand, as they encounter this information in your website’s snippet in the natural search results. Given how important this real estate is, why wouldn’t you try to maximize the number of characters you’re allotted?</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
As a general rule, you should aim for the following character limits within each of your meta tags:</div>
<ul style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; list-style-image: initial; list-style-position: initial; margin: 1.5em 0px 1.5em 3em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Page title – 70 characters</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Meta description – 160 characters</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Meta keywords – No more than 10 keyword phrases</li>
</ul>
<h3 style="border: 0px; box-sizing: border-box; clear: both; color: #2d2d2d; font-size: 3.6rem; font-style: inherit; font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin: 1.1111em 0px 0.44444em; outline: 0px; padding: 0px; vertical-align: baseline;">
<b style="box-sizing: border-box;">Include Target Keyword Phrases in a <em style="border: 0px; box-sizing: border-box; font-family: inherit; font-size: 36px; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Natural Way</em></b></h3>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Now, as you’re filling out your meta tags, you’ll want to pay special attention to the way your target keyword phrases are included. Just because the practice of keyword stuffing your meta tags has been long since devalued doesn’t mean these phrases shouldn’t be included. It just means you need to be more strategic about using them.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
For example, when structuring your title tags, consider including your page title, your brand name, and a phrase that includes your target keyword phrase separated by the “|” symbol, rather than stuffing in as many keyword variations as possible.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Following this formula, a good sample page title tag for the Single Grain “About Us” page might look like:</div>
<blockquote style="border-left-color: rgb(149, 198, 71); border-left-style: solid; border-width: 0px 0px 0px 2px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 32px; outline: 0px; padding: 0px 0px 0px 16px; quotes: ''; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; outline: 0px; padding: 0px; vertical-align: baseline;">
<i style="box-sizing: border-box;">“About Us | Single Grain Digital Marketing – SEO & CRO Industry Leaders”</i></div>
</blockquote>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
A bad example of a sample tag for the same page would be:</div>
<blockquote style="border-left-color: rgb(149, 198, 71); border-left-style: solid; border-width: 0px 0px 0px 2px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 32px; outline: 0px; padding: 0px 0px 0px 16px; quotes: ''; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; outline: 0px; padding: 0px; vertical-align: baseline;">
<i style="box-sizing: border-box;">“About Us – Single Grain SEO Agency, SEO Marketers, and SEO Consultants”</i></div>
</blockquote>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Although both sample title tags use SEO industry related keywords, the good title tag version is a clearly written, compelling option that utilizes possible target keywords in a natural way.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
The same goes for your meta description. Including your target keywords in this field has the added bonus of causing your phrases to be bolded in the natural search results if a search user enters your exact wording into the engine. But while this might make you want to include as many keyword variations into a tag as possible, stick to a single phrase in order to prevent possible over-optimization penalties.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Finally, when it comes to the meta keyword tag, recommendations are mixed. While adding content to this area won’t help to earn your website higher rankings in the SERPs—or rankings for keyword phrases that you haven’t adequately targeted on your website—the keywords found here may play a role in how well your site performs on second- and third-tier search engines. Include keyword variations here if you want, but don’t spend too much time agonizing over which specific versions to list.</div>
<h3 style="border: 0px; box-sizing: border-box; clear: both; color: #2d2d2d; font-size: 3.6rem; font-style: inherit; font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin: 1.1111em 0px 0.44444em; outline: 0px; padding: 0px; vertical-align: baseline;">
<b style="box-sizing: border-box;">Meta Description Should Include a Call to Action</b></h3>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Now comes the fun part…</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Remember, your title tags and meta descriptions aren’t just fields that you’re optimizing in the hopes of receiving some nebulous SEO boost. Instead, these fields form your snippet in the natural search results, which means that they must be written to be as compelling as possible!</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Imagine encountering the two following snippets in the SERPs:</div>
<blockquote style="border-left-color: rgb(149, 198, 71); border-left-style: solid; border-width: 0px 0px 0px 2px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 32px; outline: 0px; padding: 0px 0px 0px 16px; quotes: ''; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<i style="box-sizing: border-box;">“How to Build Links in 2013</i></div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; outline: 0px; padding: 0px; vertical-align: baseline;">
<i style="box-sizing: border-box;">This article talks about link building techniques that will work well in 2013, including email link prospecting, social media marketing and content marketing.”</i></div>
</blockquote>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Versus</div>
<blockquote style="border-left-color: rgb(149, 198, 71); border-left-style: solid; border-width: 0px 0px 0px 2px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 32px; outline: 0px; padding: 0px 0px 0px 16px; quotes: ''; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<i style="box-sizing: border-box;">“31 Ways to Easily Attract Backlinks in 2013</i></div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; outline: 0px; padding: 0px; vertical-align: baseline;">
<i style="box-sizing: border-box;">Are you using dated link building practices that could be harming your brand? Find out how to effortlessly build links using these 2013-approved techniques.” </i></div>
</blockquote>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
I probably don’t even need to ask which of these articles you’d rather read, right?</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
In a way, writing good meta descriptions draws on the principles of copywriting as much as it does SEO best practices. This can take practice, but the reward is a higher click-through rate, increased natural search traffic to your website and potentially higher SERPs rankings if—as some SEO experts believe—it’s true that your overall CTR contributes in some small way to your snippet’s placement in the natural search listings.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
If you aren’t yet an expert copywriter, consider the following guidelines when it comes to crafting your title tags and meta descriptions:</div>
<ul style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; list-style-image: initial; list-style-position: initial; margin: 1.5em 0px 1.5em 3em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><i style="box-sizing: border-box;">Add a call to action</i>.</strong> Asking people to do something (as in the case of “Find out how” in the example above) often results in readers taking the action you’ve requested. Other possible calls to action for your meta descriptions include “Discover how,” “Read more about,” “Click here,” or other related variation.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><i style="box-sizing: border-box;">Use cliffhangers</i>.</strong> The first meta description show above gives everything away, that is, there’s no real reason for the reader to click through to read the article, as its content is given away by the snippet. Instead, use cliffhangers in your meta descriptions to encourage viewers to click through for the full story.</li>
<li style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin: 0px 0px 0.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; box-sizing: border-box; color: #2d2d2d; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><i style="box-sizing: border-box;">Write your tags for yourself</i>.</strong> Once you’ve come up with a possible meta tag, ask yourself, “Would I click through based on this information?” If your tags don’t yet seem compelling, rewrite them until you come up with something more enticing.</li>
</ul>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Don’t forget, you can always test out and refine the effectiveness of your meta tag content by changing the information stored in these web page fields periodically. If you notice a spike in natural search traffic upon making a change, it’s possible that you’ve hit on a winning combination of meta tag text.</div>
<h3 style="border: 0px; box-sizing: border-box; clear: both; color: #2d2d2d; font-size: 3.6rem; font-style: inherit; font-weight: 300; letter-spacing: -0.05em; line-height: 1; margin: 1.1111em 0px 0.44444em; outline: 0px; padding: 0px; vertical-align: baseline;">
<b style="box-sizing: border-box;">Meta tags can be improved by the use of structured data</b></h3>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
One last thing you can do to improve both your website’s search engine optimization and its appearance in the SERPs (and, consequently, your listing’s overall click-through rate) is to use the <a href="http://www.sujanpatel.com/seo/how-to-significantly-increase-your-online-visibility-with-schema/" style="border: 0px; box-sizing: border-box; color: #999999; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">structured data fields</a> that create rich snippets for your brand.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Essentially, rich snippets are enhanced SERPs listings that display additional information beyond your title tag and meta description. This additional information could include a picture, the number of people following you on Google+, or other industry-specific pieces of data (as in the case of cook times on recipe website rich snippets).</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
The following example (from the search query “potato soup recipe”) shows the difference between a web page that’s been optimized with structured data markup, and one that displays the traditional title tag and meta description snippet:</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.searchenginejournal.com/maximizing-your-meta-tags-for-seo-and-ctr/rich_snippet_example/" rel="attachment wp-att-56997" style="border: 0px; box-sizing: border-box; color: #999999; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><img alt="rich snippet example Maximizing Your Meta Tags for SEO and CTR" class="aligncenter size-full wp-image-56997" src="http://cdn.searchenginejournal.com/wp-content/uploads/2013/01/rich_snippet_example.jpg" height="231" style="border: 0px; box-sizing: border-box; clear: both; display: block; height: auto; margin: 32px auto; max-width: 100%;" title="Maximizing Your Meta Tags for SEO and CTR" width="542" /></a></div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
As you might expect, search users who wind up on this results page are significantly more likely to click the result that’s been optimized to include an image, recipe rating, cook time, and calorie count. As a result, Allrecipes.com stands to gain much more natural search traffic back to its recipe page, compared with the Food Network’s plainer listing.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
For complete instructions on how to add this type of information to your own site’s pages, take a look at the tutorials provided by <a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170" style="border: 0px; box-sizing: border-box; color: #999999; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Google</a> and <a href="http://searchengineland.com/how-to-use-rich-snippets-structured-markup-for-high-powered-seo-99081" style="border: 0px; box-sizing: border-box; color: #999999; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Search Engine Land</a>. Then, get to work implementing these tips and the strategies described above on your website. The difference in both your site’s overall SEO valuation and natural search click-through rate can be significant!</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; letter-spacing: -0.01em; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
Image Credit: Shutterstock / woaiss</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-39022280720739080762014-06-27T10:43:00.002-04:002014-06-27T10:43:39.216-04:00Processing XML with jQuery<h1 style="border: 0px; clear: both; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; line-height: 1em; margin: 0px; outline: 0px; padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 10px !important; padding-top: 5px; text-shadow: rgb(255, 255, 255) 0px 1px 0px; vertical-align: baseline; width: 920px !important;">
Processing XML with jQuery</h1>
<div>
By <a class="ibm-popup-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#authorN1002F" style="border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: 1em; line-height: 1.2em; margin: 15px 0px 0px; opacity: 0.8; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Aleksandar Kolundzija</a><span style="color: #333333; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 0.8em; line-height: 1.2em;"> (</span><a href="mailto:ak@subchild.com?subject=Processing%20XML%20with%20jQuery&cc=nancy_hannigan@us.ibm.com" style="border: 0px; color: #745285; display: inline; font-size: 1em; line-height: 1.2em; margin: 15px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ak@subchild.com</a><span style="color: #333333; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 0.8em; line-height: 1.2em;">), Web developer, Meebo</span></div>
<div class="dw-summary-date" style="border: 0px; color: #333333; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 0.8em; line-height: 1.2em; outline: 0px; padding: 12px 0px 6px; vertical-align: baseline; width: 290px;">
01 February 2011</div>
<div style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: inherit; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline; width: 920px;">
<span style="border: 0px; color: #666666; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; color: #b8471b; display: block; font-size: inherit; font-weight: bold; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Build dynamic, XML-based UI apps with jQuery, XML, DOM, and Ajax</span></span></div>
<div class="dw-summary-columns" id="dw-summary-area" style="border: 0px; clear: both; font-size: inherit; margin: 0px auto; outline: 0px; overflow: hidden; padding: 0px 0px 20px; vertical-align: baseline; width: 940px;">
<div class="ibm-col-6-4" style="border: 0px; clear: none; float: left; font-size: inherit; margin: 0px 20px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 620px;">
<div style="border: 0px; color: #333333; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 0.95em; line-height: 1.3em; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline; width: 620px;">
Did you know that you can use jQuery's fast and powerful DOM traversal and manipulation methods to process any XML file? This ability, combined with jQuery's ability to easily load XML files using Ajax, makes this JavaScript library a great choice for building dynamic, XML-based UI applications. In this tutorial, take a closer look at the specifics of this approach and explore its benefits and caveats. Along the way, you get an overview of DOM processing in the browser and discover how useful jQuery's methods can prove when you parse XML. The tutorial also outlines the basic steps in the development of a generic, browser-based live XML editor using the covered techniques.</div>
<div class="ibm-no-print ibm-ind-link" style="border: 0px; color: #333333; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 0.95em; line-height: 1.3em; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline; width: 620px;">
<a class="ibm-pdf-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/x-processxmljquerytut-pdf.pdf" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_media_blue_ON.png) !important; background-position: 0px -1201px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-family: Arial, sans-serif; font-size: 1em; line-height: 1.065em; margin: 15px 0px 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 18px; text-decoration: none; vertical-align: baseline;">PDF</a> (374 KB) <span class="dw-summary-bar" style="border: 0px; color: #999999; font-size: inherit; margin: 0px 8px; outline: 0px; padding: 0px; vertical-align: baseline;">|</span><span id="nCmts" style="border: 0px; font-size: inherit; margin: -2px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></div>
</div>
</div>
<div id="ibm-pcon" style="background: rgb(255, 255, 255); border: 0px; font-family: Arial, sans-serif; line-height: 19.200000762939453px; margin: 20px auto; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline; width: 980px;">
<div id="ibm-content" style="border: 0px; float: left; font-size: 0.8em; margin: 0px; outline: 0px; padding: 0px; position: inherit; vertical-align: baseline; width: 980px;">
<div id="ibm-content-body" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div id="ibm-content-main" style="border: 0px; clear: left; float: left; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; width: 980px;">
<div class="ibm-columns" style="border: 0px; clear: both; font-size: inherit; margin: 0px; outline: 0px; overflow: hidden; padding: 0px 10px 10px; vertical-align: baseline; width: 960px;">
<div class="ibm-col-1-1" style="border: 0px; clear: both; float: none; font-size: inherit; margin: 0px; min-height: 1px; outline: 0px; padding: 0px 10px; vertical-align: baseline; width: 940px;">
<div id="dwc-exp-d" style="border: 0px; clear: none; float: right; font-size: inherit; margin: 0px 0px 6px 16px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://ace.ng.bluemix.net/?cm_mmc=developerWorks-_-dWwebpage-_-alltopics-_-article" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><img alt="IBM Bluemix. IBM's go-to-cloud platform. Join the beta." src="http://dw1.s81c.com/developerworks/i/f-bluemix-224x194.png" height="194" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" width="224" /></a></div>
<h2 id="N10117" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Before you start</h2>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: 5px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
While this tutorial is useful to seasoned developers looking to pick up or sharpen their jQuery and XML processing skills, it also provides a practical overview of essential DOM scripting concepts, which can bring even the most junior JavaScript coders up to speed and allow them to grasp the full scope of the tutorial.</div>
<h3 id="N10057" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
About this tutorial</h3>
<div class="dw-sidebar ibm-inset" style="background-color: #f5ede7; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-top-color: rgb(170, 170, 170); border-top-style: solid; border-width: 1px 0px; clear: right; color: #333333; float: right; font-size: 0.8em !important; line-height: 1.2 !important; margin: 10px 0px 10px 15px; outline: 0px; padding: 0px 8px 5px; vertical-align: baseline; width: 300px;">
<h2 id="N1005E" style="border: 0px; color: black; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial !important; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 5px 0px 0px; vertical-align: baseline;">
Frequently used acronyms</h2>
<ul class="ibm-bullet-list" style="border: 0px; font-size: 1.166em; line-height: 1.5em; list-style: none; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">Ajax: Asynchronous JavaScript + XML</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">DOM: Document Object Model</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">HTML: Hypertext Markup Language</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">JSON: JavaScript Object Notation</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">UI: User interface</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">W3C: World Wide Web Consortium</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_bullet_grey_off.png) 0px 6px no-repeat scroll transparent; border: 0px; clear: left; font-size: inherit; height: 17px; margin: 0px; outline: 0px; padding: 0px 0px 0px 11px; vertical-align: baseline;">XML: Extensible Markup Language</li>
</ul>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
As advanced media- and data-rich web applications grow in population within the browser, technologies such as XML and jQuery become important components in their architecture due to their wide adoption and flexibility. In this tutorial, you explore DOM processing within the browser, narrowing the focus to how these paradigms apply to XML in particular and how the jQuery library can speed up development and increase robustness.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The tutorial covers these specific topics:</div>
<ul class="ibm-bullet-list" style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style: none; margin: 0px; outline: 0px; padding: 0px 0px 8px; vertical-align: baseline;">
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">Introduction to the DOM</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">XML and JavaScript in the browser</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">jQuery and XML</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">Case study: LiveXMLEditor</li>
</ul>
<h3 id="N1007D" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 8px 0px 0px; vertical-align: baseline;">
Prerequisites</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
This tutorial assumes that you have a basic understanding of HTML and JavaScript. To follow along with the code you need the following:</div>
<ul class="ibm-bullet-list" style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style: none; margin: 0px; outline: 0px; padding: 0px 0px 8px; vertical-align: baseline;">
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">Your favorite text editor for writing and editing code.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">The jQuery library. You can either download it and serve it locally, or include and serve it directly from the Google CDN.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 66px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">A good browser. While most browsers in use today are supported, review the jQuery Browser Compatibility page for recommended browsers. Many UI engineers choose Firefox for development due to its useful plug-ins, of which the most popular is Firebug. Firebug is not required for this tutorial, but it is highly recommended.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">Familiarity with a server-side language (PHP in particular) helps with specific sections, but it is not essential.</li>
</ul>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
See <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#resources" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Resources</a> for links to all the tool downloads.</div>
<div class="ibm-alternate-rule" style="background-color: #cccccc; border: 0px; clear: both; font-size: inherit; height: 1px; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="ibm-ind-link ibm-back-to-top" style="border: 0px; clear: both; color: #222222; font-size: 1.166em !important; height: 22px; line-height: 1.5em; outline: 0px; padding: 6px 0px; text-align: right; vertical-align: baseline;">
<a class="ibm-anchor-up-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#ibm-content" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_arrow_blue_ON.png) !important; background-position: 0px -401px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: inherit; font-weight: bold; line-height: 1.065em; margin: 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 16px; text-decoration: none; vertical-align: baseline;">Back to top</a></div>
<h2 id="N1015A" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Introduction to the Document Object Model (DOM)</h2>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: 5px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Before you dig into jQuery and XML, let's go over the basics of the concepts that you explore in this tutorial.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The DOM is the structure of an HTML or XML file represented in a way that allows it to be modified programmatically. In this section, you take a basic HTML document and explore DOM traversal and manipulation methods with JavaScript through a few simple examples.</div>
<h3 id="N1009B" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Brief introduction to DOM manipulation in JavaScript</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
JavaScript provides a complete set of simple (though verbose) methods for accessing, traversing, and manipulating the DOM. I do not go into great detail on this topic (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#resources" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Resources</a> for a list of recommended resources and tutorials), but will quickly go over a couple of simple examples.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Assume that you are working with a very basic HTML document that looks like <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#l1" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 1</a>.</div>
<h5 id="l1" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 1. A simple HTML document</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><!DOCTYPE html>
<html>
<head>
<title>This is the page Title</title>
</head>
<body class="signed-out">
<div id="header">
<ul id="nav">
<li><a href="/home" class="home">Home</a></li>
<li><a href="/about" class="about">About</a></li>
<li><a href="/auth" class="auth">Sign In</a></li>
</ul>
</div>
<div id="article">
<h1>A Plain DOM</h1>
<h2>An sample <b>HTML</b> document.</h2>
<div id="section"></div>
</div>
</body>
</html></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
In <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#l1" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 1</a>, a header contains a list of navigation links. To get a JavaScript object representation of the DIV tag (or element) with id <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">article</code>, you can run the code in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list2" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 2</a>.</div>
<h5 id="list2" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 2. Getting a DOM element by id</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var article = document.getElementById("article");
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementById()</code> method is the fastest way to retrieve a DOM element in JavaScript. The id attribute of an HTML element provides the browser with direct access to that element. As browsers provide no warning for duplicate ids, and as Microsoft® Internet Explorer® treats the name attribute as an id, avoiding duplicates and watching out for the Internet Explorer collisions is your responsibility. That said, in practice these issues are generally simple to avoid and therefore not a big concern.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
A second method of DOM element retrieval to look at is <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementsByTagName()</code>. This more versatile method is essential for processing XML because with that format you do not have the luxury of relying on element id attributes. Look at how <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementsByTagName()</code> works. To retrieve the contents of the H1 node you might execute the code in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list3" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 3</a>.</div>
<h5 id="list3" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 3. Getting a set of elements by tag name</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var headers = document.getElementsByTagName("h1"); // returns array of H1 elements
alert(headers[0].innerHTML); // alerts inner html of the first H1 tag: "A Plain DOM"
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Note two interesting things here. First, <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementsByTagName()</code> returns an array (a collection of elements, as the name implies). Because this example has only a single H1 element, you can retrieve it at index 0. That's almost never a safe assumption to make, though, because the element might not exist and the code above might throw an error. Instead, always check that the element exists before you attempt to access its properties (or methods).</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Second, you've likely noticed the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerHTML</code> property. As the name implies, this property provides access to the contents of an element, which in the case above is just a string. Had the H1 element contained other elements (tags), its value would contain those as well as a part of the string (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list4" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 4</a>).</div>
<h5 id="list4" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 4. Using innerHTML to retrieve value with HTML elements</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var subheaders = document.getElementsByTagName("h2"); // returns array of H1 elements
alert(subheaders[0].innerHTML); // "An sample <b>HTML</b> document."
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
In addition to innerHTML, browsers also provide a property for retrieving only the text contents of an element. However, this property is named<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerText</code> in Internet Explorer and <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">textContent</code> in other browsers. To use it safely across all browsers you might do something similar to <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list5" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 5</a>.</div>
<h5 id="list5" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 5. Using <code style="border: 0px; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerText</code> and <code style="border: 0px; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">textContent</code> properties across different browsers</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var headers = document.getElementsByTagName("h1"); // returns array of H1 elements
var headerText = headers[0].textContent || headers[0].innerText;
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">headerText</code> variable gets the value of <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">textContent</code> if it exists, and the value of <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerText</code> otherwise. A more sensible way to treat this task is to create a cross-browser function that does that, but as you see later, jQuery already provides one.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The HTML page also has a Sign In link. Suppose that the user has logged in using a separate process, and you want to reflect that in the navigation by changing the Sign In label to Sign Out. In the previous example, you retrieved the text value of the node using <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerHTML</code>. This property can be written to it as well. The bit of JavaScript in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list6" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 6</a> achieves that step.</div>
<h5 id="list6" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 6. Updating the innerHTML value of a DOM node</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var authElem = document.getElementById("auth"); // returns single element
authElem.innerHTML = "Sign Out"; // Updates element contents
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
In addition to updating the values of existing nodes, you can create completely new DOM elements and append them to the DOM using an existing element (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list7" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 7</a>).</div>
<h5 id="list7" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 7. Creating and injecting a new DOM node</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var ulElems = document.getElementsByTagName("ul"); // returns array of UL elements
var ul = ulElems[0]; // get the first element (in this case, the only one)
var li = document.createElement("li"); // create a new list item element
var text = document.createTextNode("List Item Text"); // create a text node
li.appendChild(text); // append text node to li node (still not added to DOM)
ul.appendChild(li); // append new list node to UL, which inserts it into DOM
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
While methods <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementById()</code> and <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementsByTagName()</code> are often executed on the document object, you can also (more efficiently, in fact) execute them on any other element and reduce the retrieval scope to the current element's children. This approach obviously assumes that elements you are accessing are children of the element that the methods are called on. Keep this notion of context in mind as it comes up later when you look at processing XML with jQuery.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Removing elements from the DOM is also trivial. To remove a node, first retrieve it, then remove it by referencing it through its parent (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list8" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 8</a>). (See more on <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">parentNode</code> and related properties below.)</div>
<h5 id="list8" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 8. Removing an element from the DOM</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var firstList = document.getElementsByTagName("ul")[0];
firstList.parentNode.removeChild(firstList);
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Last, let's go over attribute assigning and removing, using <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">setAttribute()</code> and <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getAttribute()</code> (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list9" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 9</a>).</div>
<h5 id="list9" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 9. Setting and removing an element attribute</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var firstUL = document.getElementsByTagName("ul")[0];
firstUL.setAttribute("class", "collapsed");
firstUL.getAttribute("class"); // returns "collapsed"
</script></pre>
</div>
<h3 id="N10164" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
DOM traversal in JavaScript</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Aside from element selection and manipulation, JavaScript provides a complete set of traversal properties. You saw an example use of<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">parentNode</code> in the previous listing. Given an element, you can navigate from it to surrounding elements within the DOM using these basic references (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list10" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 10</a>).</div>
<h5 id="list10" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 10. JavaScript's DOM traversal properties</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;">firstChild
lastChild
nextSibling
parentNode
previousSibling</pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
See <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#resources" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Resources</a> for a link to a complete node property listing.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
A DOM representation of these elements, in reference to a given <node>, looks like <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list11" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 11</a>.</div>
<h5 id="list11" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 11. Relationship of related DOM elements</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><parent_node>
<previous_sibling/>
<node>
<first_child/>
...
<last_child/>
</node>
<next_sibling/>
</parent_node></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Last, consider the tree representation of this relationship as shown in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#fig1" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Figure 1</a>. First is the parentNode, which includes the node plus its previousSibling and nextSibling elements. The node can contain one or more child nodes (with firstChild and lastChild elements)</div>
<h5 id="fig1" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Figure 1. Tree representation of adjacent nodes</h5>
<img alt="Tree representation of adjacent nodes" src="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/fig01.gif" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" width="535" /><br />
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
A couple of these JavaScript node references come in handy when creating a function for traversing the DOM from a starting node (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list12" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 12</a>). You'll revisit this function when you look at parsing an entire XML document later in this tutorial.</div>
<h5 id="list12" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 12. JavaScript function for traversing the DOM</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
function traverseDOM(node, fn){
fn(node); // execute passed function on current node
node = node.firstChild; // get node's child
while (node){ // if child exists
traverseDOM(node, fn); // recursively call the passed function on it
node = node.nextSibling; // set node to its next sibling
}
}
// example: adds "visited" attribute set to "true" to every node in DOM
traverseDOM(document, function(curNode){
if (curNode.nodeType==="3"){ // setAttribute() only exists on an ELEMENT_NODE
// add HTML5 friendly attribute (with data- prefix)
curNode.setAttribute("data-visited", "true");
}
});
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
By now, you should have a good understanding of the basics of DOM traversal and manipulation as they apply to HTML documents. In the next section, you'll look at how this applies to XML documents.</div>
<div class="ibm-alternate-rule" style="background-color: #cccccc; border: 0px; clear: both; font-size: inherit; height: 1px; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="ibm-ind-link ibm-back-to-top" style="border: 0px; clear: both; color: #222222; font-size: 1.166em !important; height: 22px; line-height: 1.5em; outline: 0px; padding: 6px 0px; text-align: right; vertical-align: baseline;">
<a class="ibm-anchor-up-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#ibm-content" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_arrow_blue_ON.png) !important; background-position: 0px -401px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: inherit; font-weight: bold; line-height: 1.065em; margin: 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 16px; text-decoration: none; vertical-align: baseline;">Back to top</a></div>
<h2 id="N10292" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
XML DOM and JavaScript in the browser</h2>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: 5px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Before you can process XML, you first need to expose it to JavaScript in the browser. This section covers different ways to achieve that and explores how JavaScript can then process the imported XML DOM.</div>
<h3 id="N101B0" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
XML node types</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Before digging into processing XML, let's go over the different XML node types and their named constants. While this is an easy topic to ignore when dealing with HTML, it is crucial when processing XML due to that format's extensible, and therefore, unpredictable structure. It is precisely this difference that requires the custom methods that I cover here for the XML processor.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Here are the 12 different XML node types:</div>
<ol style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style-image: initial !important; list-style-position: initial !important; margin: 0px; outline: 0px; padding: 0px 0px 0px 20px; vertical-align: baseline;">
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ELEMENT_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ATTRIBUTE_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">TEXT_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CDATA_SECTION_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ENTITY_REFERENCE_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ENTITY_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">PROCESSING_INSTRUCTION_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">COMMENT_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">DOCUMENT_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">DOCUMENT_TYPE_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">DOCUMENT_FRAGMENT_NODE</code></li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">NOTATION_NODE</code></li>
</ol>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
You can use JavaScript to access an element's <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">nodeType</code> property and check its type. The function in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list13" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 13</a> returns true if the passed node is a comment node and false otherwise. Although this function has no jQuery dependencies you'll explore it further when you look at parsing XML node values.</div>
<h5 id="list13" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 13. JavaScript function for determining if the node element is a comment</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
function isNodeComment(node){
return (node.nodeType===8);
}
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
I do not go into details about each of the node types in this tutorial, but being familiar with the node types is essential for handling nodes and their values accordingly.</div>
<h3 id="N101F0" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Client-side XML processing with JavaScript</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Many of the same JavaScript methods used previously to process HTML apply directly when working with XML; however, you can't rely on referencing elements by id and should use the more generic method of retrieval by tag name. Note that when processing XML, tag names are case sensitive.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Assume that you are working with this simple XML file in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list14" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 14</a>.</div>
<h5 id="list14" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 14. A simple XML file</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><?xml version="1.0" encoding="UTF-8" ?>
<item content_id="1" date_published="2010-05-25">
<description></description>
<body></body>
<related_items>
<related_item content_id="2"></related_item>
<related_item content_id="3"></related_item>
</related_items>
</item></pre>
</div>
<h3 id="N10204" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Exposing XML to JavaScript in the browser</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The first step toward parsing the XML in Listing 14 is exposing it to JavaScript. You can do this several ways:</div>
<ol style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style-image: initial !important; list-style-position: initial !important; margin: 0px; outline: 0px; padding: 0px 0px 0px 20px; vertical-align: baseline;">
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Server-side rendering of XML as a JavaScript string variable</li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Server-side rendering of XML into a textarea element</li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Loading XML into the browser through Ajax</li>
</ol>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The detailed steps for each option are:</div>
<ol style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style-image: initial !important; list-style-position: initial !important; margin: 0px; outline: 0px; padding: 0px 0px 0px 20px; vertical-align: baseline;">
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Server-side rendering of XML as a JavaScript string variable</strong><div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Using a server-side programming language such as PHP, you can output the XML string into a JavaScript variable. This isn't the most elegant or even the most practical approach, but it works. The advantage of this approach is that you can load the XML from any URL as well as from the local server (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list15" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 15</a>).</div>
<h5 id="list15" style="border: 0px; font-size: 1em !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 15. Writing XML into a JavaScript variable from PHP</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; color: black; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; line-height: 1.2 !important; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><?php
$xmlPath = "/path/to/file.xml"; // or http://www.somedomain.com/path/to/file.xml
$xmlFile = file_get_contents($xmlPath);
?>
<script type="text/javascript">
var xmlString = "<?=$xmlFile?>";
</script></pre>
</div>
</li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Server-side rendering of XML into a textarea element</strong><div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
A slightly different approach consists of loading the XML into a <textarea> field (which does not need to be visible). Then, using the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerHTML</code>property covered earlier, retrieve the string and expose it to JavaScript.</div>
<div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
You can output the PHP variable (<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$xmlFile</code>) defined here to an HTML textarea field with an id for easy reference: <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><textarea id="xml"><?=$xmlFile?></textarea></code></div>
<div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Then, using the methods covered earlier, you can simply pull the value out into the JavaScript variable for further processing (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list16" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 16</a>).</div>
<h5 id="list16" style="border: 0px; font-size: 1em !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 16. Exposing XML to JavaScript from a textarea element</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; color: black; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; line-height: 1.2 !important; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var xmlString = document.getElementById("xml").innerHTML;
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Due to the differences in browser support for XML, use the following JavaScript function for creating a DOM from an XML string (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list17" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 17</a>).</div>
<h5 id="list17" style="border: 0px; font-size: 1em !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 17. Cross-browser JavaScript function for converting an XML string into a DOM object</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; color: black; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; line-height: 1.2 !important; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
/**
* Converts passed XML string into a DOM element.
* @param xmlStr {String}
*/
function getXmlDOMFromString(xmlStr){
if (window.ActiveXObject && window.GetObject) {
// for Internet Explorer
var dom = new ActiveXObject('Microsoft.XMLDOM');
dom.loadXML(xmlStr);
return dom;
}
if (window.DOMParser){ // for other browsers
return new DOMParser().parseFromString(xmlStr,'text/xml');
}
throw new Error( 'No XML parser available' );
}
var xmlString = document.getElementById("xmlString").innerHTML;
var xmlData = getXmlDOMFromString(xmlString);
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Let's also look at the function for reversing this process. Given an XML DOM object, the function in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list18" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 18</a> returns a string.</div>
<h5 id="list18" style="border: 0px; font-size: 1em !important; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 18. Cross-browser JavaScript function for returning a string representation of an XML DOM object</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; color: black; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; line-height: 1.2 !important; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
/**
* Returns string representation of passed XML object
*/
function getXmlAsString(xmlDom){
return (typeof XMLSerializer!=="undefined") ?
(new window.XMLSerializer()).serializeToString(xmlDom) :
xmlDom.xml;
}
</script></pre>
</div>
</li>
<li style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Loading XML into the browser through Ajax</strong><div style="border: 0px; color: #222222; font-size: 1em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The last method of exposing the XML to JavaScript is through Ajax. Because I use jQuery to perform this operation I cover this method in more detail after introducing that library.</div>
</li>
</ol>
<h3 id="N1026B" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 8px 0px 0px; vertical-align: baseline;">
Processing XML with JavaScript</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Let's see how standard JavaScript methods for DOM processing shown earlier apply to XML. To retrieve the description of the current item and ids of related items you can do something similar to <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list19" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 19</a>.</div>
<h5 id="list19" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 19. XML Processing using JavaScript</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
// get value of single node
var descriptionNode = xmlData.getElementsByTagName("description")[0];
var description
= descriptionNode.firstChild && descriptionNode.firstChild.nodeValue;
// get values of nodes from a set
var relatedItems = xmlData.getElementsByTagName("related_item");
// xmlData is an XML doc
var relatedItemVals = [];
var tempItemVal;
for (var i=0,total=relatedItems.length; i<total; i++){
tempItemVal = relatedItems[i].firstChild ? relatedItems[i].firstChild.nodeValue : "";
relatedItemVals.push(tempItemVal);
}
// set and get attribute of a node
description.setAttribute("language", "en");
description.getAttribute("language"); // returns "en"
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Look more closely at this code. The method <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getElementsByTagName()</code>, which you saw before, is essential for processing XML because it allows you to select all XML elements of a given name. (Again, keep in mind that when you process XML it is case sensitive.) You then safely retrieve the description value by first checking if the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">descriptionNode</code> has a firstChild. If so, you go on to access its <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">nodeValue</code>. When you try to access a specific node's text value, things start to get a little tricky. Although some browsers support the previously covered <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerHTML</code> property for XML documents, most do not. You first have to check whether it has a <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">firstChild</code> (<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">textNode</code>, comment or child node) and if it does, retrieve that<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">nodeValue</code>. If the value doesn't exist, you set it to an empty string. (You can ignore empty values and only store actual values, but for the purposes of this example let's maintain the number of items and keep the indexes in sync.)</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Last, you see that <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">setAttribute()</code> and <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">getAttribute()</code> methods work as they did with an HTML file.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
You've now seen how to process HTML and XML Document Object Models using plain old JavaScript. In the next section, I introduce jQuery and show how this powerful library not only simplifies processing but also increases your control over all aspects of DOM interaction.</div>
<div class="ibm-alternate-rule" style="background-color: #cccccc; border: 0px; clear: both; font-size: inherit; height: 1px; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="ibm-ind-link ibm-back-to-top" style="border: 0px; clear: both; color: #222222; font-size: 1.166em !important; height: 22px; line-height: 1.5em; outline: 0px; padding: 6px 0px; text-align: right; vertical-align: baseline;">
<a class="ibm-anchor-up-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#ibm-content" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_arrow_blue_ON.png) !important; background-position: 0px -401px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: inherit; font-weight: bold; line-height: 1.065em; margin: 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 16px; text-decoration: none; vertical-align: baseline;">Back to top</a></div>
<h2 id="N103A6" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
jQuery and XML</h2>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: 5px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Likely the main reasons for jQuery's huge popularity are its fast and simple traversal engine and its slick selector syntax. (Excellent documentation also really helps.) And although its primary use is HTML processing, in this section you explore how it works and how to apply it to processing XML files as well.</div>
<h3 id="N102A4" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
DOM manipulation and traversal with jQuery</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
To access any of jQuery's features you first need to make sure that the file jquery.js is included on the page. Having done that, you simply call<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery()</code> or the shorthand version <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$()</code> and pass it a selector as the first argument. A selector is usually a string that specifies an element or a collection of elements if more than an element matches the given selector. <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list20" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 20</a> shows some basic jQuery selectors.</div>
<h5 id="list20" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 20. Basic jQuery selectors</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var allImages = $("img"); // all IMG elements
var allPhotos = $("img.photo"); // all IMG elements with class "photo"
var curPhoto = $("img#currentPhoto"); // IMG element with id "currentPhoto"
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Keep in mind that the return value of the jQuery function always returns a jQuery object. This object is what allows the chaining of methods (see<a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list21" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 21</a>), a feature it shares with a few other popular JavaScript frameworks (likely influenced by the Ruby programming language).</div>
<h5 id="list21" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 21. Basic jQuery operation with chained method calls</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
$("img").css({"padding":"1px", "border": "1px solid #333"})
.wrap("<div class='img-wrap'/>");
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
This code selects all images, sets padding and border on each of them, then wraps each in a DIV with class <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">img-wrap</code>. As you can tell, that's quite a bit of cross-browser functionality reduced to just a single line of code. For thorough information on jQuery selectors and methods, check out the excellent documentation on the jQuery website (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#resources" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Resources</a>).</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
<a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list22" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 22</a> shows how jQuery simplifies examples from the previous section.</div>
<h5 id="list22" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 22. Creating and injecting a DOM node with jQuery</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
alert($("h1:first").html()); // .text() also works and might be better suited here
$("#auth").text("Sign Out");
var $li = $("<li>List Item Text</li>");
// $ is used as var prefix to indicate jQuery object
$("ul#nav").append($li);
</script></pre>
</div>
<h3 id="N102DE" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Processing XML with jQuery</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
I mentioned that the first argument passed to the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery $()</code> function is the string selector. The less common second argument allows you to set the context, or starting node for jQuery, to use as a root when making the selection. By default, jQuery uses the document element as the context, but optimizing code is possible by restricting the context to a more specific (and therefore smaller) subset of the document. To process XML, you want to set the context to the root XML document (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list23" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 23</a>).</div>
<h5 id="list23" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 23. Retrieving values from an XML document with jQuery</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
// get value of single node (with jQuery)
var description = $("description", xmlData).text();
// xmlData was defined in previous section
// get values of nodes from a set (with jQuery)
var relatedItems = $("related_item", xmlData);
var relatedItemVals = [];
$.each(relatedItems, function(i, curItem){
relatedItemVals.push(curItem.text());
});
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
That code cleans things up quite a bit. By passing the node name to the core <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery $()</code> function and setting the context,<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> xmlData</code>, you quickly get access to the node set you want. Getting the value of the node, though, is something that needs some exploration.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
As the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerHTML</code> property does not work for non-HTML documents, you cannot rely on jQuery's <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">html()</code> method to retrieve the contents of a node. jQuery also provides a method for cross-browser retrieval of the text of an HTML node. The <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">text()</code> method, as mentioned earlier, is a cross-browser wrapper for the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">innerText</code> property, but even it behaves inconsistently across browsers when processing XML. Internet Explorer, for example, ignores what it considers the empty node values (spaces, tabs, breaks) as the contents of a node. This approach might seem more intuitive than Firefox's handling of the same, which interprets the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">related_nodes</code> element from the sample XML file as a set of text nodes along with the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">related_items</code> nodes. To get around this inconsistency, create custom methods for treating text nodes consistently. In doing so (see<a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list24" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 24</a>) you make use of a few handy jQuery methods: <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">contents()</code>, <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">filter()</code> and <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">trim()</code>.</div>
<h5 id="list24" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 24. Cross-browser JavaScript functions for accurate text value retrieval of a node</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
/**
* Retrieves non-empty text nodes which are children of passed XML node.
* Ignores child nodes and comments. Strings which contain only blank spaces
* or only newline characters are ignored as well.
* @param node {Object} XML DOM object
* @return jQuery collection of text nodes
*/
function getTextNodes(node){
return $(node).contents().filter(function(){
return (
// text node, or CDATA node
((this.nodeName=="#text" && this.nodeType=="3")
|| this.nodeType=="4") &&
// and not empty
($.trim(this.nodeValue.replace("\n","")) !== "")
);
});
}
/**
* Retrieves (text) node value
* @param node {Object}
* @return {String}
*/
function getNodeValue(node){
var textNodes = getTextNodes(node);
var textValue = (node && isNodeComment(node)) ?
// isNodeComment is defined above
node.nodeValue : (textNodes[0]) ? $.trim(textNodes[0].textContent) : "";
return textValue;
}
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Now look at how to set the node value (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list25" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 25</a>). Two things to keep in mind are that this operation is potentially destructive, as setting the text value of the root node overwrites all of its children. Also note that if a specific node has no prior text value, instead of setting it using<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">node.textContent</code>, set it with <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">node["textContent"]</code> because Internet Explorer doesn't like the first method (the property doesn't exist when blank).</div>
<h5 id="list25" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 25. Cross-browser JavaScript function for accurate setting of the text value of a node</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
function setNodeValue(node, value){
var textNodes = getTextNodes(node);
if (textNodes.get(0)){
textNodes.get(0).nodeValue = value;
}
else {
node["textContent"] = value;
}
}
</script></pre>
</div>
<h3 id="N10336" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
DOM attributes and jQuery</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Processing attributes of DOM elements is already pretty straightforward with plain old JavaScript as shown in examples from the previous section. As expected, jQuery provides simple equivalents for these, but furthermore, attributes can be used in selectors—a very powerful feature (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list26" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 26</a>).</div>
<h5 id="list26" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 26. Getting and setting DOM element attributes with jQuery</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
var item = $("item[content_id='1']", xmlData);
// select item node with content_id attribute set to 1
var pubDate = item.attr("date_published");
// get value of date_published attribute
item.attr("archive", "true");
// set new attribute called archive, with value set to true
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
As you can see, jQuery's <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">attr()</code> method supports both the retrieval and setting of attributes. More importantly, jQuery provides excellent access to element retrieval by allowing attributes in selectors. In the example above, you selected the item with <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">content_id</code> attribute set to <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">1</code>, from the<code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">xmlData</code> context.</div>
<h3 id="N10358" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Loading XML through Ajax with jQuery</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
As you probably already know, Ajax is a web technology for asynchronous retrieval of XML (or text) from the server using JavaScript. Ajax itself relies on the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">XMLHttpRequest</code> (XHR) API to send a request to and receive a response from the server. In addition to providing excellent DOM traversal and manipulation methods, jQuery also offers thorough, cross-browser Ajax support. That said, the loading of XML through Ajax is as native as Ajax gets, so you're on familiar ground. The way this works in jQuery is shown in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list27" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 27</a>.</div>
<h5 id="list27" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Listing 27. Loading an external XML file with jQuery's Ajax method</h5>
<div class="codesection" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<pre class="displaycode" style="background: rgb(247, 247, 247) !important; border: 1px solid rgb(204, 204, 204); clear: right; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 11px; margin-bottom: 6px !important; outline: 0px; overflow: auto; padding: 5px 10px 5px 3px !important; vertical-align: baseline; width: 780px;"><script type="text/javascript">
$.ajax({
type : "GET",
url : "/path/to/data.xml",
dataType : "xml",
success : function(xmlData){
var totalNodes = $('*',xmlData).length; // count XML nodes
alert("This XML file has " + totalNodes);
},
error : function(){
alert("Could not retrieve XML file.");
}
});
</script></pre>
</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.ajax()</code> method has a number of additional options and can also be called indirectly through shortcut methods such as <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.getScript()</code>, which imports and executes a JavaScript file, <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.getJSON()</code>, which loads a JSON data file and makes it available to the success script, and so on. When requesting a file of type XML, though, you're stuck with the core <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.ajax()</code> method that has the advantage of forcing you to know only its syntax for any circumstance. In the example above, you simply request file /path/to/data.xml, specifying that the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">dataType</code> is "xml" and that the request method is <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">GET</code>. After the browser receives a response from the server, it triggers either the success or the error callback function accordingly. In this example, a success callback alerts the total number of nodes. jQuery's star selector (*) matches all nodes. The key point is to note that the success callback function receives the data from the server as the first argument. The name of the variable is up to you, and as described earlier, that value becomes the context passed to any jQuery call intended to process the XML.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
An important thing to keep in mind when processing Ajax in general is the cross-domain restriction, which prevents retrieval of files from different domains. The previously covered methods of server-side XML retrieval might be viable alternatives in your application.</div>
<h3 id="N10383" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Processing external XHTML as XML</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Because XHTML is a subset of valid XML, there's no reason why you can't process it the same way you process XML. Why exactly you would want to is a separate topic, but the point is that you could. For instance, scrapping a (valid) XHTML page and extracting data from it is perfectly doable using this technique, even though I encourage a more robust approach.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
While primarily intended for HTML DOM traversal and manipulation, jQuery can also be used for processing XML as well, though it requires the additional step of a getting the file to the browser. The topics covered in this section explain the different methods and provide the methods essential for processing the XML effectively.</div>
<div class="ibm-alternate-rule" style="background-color: #cccccc; border: 0px; clear: both; font-size: inherit; height: 1px; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="ibm-ind-link ibm-back-to-top" style="border: 0px; clear: both; color: #222222; font-size: 1.166em !important; height: 22px; line-height: 1.5em; outline: 0px; padding: 6px 0px; text-align: right; vertical-align: baseline;">
<a class="ibm-anchor-up-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#ibm-content" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_arrow_blue_ON.png) !important; background-position: 0px -401px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: inherit; font-weight: bold; line-height: 1.065em; margin: 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 16px; text-decoration: none; vertical-align: baseline;">Back to top</a></div>
<h2 id="N104B8" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Case Study: Live XML Edit</h2>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: 5px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
In this section, you apply what you learned to create a browser-based XML editor.</div>
<h3 id="N10392" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Live XML Edit</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
While I don't recommend editing XML by hand, I can think of too many cases where precisely that approach was taken. So, in part as an academic exercise and in part as a useful tool, I set out to build a browser-based XML editor. A primary goal was to process the XML directly, rather than convert it to a different format such as JSON, make the updates, then transform back to XML. Making the edits live ensures that the only affected parts of the file are those that were actually edited, which means less room for error and faster processing. The techniques covered in this tutorial were essential in putting this together. Take a closer look at how they applied.</div>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
<a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#fig2" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Figure 2</a> shows Live XML Edit.</div>
<h5 id="fig2" style="border: 0px; font-size: 1.166em !important; margin: 5px 0px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Figure 2. Live XML Edit</h5>
<img alt="Screen capture of the Live XML Edit application" src="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/fig02.jpg" style="border: 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" width="500" /><br />
<h3 id="N103A7" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Uploading and loading XML through Ajax</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
LiveXMLEdit uses Ajax to get the XML into the page. The user is required to upload the XML file he wants to edit, which is then saved on the server, and brought in using <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.ajax()</code> described in <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list27" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 27</a>. A reference to the original XML object is saved and edited directly. This approach means that after the user is finished editing the file no transformations are necessary as the updated DOM already exists.</div>
<h3 id="N103B5" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Rendering collapsible and editable HTML tree representation of the XML</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
After the XML is available to JavaScript, it is traversed using the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">traverseDOM</code> method (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#list11" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 11</a>), and each of the nodes along with their attributes is rendered as nested unordered lists (UL). jQuery is then used to assign handlers for expanding and collapsing of elements, which simplifies the display and editing of larger documents. Also rendered are action buttons that provide editing features.</div>
<h3 id="N103C3" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Adding methods to handle (and store) live edits</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Along with rendering buttons for editing and deleting nodes and making updates for edited fields, the success handler of the Ajax call that loads the XML also assigns handlers for processing various user interactions and events. jQuery provides different means of assigning handlers, but for unpredictably large DOMs by far the most efficient is the <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.live()</code> method or its younger (and even more performant) sibling, <code style="border: 0px; color: rgb(0, 0, 0) !important; font-family: 'Andale Mono', 'Lucida Console', Monaco, Liberation, fixed, monospace; font-size: 0.95em !important; line-height: 1.5em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">$.delegate()</code>. Rather than catch events at the target element, these methods handle events at the document or the specified element, respectively. This approach has a number of benefits—faster binding and unbinding, and support for existing as well as future nodes that match the selector (key in this case because users can create new XML nodes that should behave just like existing ones.)</div>
<h3 id="N103D2" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.4em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Server-side script to save the updated file</h3>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: -2px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
Although server-side processing is beyond the scope of this article, it is necessary for saving the edited file. For the code sample, check out the entire application on GitHub (see <a href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#resources" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Resources</a>), but as far as the browser processing is concerned, simply convert the updated XML DOM to a string and post it to a server script. The script itself retrieves the post and saves it as a file.</div>
<div class="ibm-alternate-rule" style="background-color: #cccccc; border: 0px; clear: both; font-size: inherit; height: 1px; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="ibm-ind-link ibm-back-to-top" style="border: 0px; clear: both; color: #222222; font-size: 1.166em !important; height: 22px; line-height: 1.5em; outline: 0px; padding: 6px 0px; text-align: right; vertical-align: baseline;">
<a class="ibm-anchor-up-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#ibm-content" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_arrow_blue_ON.png) !important; background-position: 0px -401px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: inherit; font-weight: bold; line-height: 1.065em; margin: 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 16px; text-decoration: none; vertical-align: baseline;">Back to top</a></div>
<h2 id="N1050E" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Summary</h2>
<div style="border: 0px; color: #222222; font-size: 1.166em !important; line-height: 1.5em; margin-top: 5px !important; outline: 0px; padding: 6px 0px; vertical-align: baseline;">
The DOM provides a powerful means of activating HTML and XML structures within the browser. You saw how to do this with plain old JavaScript and also how jQuery's fast, robust, and well supported feature set can greatly simplify development while ensuring cross-browser compatibility. You also reviewed different ways to expose the XML to JavaScript in the browser and methods for accurately processing it with the help of jQuery. The list of resources helped me put together both this article and the Live XML Edit application.</div>
<div class="ibm-alternate-rule" style="background-color: #cccccc; border: 0px; clear: both; font-size: inherit; height: 1px; margin: 10px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="ibm-ind-link ibm-back-to-top" style="border: 0px; clear: both; color: #222222; font-size: 1.166em !important; height: 22px; line-height: 1.5em; outline: 0px; padding: 6px 0px; text-align: right; vertical-align: baseline;">
<a class="ibm-anchor-up-link" href="http://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html?ca=dat-#ibm-content" style="background-image: url(http://1.www.s81c.com/i/v17/icons/ibm_sprite_arrow_blue_ON.png) !important; background-position: 0px -401px; background-repeat: no-repeat; border-bottom-style: none; border-width: 0px; color: #745285; display: inline; font-size: inherit; font-weight: bold; line-height: 1.065em; margin: 0px; opacity: 0.8; outline: 0px; padding: 0px 0px 0px 16px; text-decoration: none; vertical-align: baseline;">Back to top</a></div>
<h2 id="download" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Download</h2>
<table border="0" cellpadding="0" cellspacing="0" class="ibm-data-table dw-download-table" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse; border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; font-size: inherit; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline; width: 780px !important;"><thead style="font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="border-style: solid none none; border-top-color: rgb(221, 221, 221); border-width: 1px 0px 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><th scope="col" style="border-style: solid none none; border-top-color: rgb(221, 221, 221); border-width: 1px 0px 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 10px 5px 10px 3px; vertical-align: top;">Description</th><th scope="col" style="border-style: solid none none; border-top-color: rgb(221, 221, 221); border-width: 1px 0px 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 10px 5px 10px 3px; vertical-align: top;">Name</th><th scope="col" style="border-style: solid none none; border-top-color: rgb(221, 221, 221); border-width: 1px 0px 0px; font-size: inherit; margin: 0px; outline: 0px; padding: 10px 5px 10px 3px; vertical-align: top;">Size</th></tr>
</thead><tbody style="font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<tr style="font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><th class="ibm-table-row" scope="row" style="border-left-style: none; border-left-width: 0px; border-right-style: none; border-right-width: 0px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 2px; color: #666666; font-size: inherit; font-weight: normal; margin: 0px; outline: 0px; padding: 8px 10px 5px 3px; vertical-align: top;">Tutorial source code</th><td nowrap="nowrap" style="border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 3px; border-right-style: none; border-right-width: 0px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 2px; color: #555555; font-size: inherit; margin: 0px; outline: 0px; padding: 8px 5px 5px 3px; vertical-align: top;"><a href="http://www.ibm.com/developerworks/apps/download/index.jsp?contentid=620153&filename=ProcessingXMLwithjQuery-sourceCode.zip&method=http&locale=" style="border: 0px; color: #745285; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ProcessingXMLwithjQuery-sourceCode.zip</a></td><td nowrap="nowrap" style="border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 3px; border-right-style: none; border-right-width: 0px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 2px; color: #555555; font-size: inherit; margin: 0px; outline: 0px; padding: 8px 5px 5px 3px; vertical-align: top;">10KB</td></tr>
</tbody></table>
</div>
</div>
<div class="ibm-columns" style="border: 0px; clear: both; font-size: inherit; margin: 0px; outline: 0px; overflow: hidden; padding: 0px 10px 10px; vertical-align: baseline; width: 960px;">
<div class="ibm-col-6-4" style="border: 0px; clear: none; float: left; font-size: inherit; margin: 0px; min-height: 1px; outline: 0px; padding: 0px 10px; vertical-align: baseline; width: 620px;">
<h2 class="ibm-rule" id="resources" style="border-top-color: rgb(102, 102, 102); border-top-style: solid; border-width: 2px 0px 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.6em !important; margin: 5px 0px; outline: 0px; padding: 6px 0px 0px; vertical-align: baseline;">
Resources</h2>
<h3 class="dw-resources-category-heading" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.166em !important; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Learn</h3>
<ul class="ibm-bullet-list" style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style: none; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.howtocreate.co.uk/tutorials/javascript/domstructure" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">DOM objects and methods tutorial</a> (Mark "Tarquin" Wilton-Jones, January 2009): Find a comprehensive listing of all properties, collections, and methods of the W3C DOM.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">The <a href="https://developer.mozilla.org/en-US/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Mozilla Developer Center</a>: Visit a great resource for web developers.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="https://developer.mozilla.org/en/DOM/element.getElementsByTagName" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">element.getElementsByTagName</a>: On this page, find a thorough overview of the getElementsByTagName covered in this tutorial.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.subchild.com/liveXmlEdit/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">LiveXMLEditor</a>: View more information about LiveXMLEditor.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.slideshare.net/s.barysiuk/javascript-basics-and-dom-manipulation-presentation" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JavaScript and DOM basics</a>: View Siarhei Barysiuk's excellent slides.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://docs.jquery.com/Main_Page" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery JavaScript Library</a>: Visit jQuery's thorough documentation website.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 66px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/xml/library/x-feedjquery/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Process XML in the browser using jQuery</a> (Uche Ogbuji, developerWorks, December 2009): Find key information for processing namespaced XML and navigate some major pitfalls to gain the benefits of the popular Web application API.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 66px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/web/library/wa-jsdom/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JavaScript and the Document Object Model</a> (Nicholas Chase, developerWorks, July 2002): Look at the JavaScript approach to DOM and the building of a web page to which the user can add notes and edit note content.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/xml/tutorials/x-udom/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Understanding DOM</a> (Nicholas Chase, developerWorks, March 2007): In this tutorial, learn about the structure of a DOM document.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.w3schools.com/js/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JavaScript tutorial</a>: Learn how to use the scripting language of the web.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/xml" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">XML area on developerWorks</a>: Get the resources you need to advance your skills in the XML arena.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/mydeveloperworks" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">My developerWorks</a>: Personalize your developerWorks experience.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/certify/certs/01001503.shtml" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">IBM XML certification</a>: Find out how you can become an IBM-Certified Developer in XML and related technologies.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/views/xml/library.jsp" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">XML technical library</a>: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks. Also, read more <a href="http://www.ibm.com/developerworks/views/xml/libraryview.jsp?search_by=tip:" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">XML tips</a>.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/offers/techbriefings/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">developerWorks technical events and webcasts</a>: Stay current with technology in these sessions.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://twitter.com/developerworks/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">developerWorks on Twitter</a>: Join today to follow developerWorks tweets.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/podcast/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">developerWorks podcasts</a>: Listen to interesting interviews and discussions for software developers.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/offers/lp/demos/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">developerWorks on-demand demos</a>: Watch demos ranging from product installation and setup for beginners to advanced functionality for experienced developers.</li>
</ul>
<h3 class="dw-resources-category-heading" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.166em !important; margin: 5px 0px; outline: 0px; padding: 8px 0px 0px; vertical-align: baseline;">
Get products and technologies</h3>
<ul class="ibm-bullet-list" style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style: none; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 66px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://jquery.com/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery</a>: Download the jQuery JavaScript library, available under either the MIT or GNU Public License. You can either download it and serve it locally, or include and serve it directly from the <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Google CDN</a>.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://docs.jquery.com/Browser_compatibility" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">jQuery Browser Compatibility</a>: Visit this page for a list of recommended browsers.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://getfirebug.com/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Firebug</a>: Get the essential debugging tool for Firefox users.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="https://github.com/subchild/liveXmlEdit/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">LiveXMLEditor</a>: Try the XML editor created by the author of this tutorial.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://php.net/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">PHP: Hypertext Preprocessor</a>: Get the widely-used scripting language that is well suited for web development and can be embedded into HTML. This tutorial uses PHP 5.2 or higher.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 66px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/downloads/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">IBM product evaluation versions</a>: Download or <a href="http://www.ibm.com/developerworks/downloads/soasandbox/" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">explore the online trials in the IBM SOA Sandbox</a> and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.</li>
</ul>
<h3 class="dw-resources-category-heading" style="border: 0px; font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial; font-size: 1.166em !important; margin: 5px 0px; outline: 0px; padding: 8px 0px 0px; vertical-align: baseline;">
Discuss</h3>
<ul class="ibm-bullet-list" style="border: 0px; color: #333333; font-size: 1.166em; line-height: 1.5em; list-style: none; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 22px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;"><a href="http://www.ibm.com/developerworks/forums/dw_xforums.jsp" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">XML zone discussion forums</a>: Participate in any of several XML-related discussions.</li>
<li style="background: url(http://1.www.s81c.com/i/v17/bullets/ibm_lg_bullet_grey_on.gif) 0px 13px no-repeat; border: 0px; clear: left; font-size: inherit; height: 44px; margin: 0px; outline: 0px; padding: 5px 0px 5px 11px; vertical-align: baseline;">The <a href="http://www.ibm.com/developerworks/community" style="border: 0px; color: #745285; display: inline; font-size: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">developerWorks community</a>: Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-84445372294447368372014-05-12T10:36:00.000-04:002014-05-12T10:36:04.796-04:00Modernizr: A JS lib that detects HTML5 and CSS3 features in the user’s browser<h2>
<a href="http://modernizr.com/" target="_blank">Modernizr download & documentation</a></h2>
<strong style="border: 0px; color: #d91e76; font-family: TurkishCSs, proxima-nova-1, proxima-nova-2, Helmet, Freesans, sans-serif; font-size: 20px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Modernizr</strong><span style="background-color: #fafafa; color: #2a2a2a; font-family: TurkishCSs, proxima-nova-1, proxima-nova-2, Helmet, Freesans, sans-serif; font-size: 1.42em; line-height: 1.2;"> </span><span style="background-color: #fafafa; color: #2a2a2a; font-family: TurkishCSs, proxima-nova-1, proxima-nova-2, Helmet, Freesans, sans-serif; font-size: 1.42em; line-height: 1.2;">is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.</span><br />
<h2 style="background-color: #fafafa; border: 0px; color: #d91e76; font-family: athelas-1, athelas-2, Baskerville, Georgia, serif; font-size: 2em; font-weight: normal; line-height: 1.4em; margin: 0.5em 0px 0.25em; outline: 0px; padding: 0px; vertical-align: baseline;">
Why use Modernizr?</h2>
<div style="background-color: #fafafa; border: 0px; color: #2a2a2a; font-family: TurkishCSs, proxima-nova-1, proxima-nova-2, Helmet, Freesans, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 1em; margin-top: 1em; outline: 0px; padding: 0px; vertical-align: baseline;">
Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript <em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">and CSS</em> to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.</div>
<h2 style="background-color: #fafafa; border: 0px; color: #d91e76; font-family: athelas-1, athelas-2, Baskerville, Georgia, serif; font-size: 2em; font-weight: normal; line-height: 1.4em; margin: 0.5em 0px 0.25em; outline: 0px; padding: 0px; vertical-align: baseline;">
How it works</h2>
<div style="background-color: #fafafa; border: 0px; color: #2a2a2a; font-family: TurkishCSs, proxima-nova-1, proxima-nova-2, Helmet, Freesans, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 1em; margin-top: 1em; outline: 0px; padding: 0px; vertical-align: baseline;">
Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the <code style="background-color: rgba(217, 30, 118, 0.0980392); border: 1px solid rgba(0, 0, 0, 0.0980392); display: inline-block; font-family: Inconsolata, monospace, sans-serif; margin: 0px; outline: 0px; padding: 0px 2px; vertical-align: baseline;">html</code>element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes <a href="http://yepnopejs.com/" rel="external" style="-webkit-tap-highlight-color: rgb(217, 30, 118); -webkit-transition: color 0.2s ease-out; color: #3589db; transition: color 0.2s ease-out;">YepNope.js</a> for conditional loading of external <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.js</strong> and <strong style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">.css</strong> resources.</div>
<div style="background-color: #fafafa; border: 0px; color: #2a2a2a; font-family: TurkishCSs, proxima-nova-1, proxima-nova-2, Helmet, Freesans, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 1em; margin-top: 1em; outline: 0px; padding: 0px; vertical-align: baseline;">
Check out the <a href="http://modernizr.com/docs/#features-css" style="-webkit-tap-highlight-color: rgb(217, 30, 118); -webkit-transition: color 0.2s ease-out; color: #3589db; transition: color 0.2s ease-out;">full list of features</a> that Modernizr detects, or learn more about <a href="http://modernizr.com/docs/#load" style="-webkit-tap-highlight-color: rgb(217, 30, 118); -webkit-transition: color 0.2s ease-out; color: #3589db; transition: color 0.2s ease-out;">conditional resource loading with Modernizr</a>.</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-76768974787485881042014-05-12T09:46:00.001-04:002014-05-12T09:46:11.413-04:00Capturing Audio & Video in HTML5Original post link: <a href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/">http://www.html5rocks.com/en/tutorials/getusermedia/intro/</a><br />
<br />
<section class="byline" style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 0px auto;"><div class="byline-content">
<br />
<section class="author-images" style="float: left; margin: 0px auto;"><br /></section><section class="author-images" style="float: left; margin: 0px auto;"><br /></section><section class="author-images" style="float: left; margin: 0px auto;"><a href="http://www.html5rocks.com/profiles/#ericbidelman" style="color: #777777; display: inline-block; height: 86px; margin-right: 25px; width: 86px;"><img alt="Eric Bidelman" src="http://www.html5rocks.com/static/images/profiles/ericbidelman.png" itemprop="photo" style="border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; border-top-left-radius: 100%; border-top-right-radius: 100%; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; box-sizing: border-box; height: 80px; max-width: 100%; position: relative; vertical-align: middle; width: 80px;" title="Eric Bidelman" /></a></section><section class="meta" style="-webkit-font-smoothing: antialiased; float: left; font-size: 15px; margin: 0px auto; padding-top: 2px;"><div class="authors" style="color: #444444; font-size: 17px; padding-bottom: 6px;">
<span style="font-weight: 800;">By</span> <a href="http://www.html5rocks.com/profiles/#ericbidelman" style="color: #777777;">Eric Bidelman</a></div>
<div class="date">
<time pubdate="" style="display: block;"><span style="font-weight: 800;">Published:</span> February 22nd, 2012</time><time class="updated" style="display: block;"><span style="font-weight: 800;">Updated:</span> October 29th, 2013</time><span style="display: block;"><span style="font-weight: 800;">Comments:</span> <a class="load-comments" data-disqus-identifier="http://www.html5rocks.com/tutorials/getusermedia/intro/" href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/#disqus_thread" style="color: #777777;">159</a></span></div>
</section><br />
<div class="clear" style="clear: both; content: '';">
</div>
</div>
</section><br />
<h2 id="toc-into" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Introduction</h2>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Audio/Video capture has been <em>the</em> "Holy Grail" of web development for a long time. For many years we've had to rely on browser plugins (<a href="http://www.kevinmusselman.com/2009/02/access-webcam-with-flash/" style="color: #508b88;">Flash</a> or <a href="http://www.silverlightshow.net/items/Capturing-the-Webcam-in-Silverlight-4.aspx" style="color: #508b88;">Silverlight</a>) to get the job done. <a href="http://www.youtube.com/watch?v=SP_9zH9Q44o" style="color: #508b88;" target="_blank">Come on!</a></div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
HTML5 to the rescue. It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. <a href="http://www.html5rocks.com/tutorials/geolocation/trip_meter/" style="color: #508b88;">Geolocation</a> (GPS), the <a href="http://www.html5rocks.com/tutorials/device/orientation/" style="color: #508b88;">Orientation API</a>(accelerometer), <a href="http://www.html5rocks.com/tutorials/webgl/shaders/" style="color: #508b88;">WebGL</a> (GPU), and the <a href="http://www.html5rocks.com/tutorials/webaudio/intro/" style="color: #508b88;">Web Audio API</a> (audio hardware) are perfect examples. These features are ridiculously powerful, exposing high level JavaScript APIs that sit on top of the system's underlying hardware capabilities.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
This tutorial introduces a new API, <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" style="color: #508b88;"><code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">navigator.getUserMedia()</code></a>, which allows web apps to access a user's camera and microphone.</div>
<h2 id="toc-history" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
The road to getUserMedia()</h2>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
If you're not aware of its history, the way we arrived at the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> API is an interesting tale.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Several variants of "Media Capture APIs" have evolved over the past few years. Many folks recognized the need to be able to access native devices on the web, but that led everyone and their mom to put together a new spec. Things got so messy that the W3C finally decided to form a working group. Their sole purpose? Make sense of the madness! The <a href="http://www.w3.org/2009/dap/" style="color: #508b88;">Device APIs Policy (DAP) Working Group</a> has been tasked to consolidate + standardize the plethora of proposals.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
I'll try to summarize what happened in 2011...</div>
<h3 id="toc-round1" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Round 1: HTML Media Capture</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<a href="http://dev.w3.org/2009/dap/camera/" style="color: #508b88;">HTML Media Capture</a> was the DAP's first go at standardizing media capture on the web. It works by overloading the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><input type="file"></code> and adding new values for the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">accept</code> parameter.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
If you wanted to let users take a snapshot of themselves with the webcam, that's possible with <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">capture=camera</code>:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="tag" style="color: #89bdff;"><input</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">type</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"file"</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">accept</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"image/*;capture=camera"</span><span class="tag" style="color: #89bdff;">></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Recording a video or audio is similar:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="tag" style="color: #89bdff;"><input</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">type</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"file"</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">accept</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"video/*;capture=camcorder"</span><span class="tag" style="color: #89bdff;">></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><input</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">type</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"file"</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">accept</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"audio/*;capture=microphone"</span><span class="tag" style="color: #89bdff;">></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Kinda nice right? I particularly like that it reuses a file input. Semantically, it makes a lot of sense. Where this particular "API" falls short is the ability to do realtime effects (e.g. render live webcam data to a <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><canvas></code> and apply WebGL filters). HTML Media Capture only allows you to record a media file or take a snapshot in time.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<strong>Support:</strong></div>
<ul style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 1em 0px; padding: 0px 0px 0px 40px;">
<li><a href="http://developer.android.com/sdk/android-3.0.html" style="color: #508b88;">Android 3.0 browser</a> - one of the first implementations. Check out <a href="http://davidbcalhoun.com/2011/android-3-0-honeycomb-is-first-to-implement-the-device-api" style="color: #508b88;">this video</a> to see it in action.</li>
<li>Chrome for Android (0.16)</li>
<li>Firefox Mobile 10.0</li>
<li>iOS6 Safari and Chrome (partial support)</li>
</ul>
<h3 id="toc-round2" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Round 2: device element</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Many thought HTML Media Capture was too limiting, so a new spec emerged that supported any type of (future) device. Not surprisingly, the design called for a new element, the <a href="http://dev.w3.org/html5/html-device/" style="color: #508b88;"><code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code> element</a>, which became the predecessor to<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code>.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Opera was among the first browsers to create <a href="http://my.opera.com/core/blog/2011/03/14/web-meet-device" style="color: #508b88;">initial implementations</a> of video capture based on the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code> element. Soon after (<a href="http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview" style="color: #508b88;">the same day</a> to be precise), the WhatWG decided to scrap the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code> tag in favor of another up and comer, this time a JavaScript API called <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">navigator.getUserMedia()</code>. A week later, Opera put out new builds that included support for the updated <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code>spec. Later that year, Microsoft joined the party by releasing a <a href="http://blogs.msdn.com/b/ie/archive/2011/12/09/media-capture-api-helping-web-developers-directly-import-image-video-and-sound-data-into-web-apps.aspx" style="color: #508b88;">Lab for IE9</a>supporting the new spec.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Here's what <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code> would have looked like:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="tag" style="color: #89bdff;"><device</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">type</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"media"</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">onchange</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"</span><span class="pln">update</span><span class="pun">(</span><span class="kwd" style="color: #e28964;">this</span><span class="pun">.</span><span class="pln">data</span><span class="pun">)</span><span class="atv" style="color: #65b042;">"</span><span class="tag" style="color: #89bdff;">></device></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><video</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">autoplay</span><span class="tag" style="color: #89bdff;">></video></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><script></span><span class="pln">
</span><span class="kwd" style="color: #e28964;">function</span><span class="pln"> update</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'video'</span><span class="pun">).</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> stream</span><span class="pun">.</span><span class="pln">url</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag" style="color: #89bdff;"></script></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<strong>Support:</strong></div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Unfortunately, no released browser ever included <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code>. One less API to worry about I guess :) <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code> did have two great things going for it though: 1.) it was semantic, and 2.) it was easily extendible to support more than just audio/video devices.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Take a breath. This stuff moves fast!</div>
<h3 id="toc-round3" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Round 3: WebRTC</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
The <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><device></code> element eventually went the way of the Dodo.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
The pace to find a suitable capture API accelerated thanks to the larger <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" style="color: #508b88;">WebRTC</a>(Web Real Time Communications) effort. That spec is overseen by the <a href="http://www.w3.org/2011/04/webrtc/" style="color: #508b88;">W3C WebRTC Working Group</a>. Google, Opera, Mozilla, and <a href="http://webrtc.org/" style="color: #508b88;">a few others</a> have implementations.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> is related to WebRTC because it's the gateway into that set of APIs. It provides the means to access the user's local camera/microphone stream.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<strong>Support:</strong></div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> has been supported since Chrome 21, Opera 18, and Firefox 17.</div>
<h2 id="toc-gettingstarted" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Getting started</h2>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
With <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">navigator.getUserMedia()</code>, we can finally tap into webcam and microphone input without a plugin. Camera access is now a call away, not an install away. It's baked directly into the browser. Excited yet?</div>
<h3 id="toc-featuredecting" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Feature detection</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Feature detecting is a simple check for the existence of<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">navigator.getUserMedia</code>:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="kwd" style="color: #e28964;">function</span><span class="pln"> hasGetUserMedia</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">return</span><span class="pln"> </span><span class="pun">!!(</span><span class="pln">navigator</span><span class="pun">.</span><span class="pln">getUserMedia </span><span class="pun">||</span><span class="pln"> navigator</span><span class="pun">.</span><span class="pln">webkitGetUserMedia </span><span class="pun">||</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">mozGetUserMedia </span><span class="pun">||</span><span class="pln"> navigator</span><span class="pun">.</span><span class="pln">msGetUserMedia</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">hasGetUserMedia</span><span class="pun">())</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// Good to go!</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
alert</span><span class="pun">(</span><span class="str" style="color: #65b042;">'getUserMedia() is not supported in your browser'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
You can also <a href="http://modernizr.com/" style="color: #508b88;">use Modernizr</a> to detect <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia</code> to avoid the vendor prefix dance yourself:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="typ" style="color: #89bdff;">Modernizr</span><span class="pun">.</span><span class="pln">getusermedia</span><span class="pun">){</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> gUM </span><span class="pun">=</span><span class="pln"> </span><span class="typ" style="color: #89bdff;">Modernizr</span><span class="pun">.</span><span class="pln">prefixed</span><span class="pun">(</span><span class="str" style="color: #65b042;">'getUserMedia'</span><span class="pun">,</span><span class="pln"> navigator</span><span class="pun">);</span><span class="pln">
gUM</span><span class="pun">({</span><span class="pln">video</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">},</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln"> </span><span class="com" style="color: #aeaeae; font-style: italic;">//...</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">//...</span><span class="pln">
</span><span class="pun">}</span></code></pre>
<h3 id="toc-acccess" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Gaining access to an input device</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
To use the webcam or microphone, we need to request permission. The first parameter to <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> is an object specifying the details and requirements for each type of media you want to access. For example, if you want to access the webcam, the first parameter should be <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">{video: true}</code>. To use both the microphone and camera, pass <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">{video: true, audio: true}</code>:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="tag" style="color: #89bdff;"><video</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">autoplay</span><span class="tag" style="color: #89bdff;">></video></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><script></span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> errorCallback </span><span class="pun">=</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str" style="color: #65b042;">'Reeeejected!'</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">);</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// Not showing vendor prefixes.</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">({</span><span class="pln">video</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">,</span><span class="pln"> audio</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">},</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">localMediaStream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> video </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'video'</span><span class="pun">);</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">URL</span><span class="pun">.</span><span class="pln">createObjectURL</span><span class="pun">(</span><span class="pln">localMediaStream</span><span class="pun">);</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// See crbug.com/110938.</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">onloadedmetadata </span><span class="pun">=</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// Ready to go. Do some stuff.</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> errorCallback</span><span class="pun">);</span><span class="pln">
</span><span class="tag" style="color: #89bdff;"></script></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
OK. So what's going on here? Media capture is a perfect example of new HTML5 APIs working together. It works in conjunction with our other HTML5 buddies,<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><audio></code> and <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><video></code>. Notice that we're not setting a <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">src</code> attribute or including<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><source></code> elements on the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><video></code> element. Instead of feeding the video a URL to a media file, we're feeding it a <a href="http://www.html5rocks.com/tutorials/workers/basics/#toc-inlineworkers-bloburis" style="color: #508b88;">Blob URL</a> obtained from a <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">LocalMediaStream</code>object representing the webcam.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
I'm also telling the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><video></code> to <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">autoplay</code>, otherwise it would be frozen on the first frame. Adding <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">controls</code> also works as you'd expected.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
If you want something that works cross-browser, try this:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="pln">navigator</span><span class="pun">.</span><span class="pln">getUserMedia </span><span class="pun">=</span><span class="pln"> navigator</span><span class="pun">.</span><span class="pln">getUserMedia </span><span class="pun">||</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">webkitGetUserMedia </span><span class="pun">||</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">mozGetUserMedia </span><span class="pun">||</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">msGetUserMedia</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> video </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'video'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">({</span><span class="pln">audio</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">,</span><span class="pln"> video</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">},</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">URL</span><span class="pun">.</span><span class="pln">createObjectURL</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">);</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> errorCallback</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str" style="color: #65b042;">'somevideo.webm'</span><span class="pun">;</span><span class="pln"> </span><span class="com" style="color: #aeaeae; font-style: italic;">// fallback.</span><span class="pln">
</span><span class="pun">}</span></code></pre>
<h3 id="toc-constraints" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Setting media constraints (resolution, height, width)</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
The first parameter to <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> can also be used to specify more requirements (or constraints) on the returned media stream. For example, instead of just indicating you want basic access to video (e.g. <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">{vide: true}</code>), you can additionally require the stream to be HD:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="kwd" style="color: #e28964;">var</span><span class="pln"> hdConstraints </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
mandatory</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
minWidth</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">1280</span><span class="pun">,</span><span class="pln">
minHeight</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">720</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">(</span><span class="pln">hdConstraints</span><span class="pun">,</span><span class="pln"> successCallback</span><span class="pun">,</span><span class="pln"> errorCallback</span><span class="pun">);</span><span class="pln">
</span><span class="pun">...</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> vgaConstraints </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
mandatory</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
maxWidth</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">640</span><span class="pun">,</span><span class="pln">
maxHeight</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">360</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">(</span><span class="pln">vgaConstraints</span><span class="pun">,</span><span class="pln"> successCallback</span><span class="pun">,</span><span class="pln"> errorCallback</span><span class="pun">);</span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
For more configurations, see the <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html#idl-def-MediaTrackConstraints" style="color: #508b88;">constraints API</a></div>
<h3 id="toc-source" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Selecting a media source</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
In Chrome 30 or later, <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> also supports selecting the the video/audio source using the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">MediaStreamTrack.getSources()</code> API.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
In this example, the last microphone and camera that's found is selected as the media stream source:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="typ" style="color: #89bdff;">MediaStreamTrack</span><span class="pun">.</span><span class="pln">getSources</span><span class="pun">(</span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">sourceInfos</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> audioSource </span><span class="pun">=</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">null</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> videoSource </span><span class="pun">=</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">null</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">!=</span><span class="pln"> sourceInfos</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> </span><span class="pun">++</span><span class="pln">i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> sourceInfo </span><span class="pun">=</span><span class="pln"> sourceInfos</span><span class="pun">[</span><span class="pln">i</span><span class="pun">];</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">sourceInfo</span><span class="pun">.</span><span class="pln">kind </span><span class="pun">===</span><span class="pln"> </span><span class="str" style="color: #65b042;">'audio'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">sourceInfo</span><span class="pun">.</span><span class="pln">id</span><span class="pun">,</span><span class="pln"> sourceInfo</span><span class="pun">.</span><span class="pln">label </span><span class="pun">||</span><span class="pln"> </span><span class="str" style="color: #65b042;">'microphone'</span><span class="pun">);</span><span class="pln">
audioSource </span><span class="pun">=</span><span class="pln"> sourceInfo</span><span class="pun">.</span><span class="pln">id</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">else</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">sourceInfo</span><span class="pun">.</span><span class="pln">kind </span><span class="pun">===</span><span class="pln"> </span><span class="str" style="color: #65b042;">'video'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">sourceInfo</span><span class="pun">.</span><span class="pln">id</span><span class="pun">,</span><span class="pln"> sourceInfo</span><span class="pun">.</span><span class="pln">label </span><span class="pun">||</span><span class="pln"> </span><span class="str" style="color: #65b042;">'camera'</span><span class="pun">);</span><span class="pln">
videoSource </span><span class="pun">=</span><span class="pln"> sourceInfo</span><span class="pun">.</span><span class="pln">id</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str" style="color: #65b042;">'Some other kind of source: '</span><span class="pun">,</span><span class="pln"> sourceInfo</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
sourceSelected</span><span class="pun">(</span><span class="pln">audioSource</span><span class="pun">,</span><span class="pln"> videoSource</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">function</span><span class="pln"> sourceSelected</span><span class="pun">(</span><span class="pln">audioSource</span><span class="pun">,</span><span class="pln"> videoSource</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> constraints </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
audio</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
optional</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">sourceId</span><span class="pun">:</span><span class="pln"> audioSource</span><span class="pun">}]</span><span class="pln">
</span><span class="pun">},</span><span class="pln">
video</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
optional</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">sourceId</span><span class="pun">:</span><span class="pln"> videoSource</span><span class="pun">}]</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">(</span><span class="pln">constraints</span><span class="pun">,</span><span class="pln"> successCallback</span><span class="pun">,</span><span class="pln"> errorCallback</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Check out Sam Dutton's <a href="https://simpl.info/getusermedia/sources/" style="color: #508b88;">great demo</a> of how to let users select the media source.</div>
<h3 id="toc-security" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Security</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Some browsers throw up an infobar upon calling <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code>, which gives users the option to grant or deny access to their camera/mic. The spec unfortunately is very quiet when it comes to security. For example, here is Chrome's permission dialog:</div>
<br />
<figure style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 0px 0px 1em; text-align: center;"><img alt="Permission dialog in Chrome" src="http://www.html5rocks.com/en/tutorials/getusermedia/intro/permission.png" style="border: 0px; box-sizing: border-box; max-width: 100%; vertical-align: middle;" title="Permission dialog in Chrome" /><figcaption style="color: #333333; font-size: 15px; font-style: italic; font-weight: bold; margin: 1em auto 2em; width: 528px;">Permission dialog in Chrome</figcaption></figure><br />
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
If your app is running from SSL (<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">https://</code>), this permission will be persistent. That is, users won't have to grant/deny access every time.</div>
<h3 id="toc-fallback" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Providing fallback</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
For users that don't have support for <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code>, one option is to fallback to an existing video file if the API isn't supported and/or the call fails for some reason:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="com" style="color: #aeaeae; font-style: italic;">// Not showing vendor prefixes or code that works cross-browser:</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">function</span><span class="pln"> fallback</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> </span><span class="str" style="color: #65b042;">'fallbackvideo.webm'</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">function</span><span class="pln"> success</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">URL</span><span class="pun">.</span><span class="pln">createObjectURL</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
fallback</span><span class="pun">();</span><span class="pln">
</span><span class="pun">}</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">({</span><span class="pln">video</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">},</span><span class="pln"> success</span><span class="pun">,</span><span class="pln"> fallback</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span></code></pre>
<h3 id="toc-basic-demo" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Basic demo</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; text-align: center;">
<video autoplay="" class="videostream" id="basic-stream" style="background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(204, 204, 204); display: inline-block; height: 250px; width: 307px;"></video><br />
<div style="margin-bottom: 0.8em; margin-top: 0.4em;">
<button id="capture-button" style="background-color: #333333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; color: white; cursor: pointer; font-family: sans-serif; margin: 0px; padding: 10px 14px; vertical-align: baseline;">Capture video</button> <button id="stop-button" style="background-color: #333333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; color: white; cursor: pointer; font-family: sans-serif; margin: 0px; padding: 10px 14px; vertical-align: baseline;">Stop</button></div>
</div>
<h2 id="toc-screenshot" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Taking screenshots</h2>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
The <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><canvas></code> API's <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">ctx.drawImage(video, 0, 0)</code> method makes it trivial to draw <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><video></code> frames to <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><canvas></code>. Of course, now that we have video input via<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code>, it's just as easy to create a photo booth application with realtime video:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="tag" style="color: #89bdff;"><video</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">autoplay</span><span class="tag" style="color: #89bdff;">></video></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><img</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">src</span><span class="pun">=</span><span class="atv" style="color: #65b042;">""</span><span class="tag" style="color: #89bdff;">></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><canvas</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">style</span><span class="pun">=</span><span class="atv" style="color: #65b042;">"</span><span class="kwd" style="color: #e28964;">display</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="atv" style="color: #65b042;">"</span><span class="tag" style="color: #89bdff;">></canvas></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><script></span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> video </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'video'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> canvas </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'canvas'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> ctx </span><span class="pun">=</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">getContext</span><span class="pun">(</span><span class="str" style="color: #65b042;">'2d'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> localMediaStream </span><span class="pun">=</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">null</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">function</span><span class="pln"> snapshot</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">localMediaStream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
ctx</span><span class="pun">.</span><span class="pln">drawImage</span><span class="pun">(</span><span class="pln">video</span><span class="pun">,</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">0</span><span class="pun">);</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// "image/webp" works in Chrome.</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// Other browsers will fall back to image/png.</span><span class="pln">
document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'img'</span><span class="pun">).</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">toDataURL</span><span class="pun">(</span><span class="str" style="color: #65b042;">'image/webp'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str" style="color: #65b042;">'click'</span><span class="pun">,</span><span class="pln"> snapshot</span><span class="pun">,</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">false</span><span class="pun">);</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// Not showing vendor prefixes or code that works cross-browser.</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">({</span><span class="pln">video</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">},</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
video</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="pln">URL</span><span class="pun">.</span><span class="pln">createObjectURL</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">);</span><span class="pln">
localMediaStream </span><span class="pun">=</span><span class="pln"> stream</span><span class="pun">;</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> errorCallback</span><span class="pun">);</span><span class="pln">
</span><span class="tag" style="color: #89bdff;"></script></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; text-align: center;">
<video autoplay="" class="videostream" id="screenshot-stream" style="background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(204, 204, 204); display: inline-block; height: 250px; width: 307px;"></video> <img src="http://www.html5rocks.com/en/tutorials/getusermedia/intro/" id="screenshot" style="border: 0px; box-sizing: border-box; height: 250px; max-width: 100%; vertical-align: top; width: 307px;" /><br />
<div style="margin-bottom: 0.8em; margin-top: 0.4em;">
<button id="screenshot-button" style="background-color: #333333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; color: white; cursor: pointer; font-family: sans-serif; margin: 0px; padding: 10px 14px; vertical-align: baseline;">Capture</button> <button id="screenshot-stop-button" style="background-color: #333333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; color: white; cursor: pointer; font-family: sans-serif; margin: 0px; padding: 10px 14px; vertical-align: baseline;">Stop</button></div>
</div>
<h2 id="toc-effects" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Applying Effects</h2>
<h3 id="toc-effects-css" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
CSS Filters</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Using <a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html" style="color: #508b88;">CSS Filters</a>, we can apply some gnarly effects to the <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;"><video></code> as it is captured:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="tag" style="color: #89bdff;"><style></span><span class="pln">
video </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">307px</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">250px</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">background</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit" style="color: #3387cc;">255</span><span class="pun">,</span><span class="lit" style="color: #3387cc;">255</span><span class="pun">,</span><span class="lit" style="color: #3387cc;">255</span><span class="pun">,</span><span class="lit" style="color: #3387cc;">0.5</span><span class="pun">);</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">border</span><span class="pun">:</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">1px</span><span class="pln"> solid </span><span class="lit" style="color: #3387cc;">#ccc</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">grayscale </span><span class="pun">{</span><span class="pln">
</span><a aria-describedby="tooltip-1758.977296" class="noexternal tooltip" data-tooltip="/*Vendor prefixes required. Try Compass/SASS.*/
-webkit-filter: ...
-moz-filter: ...
-ms-filter: ...
-o-filter: ...
filter: ..." href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#including_a_mixin" id="tooltip-1758.977296" role="tooltip" style="color: #508b88; cursor: pointer; position: relative; text-decoration: none;" target="_blank"><span class="pun" style="color: white;">+</span><span class="property" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: dotted; border-bottom-width: 1px;"><span class="kwd">filter</span><span class="pun" style="color: white;">:</span></span><span class="pln" style="color: white;"> grayscale</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: #3387cc;">1</span><span class="pun" style="color: white;">);</span></a><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">sepia </span><span class="pun">{</span><span class="pln">
</span><a aria-describedby="tooltip-1758.977296" class="noexternal tooltip" data-tooltip="/*Vendor prefixes required. Try Compass/SASS.*/
-webkit-filter: ...
-moz-filter: ...
-ms-filter: ...
-o-filter: ...
filter: ..." href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#including_a_mixin" id="tooltip-1758.977296" role="tooltip" style="color: #508b88; cursor: pointer; position: relative; text-decoration: none;" target="_blank"><span class="pun" style="color: white;">+</span><span class="property" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: dotted; border-bottom-width: 1px;"><span class="kwd">filter</span><span class="pun" style="color: white;">:</span></span><span class="pln" style="color: white;"> sepia</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: #3387cc;">1</span><span class="pun" style="color: white;">);</span></a><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">blur </span><span class="pun">{</span><span class="pln">
</span><a aria-describedby="tooltip-1758.977296" class="noexternal tooltip" data-tooltip="/*Vendor prefixes required. Try Compass/SASS.*/
-webkit-filter: ...
-moz-filter: ...
-ms-filter: ...
-o-filter: ...
filter: ..." href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#including_a_mixin" id="tooltip-1758.977296" role="tooltip" style="color: #508b88; cursor: pointer; position: relative; text-decoration: none;" target="_blank"><span class="pun" style="color: white;">+</span><span class="property" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: dotted; border-bottom-width: 1px;"><span class="kwd">filter</span><span class="pun" style="color: white;">:</span></span><span class="pln" style="color: white;"> blur</span><span class="pun" style="color: white;">(</span><span class="lit" style="color: #3387cc;">3px</span><span class="pun" style="color: white;">);</span></a><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">...</span><span class="pln">
</span><span class="tag" style="color: #89bdff;"></style></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><video</span><span class="pln"> </span><span class="atn" style="color: darkkhaki;">autoplay</span><span class="tag" style="color: #89bdff;">></video></span><span class="pln">
</span><span class="tag" style="color: #89bdff;"><script></span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> idx </span><span class="pun">=</span><span class="pln"> </span><span class="lit" style="color: #3387cc;">0</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> filters </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="str" style="color: #65b042;">'grayscale'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'sepia'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'blur'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'brightness'</span><span class="pun">,</span><span class="pln">
</span><span class="str" style="color: #65b042;">'contrast'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'hue-rotate'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'hue-rotate2'</span><span class="pun">,</span><span class="pln">
</span><span class="str" style="color: #65b042;">'hue-rotate3'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'saturate'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">'invert'</span><span class="pun">,</span><span class="pln"> </span><span class="str" style="color: #65b042;">''</span><span class="pun">];</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">function</span><span class="pln"> changeFilter</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> el </span><span class="pun">=</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">;</span><span class="pln">
el</span><span class="pun">.</span><span class="pln">className </span><span class="pun">=</span><span class="pln"> </span><span class="str" style="color: #65b042;">''</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> effect </span><span class="pun">=</span><span class="pln"> filters</span><span class="pun">[</span><span class="pln">idx</span><span class="pun">++</span><span class="pln"> </span><span class="pun">%</span><span class="pln"> filters</span><span class="pun">.</span><span class="pln">length</span><span class="pun">];</span><span class="pln"> </span><span class="com" style="color: #aeaeae; font-style: italic;">// loop through filters.</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">effect</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
el</span><span class="pun">.</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">effect</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str" style="color: #65b042;">'video'</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="pln">
</span><span class="str" style="color: #65b042;">'click'</span><span class="pun">,</span><span class="pln"> changeFilter</span><span class="pun">,</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">false</span><span class="pun">);</span><span class="pln">
</span><span class="tag" style="color: #89bdff;"></script></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; text-align: center;">
<video alt="Click me to apply CSS Filters" autoplay="" class="videostream" id="cssfilters-stream" style="background-color: rgba(255, 255, 255, 0.498039); background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(204, 204, 204); display: inline-block; height: 250px; width: 307px;" title="Click me to apply CSS Filters"></video><br />
<div style="margin-bottom: 0.8em; margin-top: 0.4em;">
Click the video to cycle through CSS filters</div>
<div style="margin-bottom: 0.8em; margin-top: 0.4em;">
<button id="capture-button2" style="background-color: #333333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; color: white; cursor: pointer; font-family: sans-serif; margin: 0px; padding: 10px 14px; vertical-align: baseline;">Capture video</button> <button id="stop-button2" style="background-color: #333333; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0px; color: white; cursor: pointer; font-family: sans-serif; margin: 0px; padding: 10px 14px; vertical-align: baseline;">Stop</button></div>
</div>
<h3 id="toc-effects-webgl" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
WebGL Textures</h3>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
One amazing use case for video capture is to render live input as a WebGL texture. Since I know absolutely nothing about WebGL (other than it's sweet), I'm going to suggest you give Jerome Etienne's <a href="http://learningthreejs.com/blog/2012/02/07/live-video-in-webgl/" style="color: #508b88;">tutorial</a> and <a href="http://learningthreejs.com/data/live-video-in-webgl/" style="color: #508b88;">demo</a> a look. It talks about how to use <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> and <a href="http://www.html5rocks.com/tutorials/three/intro/" style="color: #508b88;">Three.js</a> to render live video into WebGL.</div>
<h2 id="toc-webaudio-api" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Using getUserMedia with the Web Audio API</h2>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
One of my dreams is to build AutoTune in the browser with nothing more than open web technology!</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Chrome supports live microphone input from <code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> to the <a href="http://www.html5rocks.com/tutorials/webaudio/intro/" style="color: #508b88;">Web Audio API</a> for real-time effects. Piping microphone input to the Web Audio API looks like this:</div>
<pre class="prettyprint" style="background-color: #444444; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; color: white; font-family: 'Source Code Pro', monospace; font-size: 15px; line-height: 1.3; margin-bottom: 2em; padding: 1em; white-space: pre-wrap; word-wrap: break-word;"><code style="font-family: 'Source Code Pro', monospace; font-size: 1em;"><span class="pln">window</span><span class="pun">.</span><span class="typ" style="color: #89bdff;">AudioContext</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> window</span><span class="pun">.</span><span class="typ" style="color: #89bdff;">AudioContext</span><span class="pln"> </span><span class="pun">||</span><span class="pln">
window</span><span class="pun">.</span><span class="pln">webkitAudioContext</span><span class="pun">;</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> context </span><span class="pun">=</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">new</span><span class="pln"> </span><span class="typ" style="color: #89bdff;">AudioContext</span><span class="pun">();</span><span class="pln">
navigator</span><span class="pun">.</span><span class="pln">getUserMedia</span><span class="pun">({</span><span class="pln">audio</span><span class="pun">:</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">true</span><span class="pun">},</span><span class="pln"> </span><span class="kwd" style="color: #e28964;">function</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> microphone </span><span class="pun">=</span><span class="pln"> context</span><span class="pun">.</span><span class="pln">createMediaStreamSource</span><span class="pun">(</span><span class="pln">stream</span><span class="pun">);</span><span class="pln">
</span><span class="kwd" style="color: #e28964;">var</span><span class="pln"> filter </span><span class="pun">=</span><span class="pln"> context</span><span class="pun">.</span><span class="pln">createBiquadFilter</span><span class="pun">();</span><span class="pln">
</span><span class="com" style="color: #aeaeae; font-style: italic;">// microphone -> filter -> destination.</span><span class="pln">
microphone</span><span class="pun">.</span><span class="pln">connect</span><span class="pun">(</span><span class="pln">filter</span><span class="pun">);</span><span class="pln">
filter</span><span class="pun">.</span><span class="pln">connect</span><span class="pun">(</span><span class="pln">context</span><span class="pun">.</span><span class="pln">destination</span><span class="pun">);</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> errorCallback</span><span class="pun">);</span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Demos:</div>
<ul style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 1em 0px; padding: 0px 0px 0px 40px;">
<li><a href="http://webaudiodemos.appspot.com/input/index.html" style="color: #508b88;">Live Input Visualizer</a></li>
<li><a href="http://webaudiodemos.appspot.com/AudioRecorder/index.html" style="color: #508b88;">Audio Recorder</a></li>
<li><a href="http://webaudiodemos.appspot.com/pitchdetect/index.html" style="color: #508b88;">Pitch Detector</a></li>
</ul>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
For more information, see <a href="http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled" style="color: #508b88;">Chris Wilson's post</a>.</div>
<h2 id="toc-conclusion" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Conclusion</h2>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
In general, device access on the web has been a tough cookie to crack. Many<a href="http://www.slideshare.net/jamesgpearce/mobile-device-apis" style="color: #508b88;">people have tried</a>, few have succeeded. Most of the early ideas have never taken hold outside of a proprietary environment nor have they gained widespread adoption.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
The real problem is that the web's security model is <em>very</em> different from the native world. For example, I probably don't want every Joe Shmoe web site to have random access to my video camera. It's a tough problem to get right.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
Bridging frameworks like <a href="http://phonegap.com/" style="color: #508b88;">PhoneGap</a> have helped push the boundary, but they're only a start and a temporary solution to an underlying problem. To make web apps competitive to their desktop counterparts, we need access to native devices.</div>
<div style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin-bottom: 0.8em; margin-top: 0.4em;">
<code style="color: #333333; font-family: 'Source Code Pro', monospace; font-size: 0.9em;">getUserMedia()</code> is but the first wave of access to new types of devices. I hope we'll continue to see more in the very near future!</div>
<h2 id="toc-resources" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 24px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Additional resources</h2>
<ul style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 1em 0px; padding: 0px 0px 0px 40px;">
<li><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" style="color: #508b88;">W3C specification</a></li>
<li>Bruce Lawson's <a href="http://html5doctor.com/getusermedia/" style="color: #508b88;">HTML5Doctor article</a></li>
<li>Bruce Lawson's <a href="http://dev.opera.com/articles/view/getusermedia-access-camera-privacy-ui/" style="color: #508b88;">dev.opera.com article</a></li>
</ul>
<h3 id="toc-demos" style="background-color: white; clear: both; color: #333333; font-family: 'Open Sans'; font-size: 22px; margin: 1.3em 0px 0.7em; max-width: 85%;">
Demos</h3>
<ul style="background-color: white; color: #555555; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 1em 0px; padding: 0px 0px 0px 40px;">
<li><a href="http://html5-demos.appspot.com/static/getusermedia/photobooth.html" style="color: #508b88;">Live Photo booth</a></li>
<li>Paul Neave's <a href="http://neave.com/webcam/html5/" style="color: #508b88;">WebGL Camera Effects</a></li>
<li><a href="http://html5photobooth.com/" style="color: #508b88;">Snapster</a></li>
<li><a href="http://learningthreejs.com/data/live-video-in-webgl/" style="color: #508b88;">Live video in WebGL</a></li>
<li><a href="http://www.soundstep.com/blog/experiments/jsdetection/" style="color: #508b88;">Play Xylophone with your hands</a></li>
</ul>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-22548964940032860142014-05-02T17:20:00.001-04:002014-05-02T17:20:29.265-04:00Browser Kernels<h2>
Browser Kernels and Their Representative Browsers</h2>
Data source: <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">http://en.wikipedia.org/wiki/List_of_web_browsers</a><br />
<h2 style="background-color: white; background-image: none; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'Linux Libertine', Georgia, Times, serif; font-weight: normal; line-height: 1.3; margin: 1em 0px 0.25em; overflow: hidden; padding: 0px;">
<span class="mw-headline" id="Notable_layout_engines">Notable layout engines</span></h2>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Gecko_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Gecko (layout engine)">Gecko</a> is developed by the <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mozilla Foundation">Mozilla Foundation</a>.</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/KHTML" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="KHTML">KHTML</a> is developed by the <a href="http://en.wikipedia.org/wiki/KDE" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="KDE">KDE</a> project.</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Presto_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Presto (layout engine)">Presto</a> is developed by <a href="http://en.wikipedia.org/wiki/Opera_Software" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Opera Software">Opera Software</a> for use in <a href="http://en.wikipedia.org/wiki/Opera_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Opera (web browser)">Opera</a>. Development stopped as Opera transitions to Blink.</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Tasman_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Tasman (layout engine)">Tasman</a> was developed by Microsoft for use in <a href="http://en.wikipedia.org/wiki/Internet_Explorer_for_Mac" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet Explorer for Mac">Internet Explorer 5 for Macintosh</a>.</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Trident_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Trident (layout engine)">Trident</a> is developed by <a href="http://en.wikipedia.org/wiki/Microsoft" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Microsoft">Microsoft</a> for use in the <a href="http://en.wikipedia.org/wiki/Microsoft_Windows" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Microsoft Windows">Windows</a> version of their web browser, from <a href="http://en.wikipedia.org/wiki/Internet_Explorer_4" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet Explorer 4">Internet Explorer 4</a> to the present time.</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/WebKit" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="WebKit">WebKit</a> is a fork of KHTML by <a href="http://en.wikipedia.org/wiki/Apple_Inc." style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Apple Inc.">Apple Inc.</a> used in Apple <a href="http://en.wikipedia.org/wiki/Safari_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Safari (web browser)">Safari</a>, <a href="http://en.wikipedia.org/wiki/Chromium_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Chromium (web browser)">Chromium</a> and <a href="http://en.wikipedia.org/wiki/Google_Chrome" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Google Chrome">Google Chrome</a>.</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Blink_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Blink (layout engine)">Blink</a> is a 2013 fork of WebKit by Google used in Chromium, Google Chrome and Opera.<sup class="reference" id="cite_ref-ars-blink_19-0" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-ars-blink-19" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[19]</a></sup></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Servo_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Servo (layout engine)">Servo</a> is an experimental web browser layout engine being developed cooperatively by Mozilla and Samsung.</li>
</ul>
<div>
<span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px; line-height: 22.390625px;"><br /></span></span></div>
<div>
<h2 style="background-color: white; background-image: none; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'Linux Libertine', Georgia, Times, serif; font-weight: normal; line-height: 1.3; margin: 1em 0px 0.25em; overflow: hidden; padding: 0px;">
<span class="mw-headline" id="Graphical">Graphical</span></h2>
<div style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.5em;">
<i>Current/maintained projects are in <b>boldface.</b></i></div>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Trident_shells">Trident <a href="http://en.wikipedia.org/wiki/Internet_Explorer_shell" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet Explorer shell">shells</a></span></h3>
<div style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.5em;">
Other software publishers have built browsers and other products around Microsoft's Trident engine. The following browsers are all based on that rendering engine:</div>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/360_Secure_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="360 Secure Browser">360 Secure Browser</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/AOL_Explorer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AOL Explorer">AOL Explorer</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Winamp" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Winamp">Bento Browser</a></b> (built into <a href="http://en.wikipedia.org/wiki/Winamp" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Winamp">Winamp</a>)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/GreenBrowser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="GreenBrowser">GreenBrowser</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Internet_Explorer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet Explorer">Internet Explorer</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/MediaBrowser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="MediaBrowser">MediaBrowser</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/MenuBox" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="MenuBox">MenuBox</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/MSN_Explorer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="MSN Explorer">MSN Explorer</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/NeoPlanet" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="NeoPlanet">NeoPlanet</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/NetCaptor" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="NetCaptor">NetCaptor</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/RealPlayer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="RealPlayer">RealPlayer</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/SlimBrowser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="SlimBrowser">SlimBrowser</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Tencent_Traveler" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Tencent Traveler">Tencent Traveler</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/TomeRaider" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="TomeRaider">TomeRaider</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/UltraBrowser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="UltraBrowser">UltraBrowser</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/WebbIE" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="WebbIE">WebbIE</a></b></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Gecko-based">Gecko-based</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Firefox" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Firefox">Mozilla Firefox</a></b> (formerly <i>Firebird</i> and <i>Phoenix</i>)</li>
</ul>
<dl style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.2em;"><dd style="line-height: 1.6em; margin-bottom: 0.1em; margin-left: 1.6em; margin-right: 0px;"><ul style="line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Netscape_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape Browser">Netscape Browser 8</a> to <a href="http://en.wikipedia.org/wiki/Netscape_Navigator_9" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape Navigator 9">Netscape Navigator 9</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Iceweasel" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Iceweasel">Iceweasel</a></b>, <a href="http://en.wikipedia.org/wiki/Debian" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Debian">Debian</a>'s Firefox rebrand</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/GNU_IceCat" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="GNU IceCat">GNU IceCat</a></b>, <a href="http://en.wikipedia.org/wiki/GNU" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="GNU">GNU</a>'s <a href="http://en.wikipedia.org/wiki/Fork_(software_development)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Fork (software development)">fork</a> of <a href="http://en.wikipedia.org/wiki/Firefox" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Firefox">Firefox</a></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Pale_Moon_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Pale Moon (web browser)">Pale Moon</a></b> (Windows-only optimized browser based on Firefox)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Comodo_IceDragon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Comodo IceDragon">Comodo IceDragon</a></b> (Firefox-based web browser for Windows)</li>
</ul>
</dd></dl>
<dl style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.2em;"><dd style="line-height: 1.6em; margin-bottom: 0.1em; margin-left: 1.6em; margin-right: 0px;"><ul style="line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/AT%26T_Pogo" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AT&T Pogo">AT&T Pogo</a> (discontinued; based on Firefox)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Flock_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Flock (web browser)">Flock</a> (discontinued; was based on <a href="http://en.wikipedia.org/wiki/Firefox" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Firefox">Firefox</a> until version 2.6.1, and based on <a href="http://en.wikipedia.org/wiki/Chromium_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Chromium (web browser)">Chromium</a> thereafter)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Swiftfox" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Swiftfox">Swiftfox</a></b> (discontinued; processor-optimised builds based on Firefox)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Swiftweasel" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Swiftweasel">Swiftweasel</a></b> (discontinued; processor-optimised builds based on Iceweasel)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/XB_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="XB Browser">xB Browser</a></b> (discontinued; formerly XeroBank Browser and Torpark), portable browser for anonymous browsing, originally based on Firefox</li>
</ul>
</dd></dl>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Firefox_for_mobile" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Firefox for mobile">Firefox for mobile</a></b> (codenamed <i>Fennec</i>)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Skyfire_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Skyfire (web browser)">Skyfire</a></b> (for mobile)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Camino" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Camino">Camino</a> for <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Mac_OS_X" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mac OS X">Mac OS X</a> (formerly <i>Chimera</i>)<sup class="reference" id="cite_ref-20" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-20" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[20]</a></sup> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Conkeror" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Conkeror">Conkeror</a></b>, keyboard-driven browser</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mozilla Application Suite">Mozilla Application Suite</a> (discontinued)</li>
</ul>
<dl style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.2em;"><dd style="line-height: 1.6em; margin-bottom: 0.1em; margin-left: 1.6em; margin-right: 0px;"><ul style="line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/SeaMonkey" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="SeaMonkey">SeaMonkey</a></b> (successor to Mozilla Application Suite)<ul style="line-height: 1.6em; list-style-image: url(data:image/png; list-style-type: disc; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Mozilla_Corporation_software_rebranded_by_the_Debian_project#Iceape" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mozilla Corporation software rebranded by the Debian project">Iceape</a></b> <a href="http://en.wikipedia.org/wiki/Debian" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Debian">Debian</a>'s Seamonkey rebrand</li>
</ul>
</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Classilla" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Classilla">Classilla</a></b> (an updated fork of the Suite to <a href="http://en.wikipedia.org/wiki/Mac_OS_9" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mac OS 9">Mac OS 9</a>)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Gnuzilla" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Gnuzilla">Gnuzilla</a></b> <a href="http://en.wikipedia.org/wiki/GNU" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="GNU">GNU</a>'s <a href="http://en.wikipedia.org/wiki/Fork_(software_development)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Fork (software development)">fork</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Netscape_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape (web browser)">Netscape</a> (discontinued; <a href="http://en.wikipedia.org/wiki/Netscape_6" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape 6">Netscape 6</a> to <a href="http://en.wikipedia.org/wiki/Netscape_(version_7)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape (version 7)">7</a>, based on <i>Mozilla</i>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Beonex_Communicator" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Beonex Communicator">Beonex Communicator</a> (separate <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Branch_(software)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Branch (software)">branch</a>, based on Mozilla Application Suite) (discontinued)</li>
</ul>
</dd></dl>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Yahoo!" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Yahoo!">Yahoo!</a> Browser (or partnership browsers e.g. "<a class="mw-redirect" href="http://en.wikipedia.org/wiki/AT%26T_Yahoo!" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AT&T Yahoo!">AT&T Yahoo!</a> Browser"; "<a class="mw-redirect" href="http://en.wikipedia.org/wiki/Verizon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Verizon">Verizon</a> Yahoo! Browser"; "<a href="http://en.wikipedia.org/wiki/BT_Group" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="BT Group">BT</a> Yahoo! Browser" etc.)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Galeon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Galeon">Galeon</a>, <a href="http://en.wikipedia.org/wiki/GNOME" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="GNOME">GNOME</a>'s old default browser (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/K-Meleon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="K-Meleon">K-Meleon</a></b> for <a href="http://en.wikipedia.org/wiki/Microsoft_Windows" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Microsoft Windows">Windows</a></li>
</ul>
<dl style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.2em;"><dd style="line-height: 1.6em; margin-bottom: 0.1em; margin-left: 1.6em; margin-right: 0px;"><ul style="line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/K-Ninja" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="K-Ninja">K-Ninja</a> for Windows (discontinued; based on K-Meleon)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/K-Meleon#K-MeleonCCF_ME" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="K-Meleon">K-MeleonCCF ME</a> for Windows (based on K-Meleon core, mostly written in <a href="http://en.wikipedia.org/wiki/Lua_(programming_language)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Lua (programming language)">Lua</a>)</li>
</ul>
</dd></dl>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/MicroB" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="MicroB">MicroB</a></b> (for <a href="http://en.wikipedia.org/wiki/Maemo" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Maemo">Maemo</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Minimo" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Minimo">Minimo</a> (for mobile, discontinued)</li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Gecko-_and_Trident-based">Gecko- and Trident-based</span></h3>
<div style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.5em;">
Browsers that use both <a href="http://en.wikipedia.org/wiki/Trident_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Trident (layout engine)">Trident</a> and <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Gecko_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Gecko (layout engine)">Gecko</a> include:</div>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/K-Meleon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="K-Meleon">K-Meleon</a> with the <a href="http://en.wikipedia.org/wiki/IE_Tab" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="IE Tab">IE Tab</a> extension</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Firefox" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Firefox">Mozilla Firefox</a></b> with the <a href="http://en.wikipedia.org/wiki/IE_Tab" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="IE Tab">IE Tab</a> extension</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Netscape_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape Browser">Netscape Browser</a> 8 (discontinued)</li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Webkit-_and_Trident-based">Webkit- and Trident-based</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Baidu" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Baidu">Baidu</a> Browser</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Maxthon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Maxthon">Maxthon</a></b> (formerly known as MyIE2)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Sleipnir_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Sleipnir (web browser)">Sleipnir</a></b></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Gecko-.2C_Trident-_and_WebKit-based">Gecko-, Trident- and WebKit-based</span></h3>
<div style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.5em;">
Browsers that can use <a href="http://en.wikipedia.org/wiki/Trident_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Trident (layout engine)">Trident</a>, <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Gecko_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Gecko (layout engine)">Gecko</a> and <a href="http://en.wikipedia.org/wiki/WebKit" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="WebKit">WebKit</a> include:</div>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Avant_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Avant Browser">Avant Browser</a></b><sup class="reference" id="cite_ref-21" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-21" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[21]</a></sup></li>
<li style="margin-bottom: 0.1em;"><b><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Lunascape_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Lunascape (web browser)">Lunascape</a></b><sup class="reference" id="cite_ref-22" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-22" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[22]</a></sup></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="KHTML-based">KHTML-based</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Konqueror" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Konqueror">Konqueror</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Konqueror_Embedded" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Konqueror Embedded">Konqueror Embedded</a></b></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Presto-based">Presto-based</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Internet_Channel" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet Channel">Internet Channel</a> (for Wii console, Opera-based)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Nintendo_DS_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Nintendo DS Browser">Nintendo DS Browser</a> (Opera-based)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Opera_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Opera (web browser)">Opera</a></b> (for releases up until 12.16<sup class="reference" id="cite_ref-operatowebkit_23-0" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-operatowebkit-23" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[23]</a></sup>)</li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="WebKit-based">WebKit-based</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Amazon_Kindle" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Amazon Kindle">Amazon Kindle</a></b> (experimental)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Arora_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Arora (web browser)">Arora</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/BOLT_browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="BOLT browser">BOLT browser</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Chromium_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Chromium (web browser)">Chromium</a></b><ul style="line-height: 1.6em; list-style-image: url(data:image/png; list-style-type: disc; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Google_Chrome" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Google Chrome">Google Chrome</a></b> (based on fork <a href="http://en.wikipedia.org/wiki/Blink_(layout_engine)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Blink (layout engine)">Blink</a> since Chrome v. 28)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Opera_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Opera (web browser)">Opera</a></b><sup class="reference" id="cite_ref-24" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-24" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[24]</a></sup></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Mail.Ru" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mail.Ru">Amigo</a></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Torch_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Torch (web browser)">Torch browser</a></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Comodo_Dragon_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Comodo Dragon (web browser)">Comodo Dragon</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Quiet_Internet_Pager" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Quiet Internet Pager">QIP Surf</a></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Epic_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Epic (web browser)">Epic</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Rambler_(portal)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Rambler (portal)">Nichrome</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/SRWare_Iron" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="SRWare Iron">SRWare Iron</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/UCoz" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="UCoz">Uran Browser</a></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Yandex_browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Yandex browser">Yandex browser</a></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/RockMelt" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="RockMelt">RockMelt</a> (discontinued)</li>
</ul>
</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Dolphin_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Dolphin Browser">Dolphin Browser</a> (Android and Bada)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Dooble" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Dooble">Dooble</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Flock_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Flock (web browser)">Flock</a> (discontinued) (version 3.0 and above)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/ICab" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="ICab">iCab</a></b> (version 4 uses WebKit; earlier versions used its own rendering engine)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Iris_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Iris Browser">Iris Browser</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Konqueror" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Konqueror">Konqueror</a></b> (version 4 can use WebKit as an alternative to its native KHTML<sup class="reference" id="cite_ref-25" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-25" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[25]</a></sup>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Maxthon" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Maxthon">Maxthon</a> (version 3.0 and above)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Midori_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Midori (web browser)">Midori</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Nintendo_3DS" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Nintendo 3DS">Nintendo 3DS</a> <a href="http://en.wikipedia.org/wiki/NetFront" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="NetFront">NetFront Browser NX</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/OmniWeb" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="OmniWeb">OmniWeb</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Origyn_Web_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Origyn Web Browser">OWB</a></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/QtWeb" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="QtWeb">QtWeb</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/QupZilla" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="QupZilla">QupZilla</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Rekonq" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Rekonq">Rekonq</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Safari_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Safari (web browser)">Safari</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Shiira" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Shiira">Shiira</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Steel_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Steel (web browser)">Steel</a> for <a href="http://en.wikipedia.org/wiki/Android_(operating_system)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Android (operating system)">Android</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Steam_(software)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Steam (software)">Steam ingame browser</a></li>
</ul>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;">Ultralight<sup class="reference" id="cite_ref-UltraLight_26-0" style="line-height: 1; unicode-bidi: -webkit-isolate;"><a href="http://en.wikipedia.org/wiki/List_of_web_browsers#cite_note-UltraLight-26" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none; white-space: nowrap;">[26]</a></sup> for <a href="http://en.wikipedia.org/wiki/Android_(operating_system)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Android (operating system)">Android</a></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Uzbl" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Uzbl">Uzbl</a></b></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Web_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Web (web browser)">Web</a></b></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Web_Browser_for_S60" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Web Browser for S60">Web Browser for S60</a>, used in all <a href="http://en.wikipedia.org/wiki/Nokia" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Nokia">Nokia</a> <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Symbian_platform" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Symbian platform">Symbian</a> smartphones.</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Palm_webOS" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Palm webOS">webOS</a>, used in the <a href="http://en.wikipedia.org/wiki/Palm_Pre" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Palm Pre">Palm Pre</a>, <a href="http://en.wikipedia.org/wiki/Palm_Pixi" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Palm Pixi">Palm Pixi</a>, <a href="http://en.wikipedia.org/wiki/Palm_Pre_2" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Palm Pre 2">Pre 2</a>, <a href="http://en.wikipedia.org/wiki/HP_Veer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="HP Veer">HP Veer</a>, <a href="http://en.wikipedia.org/wiki/HP_Pre_3" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="HP Pre 3">Pre 3</a> and <a href="http://en.wikipedia.org/wiki/HP_TouchPad" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="HP TouchPad">TouchPad</a> mobile devices</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/WebPositive" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="WebPositive">WebPositive</a></b>, browser in Haiku</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Xombrero" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Xombrero">xombrero</a></b></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="For_Java_platform">For Java platform</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/ThunderHawk_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="ThunderHawk (web browser)">Bitstream ThunderHawk</a></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/BOLT_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="BOLT Browser">BOLT Browser</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/HotJava" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="HotJava">HotJava</a> (discontinued)</li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Opera_Mini" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Opera Mini">Opera Mini</a></b></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/UZard_Web" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="UZard Web">uZard Web</a></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/UCWEB" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="UCWEB">UCWEB</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/HtmlUnit" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="HtmlUnit">HtmlUnit</a> (Graphical user interface-less)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Teashark" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Teashark">Teashark</a></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Specialty_browsers">Specialty browsers</span></h3>
<div class="rellink boilerplate seealso" style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; font-style: italic; line-height: 22px; margin-bottom: 0.5em; padding-left: 1.6em;">
See also: <a href="http://en.wikipedia.org/wiki/Augmented_browsing" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Augmented browsing">Augmented browsing</a>, <a href="http://en.wikipedia.org/wiki/List_of_augmented_browsing_software" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="List of augmented browsing software">List of augmented browsing software</a>, and <a href="http://en.wikipedia.org/wiki/Site-specific_browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Site-specific browser">Site-specific browser</a></div>
<div style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.5em;">
Browsers created for enhancements of specific browsing activities.</div>
<h4 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; font-size: 14px; line-height: 22px; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Current">Current</span></h4>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Gollum_browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Gollum browser">Gollum browser</a> (Created specially for browsing Wikipedia)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Image_Xplorer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Image Xplorer">Image Xplorer</a> (Designed only to view, download, and print images)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Kirix_Strata" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Kirix Strata">Kirix Strata</a> (Designed for data analytics)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Miro_(software)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Miro (software)">Miro</a> (A media browser that integrates BitTorrent add-on)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Nightingale_(software)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Nightingale (software)">Nightingale</a> (open source <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Audio_player_(software)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Audio player (software)">audio player</a> and web browser based on the Songbird (see below) media player source code)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/SpaceTime" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="SpaceTime">SpaceTime</a> (Search the web in 3D)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Wyzo" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Wyzo">Wyzo</a> (A media browser that integrates BitTorrent-like add-on)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Zac_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Zac Browser">Zac Browser</a> (For children with <a href="http://en.wikipedia.org/wiki/Autism" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Autism">autism</a>, and <a href="http://en.wikipedia.org/wiki/Autism_spectrum" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Autism spectrum">autism spectrum</a> disorders such as <a href="http://en.wikipedia.org/wiki/Asperger_syndrome" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Asperger syndrome">Asperger syndrome</a>, pervasive developmental disorders (PDD), and PDD-NOS)</li>
</ul>
<h4 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; font-size: 14px; line-height: 22px; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Discontinued">Discontinued</span></h4>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Ghostzilla" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Ghostzilla">Ghostzilla</a> (Blends into the <a href="http://en.wikipedia.org/wiki/Graphical_user_interface" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Graphical user interface">GUI</a> to hide activity)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Prodigy_(online_service)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Prodigy (online service)">Prodigy Classic</a> (Executable only within the application)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Flock_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Flock (web browser)">Flock</a> (To enhance social networking, <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Blogging" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Blogging">blogging</a>, photo-sharing, and <a class="mw-redirect" href="http://en.wikipedia.org/wiki/RSS_(file_format)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="RSS (file format)">RSS</a> news-reading)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/RockMelt" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="RockMelt">RockMelt</a> (Designed to combine web browsing, and social activities such as <a href="http://en.wikipedia.org/wiki/Facebook" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Facebook">Facebook</a> and <a href="http://en.wikipedia.org/wiki/Twitter" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Twitter">Twitter</a> into a unified one window experience)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Songbird_(software)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Songbird (software)">Songbird</a> (browser with advanced audio streaming features and built in media player with library.)</li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Mosaic_based">Mosaic based</span></h3>
<div style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 22px; margin-bottom: 0.5em; margin-top: 0.5em;">
<a href="http://en.wikipedia.org/wiki/Mosaic_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mosaic (web browser)">Mosaic</a> was the first widely used web browser. The <a href="http://en.wikipedia.org/wiki/National_Center_for_Supercomputing_Applications" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="National Center for Supercomputing Applications">National Center for Supercomputing Applications</a> (NCSA) licensed the technology and many companies built their own web browser on Mosaic. The best known are the first versions of Internet Explorer and Netscape.</div>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><i><a href="http://en.wikipedia.org/wiki/AMosaic" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AMosaic">AMosaic</a></i></li>
<li style="margin-bottom: 0.1em;"><i><a href="http://en.wikipedia.org/wiki/IBM_WebExplorer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="IBM WebExplorer">IBM WebExplorer</a></i></li>
<li style="margin-bottom: 0.1em;"><b><a href="http://en.wikipedia.org/wiki/Internet_Explorer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet Explorer">Internet Explorer</a></b></li>
<li style="margin-bottom: 0.1em;"><i><a href="http://en.wikipedia.org/wiki/Internet_in_a_Box" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Internet in a Box">Internet in a Box</a></i></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Mosaic-CK" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mosaic-CK">Mosaic-CK</a></li>
<li style="margin-bottom: 0.1em;"><i><a href="http://en.wikipedia.org/wiki/Netscape" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Netscape">Netscape</a></i></li>
<li style="margin-bottom: 0.1em;"><i><a href="http://en.wikipedia.org/wiki/Spyglass,_Inc." style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Spyglass, Inc.">Spyglass Mosaic</a></i></li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/VMS_Mosaic" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="VMS Mosaic">VMS Mosaic</a></li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Others">Others</span></h3>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Abaco_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Abaco (web browser)">Abaco</a> (for <a href="http://en.wikipedia.org/wiki/Plan_9_from_Bell_Labs" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Plan 9 from Bell Labs">Plan 9 from Bell Labs</a>)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Amaya_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Amaya (web browser)">Amaya</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Arachne_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Arachne (web browser)">Arachne</a> (for DOS)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Arena_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Arena (web browser)">Arena</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/AMSD_Ariadna" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AMSD Ariadna">Ariadna (AMSD Ariadna)</a> (first Russian web browser, discontinued)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/AWeb" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AWeb">AWeb</a> (<a href="http://en.wikipedia.org/wiki/AmigaOS" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="AmigaOS">AmigaOS</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Baidu" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Baidu">Baidu</a> Mobile Browser</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Charon_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Charon (web browser)">Charon</a> (for <a href="http://en.wikipedia.org/wiki/Inferno_(operating_system)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Inferno (operating system)">Inferno</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Dillo" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Dillo">Dillo</a> (Small, fast, free, minimalistic, and multi-platform)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/DR-WebSpyder" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="DR-WebSpyder">DR-WebSpyder</a> (for DOS, discontinued)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Embrowser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Embrowser">Embrowser</a> (for DOS, discontinued)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Gazelle_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Gazelle (web browser)">Gazelle</a> (from <a href="http://en.wikipedia.org/wiki/Microsoft_Research" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Microsoft Research">Microsoft Research</a>, OS-like)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/IBrowse" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="IBrowse">IBrowse</a> (for AmigaOS)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Mothra_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mothra (web browser)">Mothra</a> (for <a href="http://en.wikipedia.org/wiki/Plan_9_from_Bell_Labs" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Plan 9 from Bell Labs">Plan 9 from Bell Labs</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/NetPositive" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="NetPositive">NetPositive</a> (for <a href="http://en.wikipedia.org/wiki/BeOS" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="BeOS">BeOS</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/NetSurf" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="NetSurf">NetSurf</a> (An open source web browser for <a href="http://en.wikipedia.org/wiki/RISC_OS" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="RISC OS">RISC OS</a> and GTK+ written in C)</li>
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Planetweb" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Planetweb">Planetweb</a> browser (discontinued for <a href="http://en.wikipedia.org/wiki/Dreamcast" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Dreamcast">Dreamcast</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Qihoo" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Qihoo">Qihoo</a> 360 mobile browsers</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/TkWWW#Phoenix" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="TkWWW">Phoenix</a>, a browser based on tkWWW</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/TkWWW" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="TkWWW">tkWWW</a>, based on <a href="http://en.wikipedia.org/wiki/Tcl" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Tcl">Tcl</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Voyager_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Voyager (web browser)">Voyager</a> (for AmigaOS)</li>
</ul>
<h3 style="background-color: white; background-image: none; border-bottom-style: none; font-family: sans-serif; line-height: 1.6; margin: 0.3em 0px 0px; overflow: hidden; padding-bottom: 0px; padding-top: 0.5em;">
<span class="mw-headline" id="Mobile">Mobile</span></h3>
<div class="rellink relarticle mainarticle" style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; font-style: italic; line-height: 22px; margin-bottom: 0.5em; padding-left: 1.6em;">
Main article: <a href="http://en.wikipedia.org/wiki/Mobile_browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Mobile browser">Mobile browser</a></div>
<h2 style="background-color: white; background-image: none; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-bottom-width: 1px; font-family: 'Linux Libertine', Georgia, Times, serif; font-weight: normal; line-height: 1.3; margin: 1em 0px 0.25em; overflow: hidden; padding: 0px;">
<span class="mw-headline" id="Text-based">Text-based</span></h2>
<div class="rellink relarticle mainarticle" style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; font-style: italic; line-height: 22px; margin-bottom: 0.5em; padding-left: 1.6em;">
Main article: <a href="http://en.wikipedia.org/wiki/Text-based_web_browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Text-based web browser">Text-based web browser</a></div>
<ul style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px; line-height: 1.6em; list-style-image: url(data:image/png; margin: 0.3em 0px 0px 1.6em; padding: 0px;">
<li style="margin-bottom: 0.1em;"><a class="mw-redirect" href="http://en.wikipedia.org/wiki/Alynx" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Alynx">Alynx</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/ELinks" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="ELinks">ELinks</a> (active version of <a href="http://en.wikipedia.org/wiki/Links_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Links (web browser)">Links</a>)</li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Emacs/W3" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Emacs/W3">Emacs/W3</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Line_Mode_Browser" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Line Mode Browser">Line Mode Browser</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Links_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Links (web browser)">Links</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Lynx_(web_browser)" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Lynx (web browser)">Lynx</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/Net-Tamer" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="Net-Tamer">Net-Tamer</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/W3m" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="W3m">w3m</a></li>
<li style="margin-bottom: 0.1em;"><a href="http://en.wikipedia.org/wiki/WebbIE" style="background-image: none; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="WebbIE">WebbIE</a></li>
</ul>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-89058274882604936522014-05-02T17:05:00.003-04:002014-05-02T17:05:51.427-04:00Support for HTML5 & CSS3 by Mainstream Browsers<h1>
HTML5 & CSS3 Support</h1>
<div>
Data source: <a href="http://fmbip.com/litmus">http://fmbip.com/litmus</a></div>
<div>
<br /></div>
<h2 class="chunk-heading litmus-heading" id="css3-properties" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
CSS3 Properties</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for CSS3 Properties"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="mdz_rgba"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_rgba" style="color: #beac96; text-decoration: none;">RGBA</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_hsla"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_hsla" style="color: #beac96; text-decoration: none;">HSLA</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_boxsizing"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_boxsizing" style="color: #beac96; text-decoration: none;">Box Sizing</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">35%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_backgroundsize"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_backgroundsize" style="color: #beac96; text-decoration: none;">Background Size</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_multiplebgs"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_multiplebgs" style="color: #beac96; text-decoration: none;">Multiple Backgrounds</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_borderimage"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_borderimage" style="color: #beac96; text-decoration: none;">Border Image</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">85%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_borderradius"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_borderradius" style="color: #beac96; text-decoration: none;">Border Radius</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_boxshadow"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_boxshadow" style="color: #beac96; text-decoration: none;">Box Shadow</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_textshadow"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_textshadow" style="color: #beac96; text-decoration: none;">Text Shadow</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">76%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_opacity"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_opacity" style="color: #beac96; text-decoration: none;">Opacity</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_cssanimations"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_cssanimations" style="color: #beac96; text-decoration: none;">CSS Animations</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">66%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_csscolumns"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_csscolumns" style="color: #beac96; text-decoration: none;">CSS Columns</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">85%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_cssgradients"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_cssgradients" style="color: #beac96; text-decoration: none;">CSS Gradients</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">84%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_cssreflections"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_cssreflections" style="color: #beac96; text-decoration: none;">CSS Reflections</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">46%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_csstransforms"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_csstransforms" style="color: #beac96; text-decoration: none;">CSS Transforms</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_csstransforms3d"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_csstransforms3d" style="color: #beac96; text-decoration: none;">CSS Transforms 3D</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">41%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_csstransitions"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_csstransitions" style="color: #beac96; text-decoration: none;">CSS Transitions</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">72%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_fontface"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_fontface" style="color: #beac96; text-decoration: none;">CSS FontFace</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">98%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_flexbox"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_flexbox" style="color: #beac96; text-decoration: none;">FlexBox</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">72%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_generatedcontent"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_generatedcontent" style="color: #beac96; text-decoration: none;">Generated Content</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">35%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_datauri"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_datauri" style="color: #beac96; text-decoration: none;">DataURI</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">35%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_pointerevents"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_pointerevents" style="color: #beac96; text-decoration: none;">Pointer Events</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">29%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_display_table"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_display_table" style="color: #beac96; text-decoration: none;">Display: table</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">35%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_overflowscrolling"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_overflowscrolling" style="color: #beac96; text-decoration: none;">Overflow Scrolling</a></th><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;"><br /></span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">3%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_mq"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_mq" style="color: #beac96; text-decoration: none;">Media Queries</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">34%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
</tbody></table>
<br />
<div>
<h2 class="chunk-heading litmus-heading" id="css3-selectors" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
CSS3 Selectors</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for CSS3 Selectors"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="css3_begins"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_begins" style="color: #beac96; text-decoration: none;">Begins with</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">99%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_ends"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_ends" style="color: #beac96; text-decoration: none;">Ends with</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">99%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_matches"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_matches" style="color: #beac96; text-decoration: none;">Matches</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">99%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_root"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_root" style="color: #beac96; text-decoration: none;">Root</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_nth_child"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_nth_child" style="color: #beac96; text-decoration: none;">nth-child</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_nth_last_child"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_nth_last_child" style="color: #beac96; text-decoration: none;">nth-last-child</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_nth_of_type"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_nth_of_type" style="color: #beac96; text-decoration: none;">nth-of-type</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_nth_last_of_type"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_nth_last_of_type" style="color: #beac96; text-decoration: none;">nth-last-of-type</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_last_child"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_last_child" style="color: #beac96; text-decoration: none;">last-child</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_first_of_type"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_first_of_type" style="color: #beac96; text-decoration: none;">first-of-type</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_last_of_type"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_last_of_type" style="color: #beac96; text-decoration: none;">last-of-type</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_only_child"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_only_child" style="color: #beac96; text-decoration: none;">only-child</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_only_of_type"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_only_of_type" style="color: #beac96; text-decoration: none;">only-of-type</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_empty"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_empty" style="color: #beac96; text-decoration: none;">empty</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_target"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_target" style="color: #beac96; text-decoration: none;">target</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">89%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_enabled"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_enabled" style="color: #beac96; text-decoration: none;">enabled</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_disabled"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_disabled" style="color: #beac96; text-decoration: none;">disabled</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_checked"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_checked" style="color: #beac96; text-decoration: none;">checked</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_not"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_not" style="color: #beac96; text-decoration: none;">not</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="css3_general_sibling"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#css3_general_sibling" style="color: #beac96; text-decoration: none;">General Sibling</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">99%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<h2 class="chunk-heading litmus-heading" id="html5-graphics-embedded-content" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
HTML5 Graphics & Embedded Content</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for HTML5 Graphics & Embedded Content"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="mdz_canvas"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_canvas" style="color: #beac96; text-decoration: none;">Canvas</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">91%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_canvastext"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_canvastext" style="color: #beac96; text-decoration: none;">Canvas Text</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_svg"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_svg" style="color: #beac96; text-decoration: none;">SVG</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_svgclippaths"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_svgclippaths" style="color: #beac96; text-decoration: none;">SVG Clipping Paths</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_inlinesvg"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inlinesvg" style="color: #beac96; text-decoration: none;">SVG Inline</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">64%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_smil"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_smil" style="color: #beac96; text-decoration: none;">SMIL</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">75%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_webgl"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_webgl" style="color: #beac96; text-decoration: none;">WebGL</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">70%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_audio"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_audio" style="color: #beac96; text-decoration: none;">Audio</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_video"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_video" style="color: #beac96; text-decoration: none;">Video</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">90%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<h2 class="chunk-heading litmus-heading" id="html5-audio-codecs" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
HTML5 Audio Codecs</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for HTML5 Audio Codecs"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="mdz_audio_ogg"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_audio_ogg" style="color: #beac96; text-decoration: none;">Audio: ogg/vorbis</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">72%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_audio_mp3"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_audio_mp3" style="color: #beac96; text-decoration: none;">Audio: mp3</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">50%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_audio_wav"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_audio_wav" style="color: #beac96; text-decoration: none;">Audio: wav</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">77%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_audio_m4a"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_audio_m4a" style="color: #beac96; text-decoration: none;">Audio: AAC</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">50%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<h2 class="chunk-heading litmus-heading" id="html5-video-codecs" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
HTML5 Video Codecs</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for HTML5 Video Codecs"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="mdz_video_ogg"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_video_ogg" style="color: #beac96; text-decoration: none;">Video: ogg/theora</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">71%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_video_h264"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_video_h264" style="color: #beac96; text-decoration: none;">Video: H.264</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">50%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_video_webm"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_video_webm" style="color: #beac96; text-decoration: none;">Video: WebM</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">58%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<h2 class="chunk-heading litmus-heading" id="html5-forms-inputs" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
HTML5 Forms Inputs</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for HTML5 Forms Inputs"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="mdz_inputtypes_search"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_search" style="color: #beac96; text-decoration: none;">Form: Search</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">71%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_inputtypes_tel"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_tel" style="color: #beac96; text-decoration: none;">Form: Phone</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">71%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_inputtypes_url"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_url" style="color: #beac96; text-decoration: none;">Form: URL</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">69%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_inputtypes_email"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_email" style="color: #beac96; text-decoration: none;">Form: Email</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">69%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_inputtypes_datetime"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_datetime" style="color: #beac96; text-decoration: none;">Form: DateTime</a></th><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">5%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_inputtypes_date"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_date" style="color: #beac96; text-decoration: none;">Form: Date</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">17%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_inputtypes_month"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_month" style="color: #beac96; text-decoration: none;">Form: Month</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">10%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_inputtypes_week"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_week" style="color: #beac96; text-decoration: none;">Form: Week</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">10%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_inputtypes_time"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_time" style="color: #beac96; text-decoration: none;">Form: Time</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">13%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_inputtypes_datetime_local"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_datetime_local" style="color: #beac96; text-decoration: none;">Form: LocalTime</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">10%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
<tr id="mdz_inputtypes_number"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_number" style="color: #beac96; text-decoration: none;">Form: Number</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">40%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_inputtypes_range"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_range" style="color: #beac96; text-decoration: none;">Form: Range</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">47%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_inputtypes_color"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_inputtypes_color" style="color: #beac96; text-decoration: none;">Form: Colour</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="support-grade grade-poor" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">13%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “poor”)</span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<h2 class="chunk-heading litmus-heading" id="html5-forms-attributes" style="background-color: #331918; color: white; font-family: ChunkFiveRoman, Calibri, Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 39px; font-weight: normal; margin: 0px; padding: 0px;">
HTML5 Forms Attributes</h2>
<table class="litmus-browser-support-results" style="background-color: #331918; border-collapse: collapse; border-spacing: 0px; color: #f2f1dd; font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px; width: 960px;" summary="Browser support for HTML5 Forms Attributes"><thead>
<tr><th class="primary-heading" scope="row" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;"><span class="offScreen" style="left: -9999px; position: absolute;">PLATFORM</span></th><th class="primary-heading" colspan="6" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">MAC</th><th class="primary-heading" colspan="8" scope="colgroup" style="background-color: #190c0c; background-image: url(http://fmbip.com/images/th_primary_bg.png); background-position: 0px 0px; background-repeat: repeat no-repeat; border-color: rgb(0, 0, 0) rgb(55, 27, 26) rgb(0, 0, 0) rgb(0, 0, 0); border-style: solid; border-width: 1px; font-size: 1.2em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; text-transform: uppercase; width: 16px;">WIN</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;">% Support</th></tr>
<tr><th class="secondary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Browser</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-safari browser-id secondary-heading" colspan="2" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/safari.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">SAFARI</span></th><th class="browser-chrome browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/chrome.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">CHROME</span></th><th class="browser-firefox browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/firefox.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">FIREFOX</span></th><th class="browser-opera browser-id secondary-heading" colspan="1" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/opera.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">OPERA</span></th><th class="browser-ie browser-id secondary-heading" colspan="5" scope="colgroup" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span class="" style="background-image: url(http://fmbip.com/images/browser_icons/ie8.png); background-position: 50% 0px; background-repeat: no-repeat no-repeat; display: block; height: 26px; line-height: 40px; padding: 40px 0px 0px;">IE</span></th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
<tr><th class="tertiary-heading row-heading" scope="row" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 15px 0.2em 0.5em; text-align: right; width: 120px;"><span class="offScreen" style="left: -9999px; position: absolute;">Version</span></th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">20</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">5.1</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">25</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">15</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">12</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">6</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">7</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">8</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">9</th><th class="tertiary-heading" scope="col" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #cd9594; font-family: 'Courier New', Courier, monospace; font-size: 1em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.2em 0.5em; text-align: center; width: 16px;">10</th><th class="offScreen" style="background-color: transparent; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; font-weight: normal; left: -9999px; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; position: absolute; text-align: center; width: 16px;"></th></tr>
</thead><tbody>
<tr id="mdz_input_autocomplete"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_autocomplete" style="color: #beac96; text-decoration: none;">Form: Autocomplete</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">48%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_input_autofocus"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_autofocus" style="color: #beac96; text-decoration: none;">Form: Autofocus</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">72%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_input_list"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_list" style="color: #beac96; text-decoration: none;">Form: List</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-limited" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">43%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “limited”)</span></td></tr>
<tr id="mdz_input_placeholder"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_placeholder" style="color: #beac96; text-decoration: none;">Form: Placeholder</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">71%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_input_max"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_max" style="color: #beac96; text-decoration: none;">Form: Min</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">55%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_input_min"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_min" style="color: #beac96; text-decoration: none;">Form: Max</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">55%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_input_multiple"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_multiple" style="color: #beac96; text-decoration: none;">Form: Multiple</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-excellent" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">84%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “excellent”)</span></td></tr>
<tr id="mdz_input_pattern"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_pattern" style="color: #beac96; text-decoration: none;">Form: Pattern</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">71%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_input_required"><th class="row-heading" scope="row" style="background-color: #2c1514; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_required" style="color: #beac96; text-decoration: none;">Form: Required</a></th><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #2c1514; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">71%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”)</span></td></tr>
<tr id="mdz_input_step"><th class="row-heading" scope="row" style="background-color: #200f0f; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 0.9em; font-weight: normal; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 15px 0.5em 0px; text-align: right; width: 120px;"><a class="pseudo" href="http://fmbip.com/litmus#mdz_input_step" style="color: #beac96; text-decoration: none;">Form: Step</a></th><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 0.5; text-indent: -9999px;">N</span></td><td class="supported" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;"><span style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/tick.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; opacity: 1; text-indent: -9999px;">Y</span></td><td class="support-grade grade-good" style="background-color: #200f0f; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(0, 0, 0); color: #beac96; font-size: 1em; line-height: 1.5em; margin: 0px 0px 1.5em; padding: 0.5em 0px; text-align: center; width: 16px;">55%<span class="offScreen" style="background-image: url(http://fmbip.com/r/i/icons/silk_set_ie6/cross.png); background-position: 50% 50%; background-repeat: no-repeat no-repeat; display: block; height: 16px; left: -9999px; opacity: 0.5; position: absolute; text-indent: -9999px;">(grade: “good”</span></td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-51152077730161411902014-04-29T12:18:00.000-04:002014-05-02T17:35:32.735-04:00Stop Wasting Users’ Time<br />
<br />
<br />
<article class="post-181902 post type-post status-publish format-standard hentry category-uxdesign tag-usability tag-user-experience tag-user-interaction post" style="background-color: white; background-position: 0px 0px; border-bottom-color: rgb(65, 183, 216); border-bottom-width: 0.3125em; border-style: none none solid; color: #333333; font-family: 'Proxima Nova Regular', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 26.859375px; margin: 0px 0px 2em; outline: 0px; vertical-align: baseline;">
<h2 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2em; line-height: 1.1em; margin: 0px; outline: 0px; padding: 0.5em 0px 0px; vertical-align: baseline;">
<a href="http://www.smashingmagazine.com/2014/04/25/stop-wasting-users-time/" rel="bookmark" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; background-repeat: initial initial; color: #333333; font-size: 37px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Read 'Stop Wasting Users’ Time'">Stop Wasting Users’ Time</a></h2>
<ul class="postmetadata clearfix" style="background-position: 0px 0px; border: none; margin: 0px; outline: 0px; padding: 0px 0px 2em; position: relative; vertical-align: baseline;">
<li class="author" style="background-position: 0px 0px; border-bottom-color: rgb(229, 229, 229); border-bottom-width: 0.07em; border-style: none none solid; color: rgba(0, 0, 0, 0.298039); display: block; font-family: 'Skolar Regular', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.25em; line-height: 1.35em; margin: 0px; outline: 0px; padding: 0.5em 0.5em 0.5em 0px; position: relative; vertical-align: baseline;">By <a class="post-author" href="http://www.smashingmagazine.com/author/paul-boag/?rel=author" rel="author" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Posts by Paul Boag">Paul Boag</a></li>
</ul>
April 25th, 2014<br /><a href="http://www.smashingmagazine.com/tag/usability/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Usability</a>, <a href="http://www.smashingmagazine.com/tag/user-experience/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">User Experience</a>, <a href="http://www.smashingmagazine.com/tag/user-interaction/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">User Interaction</a><div style="background-position: 0px 0px; border: none; font-family: 'Skolar Regular', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.25em; line-height: 1.35em; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Our users are precious about their time and we must stop wasting it. On each project ask two questions: “Am I saving myself time at the expense of the user?” and “How can I save the user time here?” What is the single most precious commodity in Western society? Money? Status? I would argue it is<em style="background-position: 0px 0px; border: none; font-family: 'Skolar Italic', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">time</em>.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We are protective of our time, and with good reason. There are so many demands on it. We have so much to do. So much pressure. <span style="background-position: 0px 0px; border: none; font-family: 'Proxima Nova Bold', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">People hate to have their time wasted</span>, especially online. We spend so much of our time online these days, and every interaction demands a slice of our time. One minor inconvenience on a website might not be much, but, accumulated, it is death by a thousand cuts.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Steve Jobs claimed that improving the boot time on the Macintosh would save lives. A 10-second improvement added up to many lifetimes over the millions of users booting their computers multiple times a day.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/Mac-Booting-large-opt.jpg" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;"><img alt="Mac Boot Screen" src="http://www.smashingmagazine.com/wp-content/uploads/2014/04/Mac-Booting-preview-opt.jpg" style="background-position: 0px 0px; border: none; height: auto; margin: 0.5em 0px; outline: 0px; padding: 0px; vertical-align: baseline;" /></a><br />
<em style="background-position: 0px 0px; border: none; color: rgba(0, 0, 0, 0.4); font-family: 'Proxima Nova Italic', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 0.875em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Steve Jobs was obsessed with saving the user time, and we should be, too. (<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/Mac-Booting-large-opt.jpg" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-width: 0.08em; border-style: none none solid; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Large preview</a>)</em></div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Millions of people might not use your website, but millions do use the Web as a whole. Together, we are stealing people’s lives through badly designed interactions. When I work on a website, one question is front and center in my mind:</div>
<blockquote style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0.11904762em inset; background-color: #f7f7f7; background-position: 0px 0px; border: 0.05952381em solid rgba(0, 0, 0, 0.0980392); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0.11904762em inset; color: rgba(0, 0, 0, 0.74902); font-family: 'Skolar Italic', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.05em; font-style: italic; line-height: 1.55em; margin: 1em 0px; outline: 0px; padding: 1em 2em; quotes: none; vertical-align: baseline;">
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
“Am I saving myself time at the expense of the user?”</div>
</blockquote>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
That is the heart of the problem. In our desire to meet deadlines and stay on budget, we often save ourselves time by taking shortcuts via our users’ time. Let’s explore some examples of what I mean.</div>
<h3 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; line-height: 1.3em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; vertical-align: baseline;">
Taking Time To Improve Performance</h3>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
The most obvious example of wasting users’ time is <a href="http://coding.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">website performance</a>. This is what Jobs was getting at with boot times. If our websites are slow, then we’ll waste our users’ valuable time and start to irritate them. One more cut, so to speak.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
The problem is that improving performance is hard. We became lazy as broadband became widespread. We cut corners in image optimization, HTTP requests and JavaScript libraries. Now, users pay the price when they try to access our websites on slow mobile devices over cellular networks.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/PageSpeed-Insights-large-opt.jpg" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;"><img alt="Google Page Speed Test" src="http://www.smashingmagazine.com/wp-content/uploads/2014/04/PageSpeed-Insights-preview-opt.jpg" style="background-position: 0px 0px; border: none; height: auto; margin: 0.5em 0px; outline: 0px; padding: 0px; vertical-align: baseline;" /></a><br />
<em style="background-position: 0px 0px; border: none; color: rgba(0, 0, 0, 0.4); font-family: 'Proxima Nova Italic', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 0.875em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Optimizing your website for performance not only saves your users time, but improves your search engine rankings. (<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/PageSpeed-Insights-large-opt.jpg" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-width: 0.08em; border-style: none none solid; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Large preview</a>)</em></div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Making our websites faster takes time and effort, but why should users suffer for our problems? On the subject of making our problems the users’ problem, let’s take a moment to talk about CAPTCHA.</div>
<h3 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; line-height: 1.3em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; vertical-align: baseline;">
CAPTCHA: The Ultimate Time-Waster</h3>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
CAPTCHA is the ultimate example of unloading our problems onto users. How many millions of hours have users wasted filling in CAPTCHA forms? Hours wasted because we haven’t addressed the problem of bots.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<img alt="CAPTCHA example" src="http://www.smashingmagazine.com/wp-content/uploads/2014/04/captcha-opt.jpg" style="background-position: 0px 0px; border: none; height: auto; margin: 0.5em 0px; outline: 0px; padding: 0px; vertical-align: baseline;" /><br />
<em style="background-position: 0px 0px; border: none; color: rgba(0, 0, 0, 0.4); font-family: 'Proxima Nova Italic', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 0.875em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CAPTCHA forces the user to deal with something that is really our problem.</em></div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Just to be clear, I am not just talking about traditional CAPTCHA either. I am talking about <span style="background-position: 0px 0px; border: none; font-family: 'Proxima Nova Bold', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">any system that forces the user to prove they are human</span>. Why should they have to prove anything? Once again, another inconvenience, another drain on their precious time.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We could solve this problem if we put the time into it. The <a href="https://forrst.com/posts/Preventing_form_spam_with_honeytrap-iLb" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">honeytrap technique</a> helps. There are also server-side solutions for filtering out automated requests. The problem is that throwing a CAPTCHA on a website is easier.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Not that CAPTCHA is the only way that we waste the user’s time when completing forms.</div>
<h3 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; line-height: 1.3em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; vertical-align: baseline;">
Don’t Make Users Correct “Their” Mistakes In Forms</h3>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Sometimes we even waste the user’s time when we are trying to help them. Take postal-code lookup. I have been on websites that try to save me time by asking me to enter my postal code so that it can auto-populate my address. A great idea to save me some time — great if it works, that is.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
The problem is that some lookup scripts require the postal code to have no spaces. Instead of the developer configuring the script to remove any spaces, they just return an error, and the user has to correct “their” mistake. <span style="background-position: 0px 0px; border: none; font-family: 'Proxima Nova Bold', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Why should the user have to enter the data in a particular way?</span> Why waste their time by requiring them to re-enter their postal code? This doesn’t just apply to postal codes either. Telephone numbers and email addresses come with similar problems.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We also need to better help mobile users interact with forms. Forms are particularly painful on touchscreens, so we need to explore alternative form controls, such as <a href="http://refreshless.com/nouislider/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">sliders</a> and the <a href="http://www.lukew.com/ff/entry.asp?1667" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">credit-card input system in Square</a>’s mobile app.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Then, there are passwords.</div>
<h3 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; line-height: 1.3em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; vertical-align: baseline;">
Why Are Passwords So Complicated?</h3>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Why do we waste so much of the users’ time with creating passwords? Every website I visit these days seems to have ever more complex requirements for my password. Security is important, but can’t we come up with a better solution than an arcane mix of uppercase, numbers and symbols?</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Why couldn’t we ask users to type in a long phrase instead of a single word? Why can’t my password be, “This is my password and I defy anyone to guess it”? The length would make it secure, and remembering and typing it would be much easier. If your system doesn’t like the spaces, strip them out. You could even provide an option for people to see what they’re typing.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/password-large-opt.png" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;"><img alt="Example of how longer passwords help security" src="http://www.smashingmagazine.com/wp-content/uploads/2014/04/password-preview-opt.png" style="background-position: 0px 0px; border: none; height: auto; margin: 0.5em 0px; outline: 0px; padding: 0px; vertical-align: baseline;" /></a><br />
<em style="background-position: 0px 0px; border: none; color: rgba(0, 0, 0, 0.4); font-family: 'Proxima Nova Italic', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 0.875em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A long password phrase is as secure as a short password with numbers and symbols yet easier to remember. (<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/password-large-opt.png" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-width: 0.08em; border-style: none none solid; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Large preview</a>)</em></div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
If you can’t do that, at least provide instructions when the user tries to log in. Remind them of whether your website wants uppercase or a certain number of characters. That would at least help them remember their password for your website.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
The important thing is to recognize that people have to log in all the time. The task demands extra attention so that it is as painless as possible.</div>
<h3 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; line-height: 1.3em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; vertical-align: baseline;">
Pay Special Attention To Repetitive Tasks</h3>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We should ask ourselves not only whether we are unloading our problems onto users, but also how we can save our users time.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Take those common tasks that users do on our websites time and again. How can we shave a quarter of a second off of those tasks? What about search? If the user enters a search term on your website, will hitting the “Return” key submit the query? They shouldn’t have to click the “Search” button.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
Drop-down menus are another good example. Navigating <a href="http://boagworld.com/usability/the-country-picker-how-small-things-makes-big-differences/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">country-pickers can be painful</a>. Could we display countries differently, or make the most common countries faster to access? In fact, <a href="http://www.smashingmagazine.com/2011/11/10/redesigning-the-country-selector/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">so much could be done to improve country-pickers</a> if we just take the time.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<a 04="" 2014="" country-picker-large-opt.png="" href="https://www.blogger.com/blogger.g?blogID=1951384499390869365" http:="" style="background-position: 0px 0px; border: none; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; vertical-align: baseline;" uploads="" wp-content="" www.smashingmagazine.com=""><img alt="Country Picker" src="http://www.smashingmagazine.com/wp-content/uploads/2014/04/country-picker-preview-opt.png" style="background-position: 0px 0px; border: none; height: auto; margin: 0.5em 0px; outline: 0px; padding: 0px; vertical-align: baseline;" /></a><br />
<em style="background-position: 0px 0px; border: none; color: rgba(0, 0, 0, 0.4); font-family: 'Proxima Nova Italic', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 0.875em; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Something as simple as a country-picker can waste a surprising amount of time, <a href="http://boagworld.com/usability/the-country-picker-how-small-things-makes-big-differences/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.08em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">especially if you are British</a>! (<a href="http://www.smashingmagazine.com/wp-content/uploads/2014/04/country-picker-large-opt.png" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-width: 0.08em; border-style: none none solid; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Large preview</a>)</em></div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
For that matter, a more robust solution to “Remember me” functionality would be nice, so that users are, in fact, remembered!</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
I am aware that this post might sound like a rant against developers. It is not. It is <span style="background-position: 0px 0px; border: none; font-family: 'Proxima Nova Bold', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">a problem faced by all Web professionals</span>. Designers need to <a href="http://littlebigdetails.com/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">pay close attention to the details</a> of their designs. Web managers need to ensure that the <a href="http://boagworld.com/design/how-much-are-you-willing-to-invest-in-design/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">budget exists to refine their user interfaces</a>. And content creators need to optimize their content for fast consumption.</div>
<h3 style="background-position: 0px 0px; border: none; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; line-height: 1.3em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; vertical-align: baseline;">
Help Users Process Our Content Faster</h3>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We waste so much of our users’ time with verbose, poorly written and dense copy, making it hard for them to find the piece of information they need. The real shame is that we could do so much to help. For a start, we could give the user a sense of approximately how long a page will take to read. I offer this functionality on <a href="http://boagworld.com/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">my personal blog</a>, and it is the feature most commented on. Users love knowing how much of their time a post will take up.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We can also make our content a lot more scannable, with better use of headings, pullout quotes and lists. Finally, we can take a leaf out of <a href="http://www.nngroup.com/articles/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Jakob Nielsen’s website</a>. At the beginning of each post, he provides a quick summary of the page.</div>
<h4 style="background-position: 0px 0px; border: none; font-family: 'Proxima Nova Bold', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; letter-spacing: 0.125em; margin: 0px; outline: 0px; padding: 1.5em 0px 0.5em; text-transform: uppercase; vertical-align: baseline;">
THE TIP OF THE ICEBERG</h4>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
We could do so much more in all aspects of Web design to save users’ time. From information architecture to website analytics, we waste too much of it. Sometimes we even know we are doing it! We need to be forever vigilant and always ask ourselves:</div>
<blockquote style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0.11904762em inset; background-color: #f7f7f7; background-position: 0px 0px; border: 0.05952381em solid rgba(0, 0, 0, 0.0980392); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0.11904762em inset; color: rgba(0, 0, 0, 0.74902); font-family: 'Skolar Italic', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.05em; font-style: italic; line-height: 1.55em; margin: 1em 0px; outline: 0px; padding: 1em 2em; quotes: none; vertical-align: baseline;">
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
“How can I save the user time in this situation?”</div>
</blockquote>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
What are your thoughts on this topic? Please share your experiences and opinions with us, and join in the discussion in the comments section below.</div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<em style="background-position: 0px 0px; border: none; font-family: 'Proxima Nova Italic', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">(al, il)</em></div>
<div id="textadtarget" style="background-position: 0px 0px; border: none; margin: 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline;">
</div>
<div class="tagsdata longtags" style="background-position: 0px 0px; border: none; margin: 1em 0px 0px; outline: 0px; padding: 0px 42.046875px 1em 0px; position: relative; vertical-align: baseline;">
<a href="http://www.smashingmagazine.com/tag/usability/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-image: linear-gradient(rgb(232, 92, 51) 0px, rgb(229, 58, 43) 100%); border-bottom-left-radius: 0.3125em; border-bottom-right-radius: 0.3125em; border-top-left-radius: 0.3125em; border-top-right-radius: 0.3125em; color: white; display: inline-block; margin: 0px 0.625em 0.625em 0px; padding: 0.1em 0.5em 0.25em; text-decoration: none; vertical-align: baseline;">Usability</a>, <a href="http://www.smashingmagazine.com/tag/user-experience/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-image: linear-gradient(rgb(232, 92, 51) 0px, rgb(229, 58, 43) 100%); border-bottom-left-radius: 0.3125em; border-bottom-right-radius: 0.3125em; border-top-left-radius: 0.3125em; border-top-right-radius: 0.3125em; color: white; display: inline-block; margin: 0px 0.625em 0.625em 0px; padding: 0.1em 0.5em 0.25em; text-decoration: none; vertical-align: baseline;">User Experience</a>, <a href="http://www.smashingmagazine.com/tag/user-interaction/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-image: linear-gradient(rgb(232, 92, 51) 0px, rgb(229, 58, 43) 100%); border-bottom-left-radius: 0.3125em; border-bottom-right-radius: 0.3125em; border-top-left-radius: 0.3125em; border-top-right-radius: 0.3125em; color: white; display: inline-block; margin: 0px; padding: 0.1em 0.5em 0.25em; text-decoration: none; vertical-align: baseline;">User Interaction</a></div>
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.75em 0px; vertical-align: baseline;">
<a class="backtotop single" href="http://www.smashingmagazine.com/2014/04/25/stop-wasting-users-time/#top" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); -webkit-transition: all 0.3s; background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; bottom: 1.17em; color: rgba(0, 0, 0, 0.4); float: right; font-size: 0.9em; margin: 1em 0px 0px; padding: 0px 0px 0.07em; position: static; right: 1.5em; text-decoration: none; transition: all 0.3s; vertical-align: baseline;" title="Jump to the top of the page">↑ Back to top</a><a class="share-on-twitter single" href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.smashingmagazine.com%2F2014%2F04%2F25%2Fstop-wasting-users-time%2F&source=tweetbutton&text=Stop%20Wasting%20Users%26%238217%3B%20Time&url=http%3A%2F%2Fwww.smashingmagazine.com%2F2014%2F04%2F25%2Fstop-wasting-users-time%2F&via=smashingmag" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; float: right; font-size: 0.9em; margin: 1em 1em 0px 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;" title="Share on Twitter!">Share on Twitter</a></div>
</article>
<br />
<div class="bio clearfix" style="background-color: white; background-position: 0px 0px; border-bottom-color: rgb(229, 229, 229); border-bottom-width: 0.07em; border-style: none none solid; color: #333333; font-family: 'Proxima Nova Regular', 'Helvetica Neue', Calibri, 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 26.859375px; margin: 0px 0px 3em; outline: 0px; overflow: visible; padding: 0px 54.078125px 1em 0px; position: relative; vertical-align: baseline;">
<div class="gravatar" style="background-position: 0px 0px; border: none; float: left; margin: 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 139.375px;">
<img alt="" class="avatar avatar-78 photo" src="http://1.gravatar.com/avatar/f1116267962ca9352fa6ce1a4a918318?s=78&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D78&r=G" style="background-position: 0px 0px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; border: none; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: baseline;" /></div>
<div class="about" style="background-position: 0px 0px; border: none; float: left; margin: 0px; outline: 0px; padding: 0px; position: relative; vertical-align: baseline; width: 789.859375px;">
<a class="post-author" href="http://www.smashingmagazine.com/author/paul-boag/?rel=author" rel="author" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; color: #41b7d8; font-family: 'Skolar Bold', Palatino, Cambria, 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 1.5em; font-weight: 700; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Posts by Paul Boag">Paul Boag</a><br />
<div style="background-position: 0px 0px; border: none; outline: 0px; padding: 0.5em 0px; vertical-align: baseline;">
Paul Boag has been working with the web since 1994. He is now co-founder of the web design agency <a href="http://headscape.co.uk/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Headscape</a>, where he works closely with clients to establish their web strategy. Paul is a prolific writer having written the <a href="http://boagworld.com/websiteownersmanual" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgb(65, 183, 216); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; outline: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Website Owners Manual</a>, <a href="http://boagworld.com/books" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Building Websites for Return on Investment</a>, <a href="http://boagworld.com/books/clientcentric/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Client Centric Web Design</a>, <a href="http://boagworld.com/season/8/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Digital Adaptation</a> and numerous articles for publications such as .net magazine, Smashing Magazine and the Web Designers Depot. Paul also speaks extensively on various aspects of web design both at conferences across the world and on his award winning <a href="http://boagworld.com/podcast/" style="-webkit-tap-highlight-color: rgba(229, 59, 44, 0.4); background-position: 0px 0px; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-style: solid; border-bottom-width: 0.07em; color: #41b7d8; margin: 0px; padding: 0px 0px 0.07em; text-decoration: none; vertical-align: baseline;">Web design podcast boagworld</a>.</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-34785285679364975732014-03-23T11:06:00.000-04:002014-03-23T11:06:03.145-04:00Future of Flash?A post originally titled "<a href="http://gamasutra.com/blogs/LarsDoucet/20140318/213407/Flash_is_dead_long_live_OpenFL.php" target="_blank">Flash is dead, long live OpenFL!</a>" by <a href="http://gamasutra.com/blogs/author/LarsDoucet/846854/" target="_blank">Lars Doucet</a><br />
<br />
<div class="item_title" style="background-color: #eeeeee; border: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 30px; font-weight: bolder; letter-spacing: -0.05em; line-height: 1.3em; margin: 0px; padding: 0px;">
Flash is dead, long live OpenFL!</div>
<div style="background-color: #eeeeee; border: 0px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px;">
<span class="newsAuth" style="border: 0px; margin: 0px; padding: 0px;">by <a href="http://gamasutra.com/blogs/author/LarsDoucet/846854/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px; text-decoration: none;">Lars Doucet</a> on 03/18/14 12:26:00 pm <img alt="Expert Blogs" border="0" src="http://twimgs.com/gamasutra/images/expertIcon_gamaBlog.gif" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" valign="bottom" /> <img alt="Featured Blogs" border="0" src="http://twimgs.com/gamasutra/images/featuredIcon_gamaBlog.gif" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" valign="bottom" /> </span></div>
<div style="background-color: #eeeeee; border: 0px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px;">
<br /><span class="comment_text" style="border: 0px; margin: 0px; padding: 0px;"><a href="http://gamasutra.com/blogs/LarsDoucet/20140318/213407/Flash_is_dead_long_live_OpenFL.php#comments" style="border: 0px; color: #22522a; font-size: 14px; margin: 0px; padding: 0px;">28 comments</a></span><a href="http://twitter.com/?status=RT%20@gamasutra:%20Flash%20is%20dead,%20long%20live%20OpenFL!%20http://www.gamasutra.com/blogs/LarsDoucet/20140318/213407/" name="twitter_share" style="border: 0px; color: #22522a; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" type="button"></a><g:plusone count="false" size="medium"></g:plusone><a href="http://gamasutra.com/blogs/rss/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px; text-decoration: none;"></a></div>
<hr style="background-color: #eeeeee; background-image: url(http://twimgs.com/gamasutra/images/dots.gif); background-position: 0% 50%; background-repeat: repeat no-repeat; border: 0px; clear: both; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1px; height: 1px; margin: 0px; padding: 0px 0px 15px;" />
<div class="item_body mobile_image_transform" style="background-color: #eeeeee; border: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px; word-wrap: break-word;">
<strong><i><small>The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.<br />The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.</small></i></strong><hr style="background-image: url(http://twimgs.com/gamasutra/images/dots.gif); background-position: 0% 50%; background-repeat: repeat no-repeat; border: 0px; clear: both; font-size: 1px; height: 1px; margin: 0px; padding: 0px 0px 15px;" />
<div class="clear" style="border: 0px; clear: both; margin: 0px; padding: 0px;">
</div>
<div style="margin-bottom: 1.5em;">
<a href="http://www.fortressofdoors.com/2014/03/flash-is-dead-long-live-openfl.html" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><em style="border: 0px; margin: 0px; padding: 0px;">Cross-posted on FortressOfDoors, my personal blog.</em></a></div>
<div style="margin-bottom: 1.5em;">
I've been a stalwart Flash developer for 15 years, so nothing bothers me more than greatly exaggerated reports of Flash's premature demise. Even today, Flash remains a very viable platform with a large install base and a relatively healthy commercial ecosystem. <a href="http://amanita-design.net/games/machinarium.html" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank"><u>Many</u></a> <a href="http://store.steampowered.com/app/113200/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank"><u>awesome</u></a> <a href="http://store.steampowered.com/app/248860/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank"><u>games</u></a> have been written in Flash and/or Adobe AIR, including our own <a href="http://www.defendersquest.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank"><i>Defender's Quest</i></a>, which to date has sold over 125,000 copies.</div>
<div style="margin-bottom: 1.5em;">
But even a long-time Flash booster like myself can read the signs of the time. Flash may not be dead, but it is certainly <i>dying</i>, and the killer is not Steve Jobs, mobile devices, or HTML5, but Adobe. They are slowly neglecting Flash to death.<br /> </div>
<div style="border: 0px; margin: 0px; padding: 0px; text-align: center;">
<a href="http://files.fortressofdoors.com/images/ettuadobe.jpg" style="border: 0px; color: #22522a; margin: 0px 1em; padding: 0px;"><img border="0" height="198" src="http://files.fortressofdoors.com/images/ettuadobe.jpg" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" width="320" /></a></div>
<div style="margin-bottom: 1.5em;">
They <a href="http://mashable.com/2011/11/11/flash-mobile-dead-adobe/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">dropped support for the mobile flash player</a> as well as <a href="http://www.zdnet.com/adobe-drops-air-for-linux-due-to-lack-of-interest-4010022732/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">AIR on Linux</a>, <a href="http://arstechnica.com/business/2011/11/adobe-donates-flex-to-foundation-in-community-friendly-exit-strategy/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">handed Flex over to Apache</a>, and<a href="http://www.yeahbutisitflash.com/?p=4812" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">cancelled the long-awaited ActionScript 4 standard</a>. Although <i>right this minute</i> the flash player still has a big install base, and AIR remains a great way to reach mobile devices, there's no signs of strong future support. Flash just doesn't seem like a priority for Adobe any more. And <a href="http://mochiland.com/articles/mochi-media-winding-down-services-end-date-of-3-31-2014" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">MochiMedia's recent shutdown</a> is the canary in the coal mine. As a developer, I don't give a damn whether this is a good financial decision for Adobe -- they yanked the rug out from under me after 15 years of loyal support. "Sorry you invested in our platform and tools, you suckers! But hey, you can <i>totally </i>trust us to support you next time! Subscribe to Creative Cloud!"<br /><br />So where do we go from here? Unity3D is a popular answer, but it's got major downsides - I have to pay for each platform I want to support, and the web browser target depends on a clunky plugin with a low install base. But worst of all, it's just another proprietary platform. Sure, Unity is the bee's knees <i>now</i>, but who's to say it'll always be that way? Just ask all the loyal <a href="http://www.destructoid.com/microsoft-abandoning-xna-game-studio-243901.phtml" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">XNA developers who Microsoft left hanging out to dry</a>. And if there's a bug or missing feature, I have to wait for Unity to get around to fixing it. This works for some people -- and I wish them all the best -- but it's just not for me.<br /><br />I've learned my lesson -- whatever my next platform is, no-one should be able to take it away from me.</div>
<div style="margin-bottom: 1.5em;">
<br />I could try HTML5, but that precludes releasing high-performance desktop-ready games for Steam.<br /><br />I could try going with a custom engine in raw C++, or something like Java or C#, but it'll be a lot of manual work to get true cross-platform support<i>, </i>especially if I want a unified code base to compile it all from.<br /><br />I need something open-source, so I don't have to wait months or years for basic features or bugfixes. And shucks, it'd be nice to have the same API as Flash so porting my old code isn't a nightmare.</div>
<div style="margin-bottom: 1.5em;">
<br /></div>
<div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7sM4PWhbn38Jyuaf5WFxbiWihgDC0-04qCEqKelKhnrVE4t9CuuVfeeIXuyKIigR7zdjAWyp9k0arbRx1kX1DYi7K4FkTvdSAJb9VjDI1XxdBZCGbHwZhNfgOlVMxRAphfM1pa56DBvcd/s1600/suzie_dreaming.gif" imageanchor="1" style="border: 0px; color: #22522a; margin: 0px 1em; padding: 0px;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7sM4PWhbn38Jyuaf5WFxbiWihgDC0-04qCEqKelKhnrVE4t9CuuVfeeIXuyKIigR7zdjAWyp9k0arbRx1kX1DYi7K4FkTvdSAJb9VjDI1XxdBZCGbHwZhNfgOlVMxRAphfM1pa56DBvcd/s1600/suzie_dreaming.gif" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" /></a></div>
<div style="margin-bottom: 1.5em;">
<br />What's that you say? This magical chocolate pony of dreams exists? Why yes, it's called <i>OpenFL</i>!</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<a href="http://www.openfl.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">OpenFL</a> is an implementation of the Flash API written in the <a href="http://www.haxe.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Haxe</a> programming language. Never heard of it? Maybe you've heard of <a href="http://store.steampowered.com/app/239030/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">a certain BAFTA-award-winning game</a> that makes use of it:<br /> <div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px; text-align: center;">
<div style="margin-bottom: 1.5em;">
<a href="http://store.steampowered.com/app/239030/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><img alt="<a class=" border="0" div="" href="http://store.steampowered.com/app/239030/" src="http://files.fortressofdoors.com/images/papersplease.png" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" target="_blank" /></a></div>
<div style="margin-bottom: 1.5em; text-align: left;">
<br />Basically, you write your code in Haxe, then you link against the OpenFL library to get the functionality of the Flash API. This means:<br /><br /><span helvetica="" style="border: 0px; margin: 0px; padding: 0px;"><span style="border: 0px; font-size: medium; margin: 0px; padding: 0px;">You just <b>keep making flash games</b>, but you <i>also </i>get <b>mac, windows, linux, </b><i>and </i><b>mobile </b>targets,<b> </b><i>all </i>at <b>native speed</b>!</span></span><br /><br />Even better, you can keep using a lot of the same tools. The <a href="http://www.flashdevelop.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">FlashDevelop IDE</a>, very popular with Actionscript coders, has excellent support for Haxe. "Fine, fine, I can port my code over easily enough. But what about all my flash art stuff?" Not to worry - you can keep using the Flash authoring tool and its native flash vector animations if you like. That's because OpenFL recently released their <a href="https://github.com/openfl/swf" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">swf library</a> for free, which lets you use SWF animations and assets in both your flash and C++ targets.<br /><br />Don't believe me?<br /> </div>
<div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px;">
<a href="http://files.fortressofdoors.com/haxe/SwfLibraryExample.gif" imageanchor="1" style="border: 0px; color: #22522a; margin: 0px 1em; padding: 0px;"><img border="0" height="205" src="http://files.fortressofdoors.com/haxe/SwfLibraryExample.gif" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" width="320" /></a></div>
<div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px;">
</div>
<div style="margin-bottom: 1.5em; text-align: left;">
That's an animated gif recording of a C++ build I made in Haxe/OpenFL about 20 minutes ago. </div>
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
Here it is in flash <a href="http://files.fortressofdoors.com/haxe/SwfLibraryExample.swf" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">SWF format</a>. </div>
<div style="border: 0px; margin: 0px; padding: 0px;">
Here is is in windows <a href="http://files.fortressofdoors.com/haxe/SwfLibraryExampleEXE.zip" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">EXE format</a>.</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
Here's the original <a href="http://files.fortressofdoors.com/haxe/SwfLibraryExample.zip" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">source code</a>.<br /><br />Many of you might have heard of Haxe and/or OpenFL before, and I admit it can be really confusing to get started, so let me break everything down real easy. </div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
Our particular tech stack for <a href="http://www.defendersquest.com/2/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank"><i>Defender's Quest II: Mist of Ruin</i></a> looks like this, with the highest-level abstractions on top, and lowest-level stuff on bottom:</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px; text-align: center;">
<a href="http://files.fortressofdoors.com/images/techstack.png" imageanchor="1" style="border: 0px; color: #22522a; margin: 0px 1em; padding: 0px;"><img border="0" height="300" src="http://files.fortressofdoors.com/images/techstack.png" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" width="320" /></a></div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div style="margin-bottom: 1.5em;">
(Don't try googling TD-RPG, that's my own proprietary engine. The rest of it is all online and free, though!)</div>
<div style="margin-bottom: 1.5em;">
<br /></div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">Haxe - the language layer</span></h2>
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
At the very bottom you have Haxe itself, the language you're using to write code in. Basically, you write code in Haxe, and the special Haxe compiler turns your high-level Haxe code into source code from other languages depending on what flags you pass in. Using Haxe by itself requires little more than a command line and a text editor. </div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
You can certainly write cross-platform games using nothing but Haxe, but that's kind of hard-core. The haxe compiler will just spit out a bunch of c++ code, or javascript, or whatever, which for idiots like me isn't very useful. This is where OpenFL and lime come in.<br /><br /><i>I should mention that I'm simplifying things a bit here. Before we get to lime/OpenFL, there's some crazy magical bootstrapping that happens in the background, with the Haxe compiler using the <a href="https://github.com/openfl/hxlibc" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">hxlibc</a> and/or<a href="http://code.google.com/p/hxcpp/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">hxcpp</a> libraries, but I'm trying to make this as friendly as possible for newcomers without getting lost in all the details. Just keep in mind that I'm giving you a broad-strokes overview.</i></div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">Lime - low-level graphics layer</span></h2>
One step up from bare-metal haxe programming is lime, which stands for "Lightweight Media Engine." Lime is part of the OpenFL project, and provides a simple, lightweight, and cross-platform drawing API. This handles things like windowing, asset loading, blitting pixels, drawing routines, and interfacing with OpenGL, OpenGL ES, and SDL stuff.<br /><br />Also, lime makes cross-platform support a bit easier. Whereas Haxe has output targets like "c++", "javascript", "c#", etc, lime has output targets like "mac", "windows", "linux", "android", "ios", and so forth. Mac, Windows, and Linux targets all use C++ code, but they need special tweaks to properly handle file i/o, windowing, etc. The Haxe compiler and hxlibc/hxcpp libraries bootstrap your native targets, and lime sets up all the input/output/display boilerplate for you.<br /><br />You can totally make games just with lime, without ever touching OpenFL. In fact, having lime as a separate library is a recent development -- before all of those routines were just part of OpenFL. This caused two problems:<ol style="border: 0px; margin: 0px 1.5em 1em; padding: 0px;">
<li style="border: 0px; margin: 0px; padding: 0px 0px 15px;">OpenFL had a lot of boilerplate stuff that wasn't related to the Flash API, which was confusing</li>
<li style="border: 0px; margin: 0px; padding: 0px 0px 15px;">Some Haxe developers wanted cross-platform support, but didn't want the Flash API</li>
</ol>
Splitting lime off into its own lower-level thing solved both problems. Now all the basic drawing guts are in lime, and if you hate the Flash API and wish it would to die in a fire, you never have to touch it -- just use lime and be happy!<br /> <h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">OpenFL - high-level graphics layer + Flash API </span></h2>
On top of lime is OpenFL itself. Here we have higher-level graphics calls, with abstraction layers and a flash-style display list. In fact, we even have the same package structure. In Flash Actionscript, you could always do stuff like this:<br /><br /><span courier="" style="border: 0px; margin: 0px; padding: 0px;">import flash.display.Sprite;</span><br /><span courier="" style="border: 0px; margin: 0px; padding: 0px;">var mySprite:Sprite = new Sprite();</span><br /><span courier="" style="border: 0px; margin: 0px; padding: 0px;">addChild(sprite);</span><br /><br />In OpenFL, you can do the same exact thing. Sprites, MovieClips, the display list, the stage, events, etc, are all handled just like in Flash.<br /><br />Some minor differences include audio -- it works fine on different platforms, but since OpenFL is a fully open-source project, they can't cover the <a href="https://en.wikipedia.org/wiki/MP3#Licensing_and_patent_issues" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">draconian world of mp3 licensing</a> the way Adobe can, so mp3 playback only works on flash target. For everything else, you use ogg or wav files. In my experience, this isn't a huge downside since I really hate the limitations of the mp3 format (every Flash dev who's ever tried to get seamless mp3 looping to work knows what I'm talking about!)<br /><br />One thing to drive home -- if you use OpenFL, you can create <i>exactly</i> the same flash content you can create right now in ActionScript. That's because in the Flash target, you're making an actual swf file, and all you have to do to access the Flash API is <i>use it </i>-- the flash player has all that functionality built-in. On native targets, the OpenFL developers had to actually re-build the same functionality with C++ code, etc. So far there's feature parity for pretty much everything except for some of the less-common features (filters and shaders, as well as right-to-left font support for Hebrew/Arabic text, for instance). It's open-source of course, so those little gaps can always be filled later. At the moment, mirroring the Stage3D API on non-flash targets requires some special libraries, and there are many alternative 3D engines for Haxe (see below).<br /><br />OpenFL also tacks on a few quality-of-life features that the Flash pipeline <i>doesn't </i>have. Chiefly, asset libraries. In the old days, if I wanted to embed audio or image assets into my swf file, I had to add them all line by line, and set up individual class names to instantiate them with in my code. With OpenFL, thanks to the crazy black magic of <a href="http://haxe.org/manual/macros" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Haxe Macros</a>, OpenFL scans your game's asset folder at compile time and automatically generates all the necessary embedding boilerplate. All you have to do is put assets in the folder, then fetch by filename with one line of code:<br /><br /><span courier="" style="border: 0px; margin: 0px; padding: 0px;">var image = Assets.getBitmapData("filename.png");</span> </div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<br />Whereas embedding hundreds of images in Flash games is a huge chore, in OpenFL it's as easy as hitting "compile!"</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<div style="margin-bottom: 1.5em;">
<br />Many game developers will want to stop at this layer -- at the OpenFL stage, you have the same amount of functionality as you'd have using the FlexSDK to make a flash game. But some of us like fancy game frameworks like <a href="http://www.flixel.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Flixel</a>, <a href="http://useflashpunk.net/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">FlashPunk</a>, and <a href="http://gamua.com/starling/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Starling</a> that handle cool stuff like collisions, states, controls, cameras, etc. These and many others have been ported to Haxe as <a href="http://www.haxeflixel.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">HaxeFlixel</a>, <a href="http://haxepunk.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">HaxePunk</a>, and <a href="https://github.com/labe-me/haxe-starling" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">HaxeStarling</a>.<br /><br />HaxeFlixel (my personal favorite), is the most popular, and I can't recommend it highly enough. The others I've never used so I can't vouch for them directly, but I have heard many good things about HaxePunk.</div>
<div style="margin-bottom: 1.5em;">
<br /></div>
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">HaxeFlixel - game framework layer</span></h2>
<div style="margin-bottom: 1.5em;">
HaxeFlixel is the Haxe project that I use most. Not only is it <a href="https://github.com/stars?direction=desc&language=haxe&sort=stars" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">the #1 most-starred Haxe repo on all of github</a>, it's simple, easy-to-use, and comes chock-full-of <a href="http://haxeflixel.com/documentation/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">documentation</a> and <a href="http://haxeflixel.com/demos/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">examples</a>. Contrary to what many of the pixel-tastic example games might imply, it handles HD-style graphics just fine.<br /><br />HaxeFlixel has built-in support <a href="http://haxeflixel.com/demos/FlxNape/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Nape Physics</a>, <a href="http://haxeflixel.com/demos/GamepadTest/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Gamepad support</a>, <a href="http://haxeflixel.com/demos/Collision-and-grouping/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Collision & Grouping</a>, <a href="http://haxeflixel.com/demos/FlxCamera/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Cameras</a>, <a href="http://haxeflixel.com/demos/FlxTween/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Tweening</a>,<a href="http://haxeflixel.com/demos/Cursor/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">User</a> <a href="http://haxeflixel.com/demos/RPGInterface/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Interface,</a> and much more! Some of these features (physics, gamepad, etc) come from separate libraries (Nape) or emanate from lime/OpenFL (Gamepads), but HaxeFlixel wraps them up and makes them easy to use in games. Do keep in mind all those web demos use the flash target -- the native targets are <i>so much faster</i>.<br /><br />Obviously, I'm biased since I'm now part of the core HaxeFlixel team -- I maintain the <a href="https://github.com/HaxeFlixel/flixel-ui" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">flixel-ui</a> and <a href="https://github.com/HaxeFlixel/flixel-editors" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">flixel-editors</a> add-on repositories. Some other Haxe projects I've contributed to include my open-source localization framework <a href="http://github.com/larsiusprime/firetongue" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">firetongue</a> (as seen at GDC 2014 localization summit!), and my economic simulator,<a href="http://www.gamasutra.com/blogs/LarsDoucet/20130603/193491/BazaarBot_An_OpenSource_Economics_Engine.php" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">bazaarBot</a>.<br /><br />If you want to get started making a nice 2D game in Haxe <i>right now</i>, and you want to deploy to Flash, Mac/Windows/Linux, Android, iOS, or OUYA, HaxeFlixel has got your back.</div>
<div style="margin-bottom: 1.5em;">
<br /></div>
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">What about HTML5?</span></h2>
<div style="margin-bottom: 1.5em;">
So, HTML5 is a buzzword these days -- how does Haxe/OpenFL stack up in that regards?<br /><br />Well, at the lowest level you can just write JavaScript in Haxe, and it will generate JS just fine, with the added benefit of enforcing type-safety and other niceties that make JavaScript development more palatable.<br /><br />If you don't want to reinvent the wheel, you can use OpenFL. Now, OpenFL's HTML5 target, as of this writing, is the least mature of all its supported platforms. However, it's been getting a lot of love recently and in the last few weeks has made some amazing strides. I predict we'll have a fully mature HTML5 target very soon.<br /><br />How cool will it be when you can natively compile your game not just for mac/windows/linux, iOS, Android, and flash, but ALSO HTML5, all from the same source code base?<br /><br /><strong>UPDATE: </strong><br />Just a few hours after I posted this, OpenFL just posted this on their website:<br /><a href="http://www.openfl.org/blog/2014/03/18/flash-and-html5/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Flash AND HTML5, Unicorns exist!</a><br /><br />Nice!</div>
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;"><b>What about consoles?</b></span></h2>
<div style="margin-bottom: 1.5em;">
Okay, so Haxe/OpenFL can target all these amazing platforms. What about consoles?<br /><br />First of all, Haxe/OpenFL already has great support for the first wave of "Microconsoles," such as the OUYA, Gamestick, Nvidia Shield, MOJO, etc. Also, Grapefrukt Games' <a href="http://rymdkapsel.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><i>Rymdkapsel</i></a> uses Haxe/OpenFL and some crazy black magic to somehow run on a PlayStation Vita.<span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;"> As for </span>Valve's Steam Machines, those run SteamOS, which is just linux, so that's already in the bag. Theoretically, there's no reason the community couldn't get Haxe up and running on any arbitrary platform, even your toaster. Heck, it's already running on a <a href="http://haxe.org/download/manual_install?version=15673" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Raspberry Pi</a>!<br /><br />"Fine, fine, fine, but what about <i>Next-Gen Consoles!?"</i><br /><br />In practice, adding support for tightly-controlled proprietary consoles is tricky -- the biggest problem being the "NDA veil." The good thing is the whole Haxe/OpenFL stack is MIT-licensed, so there's no skittishness from console partners the way there is with GPL code. However, if OpenFL were to build a, say, native PS4 target, any proprietary bits could only be shared with other developers also under NDA's, which makes code hosting and collaboration difficult -- you can't just stick it on a public Github repo. There's currently a lot of community interest in WiiU, 3DS, PS4, and PSVita, but this will probably take some time (and paperwork!).<br /><br />I think we will eventually make headway here as Haxe/OpenFL continues to gain adoption, but in the meantime we have an unexpected secret weapon:<br /><br /><b> HTML5.</b><br /><br />It's public knowledge that the WiiU has <a href="https://wiiu-developers.nintendo.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Nintendo Web Framework</a>, a first-class HTML5 target for making games and apps. It's also public knowledge that the PS4 uses <a href="http://siliconangle.com/blog/2013/11/20/webgl-graphics-technology-powers-sony-playstation-4-ui/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">WebGL and HTML5</a>, though I don't know if any <i>games</i> actually use it just yet. And I've <a href="http://blog.tojicode.com/2013/05/how-microsoft-could-possibly-just-maybe.html" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">heard credible rumors</a> that XBOX One might eventually have the same functionality -- it's in IE 11, after all, and they pushed it hard on their phones and tablets.<br /><br />Based on some preliminary results, <a href="https://github.com/openfl/openfl-html5" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">openfl-html5</a> has been able to push a pretty large amount of 2D sprites in HD resolutions when running on PC web browsers. That's more than enough for a 2D game like<i>Defender's Quest</i>, and it seems like a good way to get our foot in the door. Native console development would be way more powerful (and way more expensive) but if we don't need the horsepower, why not take the easy road for now?<br /><br />Even better, on consoles, one of the big limitations of HTML5 goes away - cross-browser compatibility. Whatever HTML5 support they have on a console is a non-moving target, so you can just create a specific configuration optimized for Nintendo Web Framework, and whatever hypothetical things Sony and MS may or may not announce.<br /><br />There's also another alternative HTML5 backend in the works, <a href="https://github.com/YellowAfterlife/openfl-bitfive" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">openfl-bitfive</a>, which seems promising and should let us do similar things.</div>
<div style="margin-bottom: 1.5em;">
<br /></div>
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">Limitations</span></h2>
Okay, so what's the catch? Haxe/OpenFL can't be <i>all </i>roses and sunshine, right? I'd be remiss not to mention some of the downsides.<br /><br /><b>Documentation is a bit thin</b><br />Haxe hasn't been well documented in the past. The community is steadily improving this, but the go-to way to learn Haxe still remains: "Find someone who knows Haxe and ask them lots of questions." Now that we've finally got actual organizations like the Haxe Foundation and OpenFL Technologies driving things forward, things are gradually getting better.<br /><br />Here's some good starting points:<br /><a href="http://haxe.org/ref" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Haxe Reference Guide </a><br /><a href="https://github.com/HaxeFoundation/HaxeManual/tree/master/md/manual" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Haxe Manual (Work In Progress) </a><br /><a href="http://api.haxe.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Haxe API</a><br /><a href="http://www.openfl.org/documentation/setup/install-haxe/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">OpenFL's getting started guide</a><br /><a href="http://haxeflixel.com/documentation/getting-started/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">HaxeFlixel's getting started guide</a></div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<br />One thing to keep in mind is that the OpenFL API mirrors the Flash API -- so 90% of the time, you can just<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">use the Flash API docs</a> and the behavior should be the same. This isn't a perfect replacement for in-house docs, but it's still quite handy.<br /><br />Also, I highly recommend looking at code samples. <a href="http://haxeflixel.com/demos/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">HaxeFlixel in particular has a large demo section</a>, all with code samples and links to the relevant Github pages.<br /><br />The best way to learn Haxe is to get involved with the community. There's a lot of <i>really smart</i> people there, even if it's a bit small. The best places to find Haxers:<br /><br /><a href="http://haxe.org/forum/thread/4054" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">#haxe IRC channel on freenode</a><br /><a href="http://haxe.org/forum" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Haxe forums </a><br /><a href="http://www.openfl.org/forums/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">OpenFL forums</a><br /><a href="https://twitter.com/search?q=%23haxe&src=typd" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">#haxe</a> and <a href="https://twitter.com/search?q=%23openfl&src=typd" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">#openfl</a> tags on twitter<br /><a href="https://github.com/HaxeFoundation/haxe" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Haxe Foundation on Github</a><br /><a href="https://github.com/openfl/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">OpenFL Technologies, LLC on Github</a><br /><a href="https://plus.google.com/communities/103302587329918132234" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Haxe</a> and <a href="https://plus.google.com/communities/100629265342461903925" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">OpenFL</a> google+ communities<br /><br /><b>Open Source Be Crazy</b><br />You can get by just fine by using only the latest releases of OpenFL and Flixel, etc, but if you really want to dive deep you have to learn how to work with the flow of Open Source development. This means getting friendly with Git and Github, and interacting with people in the community. You'll want to get <i>really</i> good at using the "haxelib" tool that serves as a sort-of package manager for haxe libraries. It's crazy powerful, but it's not as simple as just opening Unity or GameMaker and having your legos all in one box.<br /><br /><b>Haxe Doesn't Hold Your Hand </b><br />One of the chief draws of GameMaker, Unity, and Flash (back in the day) is that they're easy to get started with, well-documented, and come in one monolithic box. Haxe is more of a constellation of little tools all working together, not unlike Git. It's fiddly, and it's not intuitive from the get-go. We're getting better at improving the early-user experience, but I'm not going to lie to you -- if you want to get started with Haxe, find someone who knows it already.<br /><br /><b>It's Not Magic</b><br />This is the most important caveat. Haxe/OpenFL is not some magical pixie dust you can sprinkle over your code and have everything Just Work on every platform. There are minor differences in visual output between C++ and flash targets, for instance ((the exact way rounded rectangles rasterize, etc).<br /><br />Furthermore, you <a href="http://www.joelonsoftware.com/articles/LeakyAbstractions.html" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">need to know where and how the abstractions leak</a>, and shift your mindset to the meta-programming model. Most of you probably won't have to ever roll up your sleeves and add raw C++ code to one of OpenFL's native backends, but it's definitely possible. You also need to learn the subtle differences between the targets. It's also advisable to get good at understanding how haxe generates code for different platforms. That said, as long as you don't overload on premature optimization, you should mostly be fine.<br /><br />The easiest way to start is to just use Haxe to keep making flash games -- that requires *very* little additional effort, and it will get you the same exact results as coding in ActionScript. You can even package swf files created in Haxe as AIR games if you want! (That's what <i><a href="http://www.monsterlovesyou.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">Monster Loves You!</a> </i>did -- it's written in haxe, compiled to SWF, packaged in AIR).<br /><br /><b>C++ Debugging is still a WIP </b><br />Technically, nothing's stopping you from running a command-line debugger like gdb on the generated C++ code Haxe outputs, or trying to run it inside Visual Studio, but that's not exactly easy. You can, however, very easily use an IDE like FlashDevelop to debug your flash code, and if there's an error on flash, there will likely be an error in the other targets as well. That said, we really want 1st-class, integrated, easy-to-use, FlashDevelop-supported debugging for C++ targets.<br /><br />Don't worry, <a href="http://blog.skialbainn.com/post/77910491044/haxe-roundup-189" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">it's coming</a>:<br /> <div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px; text-align: center;">
<a href="http://files.fortressofdoors.com/images/flashdevelopdebug.png" imageanchor="1" style="border: 0px; color: #22522a; margin: 0px 1em; padding: 0px;"><img border="0" height="180" src="http://files.fortressofdoors.com/images/flashdevelopdebug.png" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" width="320" /></a></div>
<div style="margin-bottom: 1.5em;">
<br />That's a screenshot I took the other day of native Haxe C++ debugging in FlashDevelop. It's an experimental feature for now, but hopefully it will be ready for release soon.<br /><br />To be clear, you really pretty much *never* need to directly touch your C++ code. The feature I'm alluding to above is being able to step through your <i>original Haxe code</i> line-by-line while running your generated C++ program in debug mode, to see where the errors are in your original source. And we're almost there!</div>
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">Other Important things of Note</span></h2>
<span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">There's a bunch of other little things I want to mention before we go.<b></b></span><h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: medium; letter-spacing: 0px; margin: 0px; padding: 0px;"><b>What's NME? What's Neko?</b></span></h2>
If you've looked into Haxe/OpenFL before, you've probably heard about "NME" and "Neko" and wondering what those are. First of all, <i>Neko</i> is Haxe's own interpreted virtual machine, not unlike the Java VM or the Flash player; Haxe can output to Neko bytecode that will run in the Neko VM. Entry-level haxe developers can safely ignore Neko -- it's a cool little cross-platform VM, but it's usefulness is mostly relegated to command-line tools, server-side programming, etc. I will mention one useful fact -- Neko uses the exact same rendering logic as the C++ targets, but compiles much, much, faster, so it's useful for testing your C++ visuals when you're impatient.<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
NME, which you'll see tons of references to still, is the predecessor to OpenFL. Basically, NME was created back in the day, then it got re-branded as OpenFL, then lime was spun off of OpenFL, and for a while NME was basically obsolete. Now that OpenFL has taken over NME's original mission of mirroring the Flash API,<a href="http://gamehaxe.com/2014/03/06/nme-5-0-rereleased/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">NME's original creator has revived the project</a> to take it in another direction. </div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
Confusing, I know. Basically, NME gave birth to OpenFL, OpenFL took over the Flash API business, and now NME has slimmed down into something very similar to lime that is now forking off to do its own, different thing.<br /><br /><span style="border: 0px; font-size: medium; margin: 0px; padding: 0px;"><b>What's Flambe?</b></span><br /><br /> <div class="separator" style="border: 0px; clear: both; margin: 0px; padding: 0px; text-align: center;">
<a href="http://files.fortressofdoors.com/images/flambe.png" imageanchor="1" style="border: 0px; color: #22522a; margin: 0px 1em; padding: 0px;"><img border="0" src="http://files.fortressofdoors.com/images/flambe.png" style="border: 0px; line-height: 0; margin: 0px; padding: 0px;" /></a></div>
<div style="margin-bottom: 1.5em;">
I'd be remiss if I didn't quickly mention <a href="https://github.com/aduros/flambe" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Flambe</a>. Flambe is an alternative Haxe media engine to OpenFL/lime, with a focus on web and mobile. Its chief targets are Flash, HTML5, iOS, and Android, and also lets you you render SWF content in the non-flash targets. For its mobile targets, Flambe exports your game as a SWF uses Adobe AIR to package it.</div>
<div style="margin-bottom: 1.5em;">
Flambe has attracted a lot of attention from the commercial sector, notably from <a href="https://github.com/aduros/flambe/wiki/Showcase" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Nickelodeon and Disney</a>. The top priority seems to be 1st-class HTML5 support across all platforms.</div>
<div style="margin-bottom: 1.5em;">
The biggest difference between OpenFL and Flambe seems to be that Flambe has more high-level stuff. So in Flambe-land, functionality that would normally be supplied by 3rd-party libraries like HaxeFlixel and HaxePunk in OpenFL-land, are built right into the core of Flambe.</div>
<div style="margin-bottom: 1.5em;">
Flambe is more monolithic, as it were. So if you're more of a "I want all my legos in one box" type person, check it out. Flambe also supports the new <a href="https://hacks.mozilla.org/2014/03/flambe-provides-support-for-firefox-os/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Firefox OS</a>, and just hours ago <a href="http://www.openfl.org/blog/2014/03/18/flash-and-html5/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">OpenFL announced the same thing</a>. Go Firefox!</div>
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;"><b><span style="border: 0px; font-size: medium; letter-spacing: 0px; margin: 0px; padding: 0px;">Other Cool Stuff</span></b></span></h2>
<span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">OpenFL supports the new fully-open source <a href="https://www.tizen.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Tizen</a> mobile OS, which some are speculating <a href="http://www.pcmag.com/article2/0,2817,2454971,00.asp" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">might be replacing Android on mobile devices</a>. </span><br /><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">There's also <a href="http://www.gamasutra.com/view/news/212242/Reach3dx_is_a_new_3D_game_engine_from_the_creators_of_Gamebryo.php" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Reach3DX</a>, from the creators of <a href="http://www.gamebryo.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Gamebryo</a>, which is built on the Haxe/OpenFL tech stack.</span><br /><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">And if you're really interested in making 3D games with Haxe, you might be interested in these Haxe 3D libraries:</span><br /><br /><a href="https://github.com/away3d/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">Away3D</span></a><br /><a href="https://github.com/vujadin/BabylonHx" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">BabylonHx</span></a><br /><a href="https://github.com/wighawag/openfl-stage3d/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">OpenFL-stage3d</span></a><br /><a href="https://github.com/ncannasse/h3d" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;"><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">H3D</span></a> (as seen in <a href="http://store.steampowered.com/app/233470/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Evoland</a>)<br /><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">Other<b> </b>miscellaneous tools include:</span><br /><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;"><a href="https://github.com/nitrobin/spinehx" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">Spinehx</a> (skeletal animations)</span><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;"><a href="https://github.com/soywiz/haxe-openfl-ffmpeg" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">haxe-openfl-ffmpeg</a> (playing video)</span><br /><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">And much, much more!</span><br /> </div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<br /><span style="border: 0px; font-size: medium; margin: 0px; padding: 0px;"><b>Server-Side Fun</b></span><br /><br /><span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">Whether you use OpenFL or note, Haxe has one last really cool trick up its sleeve - server-side code. Haxe code targets include PHP, Java, JavaScript, C++, and Neko. All of these can be used for server-side code. A common problem in game development is having to write your gameplay code <i>twice</i> -- once for the client, and once for the server, so you can do proper client-side prediction (or whatever). This usually means writing in two different languages, one optimized for desktop, and one optimized for the server, which can be a nightmare keeping them coordinated. </span></div>
<div style="border: 0px; margin: 0px; padding: 0px;">
</div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<span style="border: 0px; font-size: x-small; margin: 0px; padding: 0px;">Or... you could just use Haxe, and output whatever pair of client/server languages you happen to need. That way, when you update or bugfix your Haxe code, the changes can propagate to both the client <i>and </i>the server. <a href="http://www.reddit.com/r/gamedev/comments/1nqa7p/how_we_chose_a_development_stack_and_engine_for/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">This is exactly what Proletariat Sloth</a> did in their game <a href="http://www.worldzombination.com/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">World Zombination</a>. Even crazier, in the process they created a Haxe-->Unity library called <a href="https://github.com/proletariatgames/HUGS" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;">HUGS</a>(Haxe + Unity Glue... Stuff!)</span></div>
<div style="border: 0px; margin: 0px; padding: 0px;">
<h2 style="font-size: 14px; letter-spacing: 0.1px; line-height: 1.3em; margin-bottom: 0.75em; margin-top: 1.25em;">
<span style="border: 0px; font-size: large; letter-spacing: 0px; margin: 0px; padding: 0px;">Signing Off</span></h2>
</div>
<div style="margin-bottom: 1.5em;">
Okay that's what Haxe/OpenFL is and why it's cool. If you think it's cool you should <a href="http://openfl.org/" style="border: 0px; color: #22522a; margin: 0px; padding: 0px;" target="_blank">check it out</a>.<br /><br />The end.</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-44977633516128182042014-03-15T22:04:00.001-04:002014-03-15T22:04:08.418-04:00It’s time to move beyond Instructional Design: Elements of Learning Experience DesignA post by Andre Plaut @ <a href="http://www.corporatelearningnetwork.com/science-of-learning/articles/it-s-time-to-move-beyond-instructional-design-elem/">http://www.corporatelearningnetwork.com/science-of-learning/articles/it-s-time-to-move-beyond-instructional-design-elem/</a><br />
<br />
<h1 style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; margin: 0px 0px 5px; padding: 20px 12px 0px;">
It’s time to move beyond Instructional Design: Elements of Learning Experience Design</h1>
<div class="body" style="background-color: white; float: left; font-family: sans-serif; font-size: 12px; line-height: 12px; margin: 0px; padding: 0px 12px; position: relative; width: 622px;">
<span class="small_text" style="color: #888888; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; padding: 0px;">Contributor: <a href="http://www.corporatelearningnetwork.com/contributors/4700-andre-plaut/" style="color: #b72c2f; font-size: 12px; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Andre Plaut</a><br style="margin: 0px; padding: 0px;" />Posted: 02/25/2014 12:00:00 AM EST | </span> <span class="small_text" style="color: #888888; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; padding: 0px;"><a class="small_blue" href="http://www.corporatelearningnetwork.com/science-of-learning/articles/it-s-time-to-move-beyond-instructional-design-elem/#commentsSection" style="color: #b72c2f; line-height: 18px; margin: 0px; outline: none; padding: 0px; text-decoration: none;">0</a> <img src="http://www.corporatelearningnetwork.com/images/icon_comment.jpg" style="border: 0px; margin: 0px; padding: 0px; vertical-align: middle;" /> </span><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0px; color: black; font-family: Arial; font-size: 12px; margin: 0px; padding: 0px;"><tbody style="margin: 0px; padding: 0px;">
<tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 0px; vertical-align: middle;" valign="top" width="125"><div id="" style="margin: 0px; padding: 0px;">
<a href="http://www.corporatelearningnetwork.com/contributors/4700-andre-plaut/" style="color: #b72c2f; font-family: Arial, Helvetica, sans-serif; margin: 0px; outline: none; padding: 0px; text-decoration: none;"><div class="photo_bg_article" style="background-image: url(http://www.corporatelearningnetwork.com/images/photo_bg.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; height: 118px !important; margin: 0px; padding: 8px 0px 4px 8px; width: 118px;">
<img alt="It’s time to move beyond Instructional Design: Elements of Learning Experience Design" border="0" height="100" src="http://www.corporatelearningnetwork.com/images/articles/Photo/tech_design_thumb.jpg" style="border: none; margin: 0px; padding: 0px;" title="It’s time to move beyond Instructional Design: Elements of Learning Experience Design" width="100" /></div>
</a></div>
</td><td style="margin: 0px; padding: 8px 0px 0px; vertical-align: middle;" valign="top" width="475"><table border="0" style="border-collapse: collapse; border-spacing: 0px; color: black; font-size: 12px; margin: 0px; padding: 0px;"><tbody style="margin: 0px; padding: 0px;">
<tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 0px; vertical-align: middle;" valign="top" width="300"><strong style="margin: 0px; padding: 0px;">Rate this Article: (4.4 Stars | 8 Votes) </strong><br style="margin: 0px; padding: 0px;" /><div style="margin: 5px 0px 0px; padding: 0px;">
<span class="ratingContainer" id="firstRating" style="margin: 0px; padding: 0px;"><span class="star-rating-control" style="margin: 0px; padding: 0px;"><div class="rating-cancel" style="margin: 0px; padding: 0px; width: 0px;">
<a href="https://www.blogger.com/null" style="color: #0077b5; margin: 0px; outline: none; padding: 0px;" title="Cancel Rating"></a></div>
<div class="star-rating rater-0 rating-star {split:2} star-rating-applied star-rating-live" id="rating-star-ids" style="background-color: transparent !important; cursor: pointer; float: left; height: 15px; margin: 0px; overflow: hidden !important; padding: 0px; text-indent: -999em; width: 17px;">
<a href="https://www.blogger.com/null" style="background-image: url(http://www.corporatelearningnetwork.com/images/star.gif); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; color: #0077b5; display: block; height: 15px; margin: 0px; outline: none; padding: 0px; width: 16px;" title="1">1</a></div>
<div class="star-rating rater-0 rating-star {split:2} star-rating-applied star-rating-live" id="rating-star-ids" style="background-color: transparent !important; cursor: pointer; float: left; height: 15px; margin: 0px; overflow: hidden !important; padding: 0px; text-indent: -999em; width: 17px;">
<a href="https://www.blogger.com/null" style="background-image: url(http://www.corporatelearningnetwork.com/images/star.gif); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; color: #0077b5; display: block; height: 15px; margin: 0px; outline: none; padding: 0px; width: 16px;" title="2">2</a></div>
<div class="star-rating rater-0 rating-star {split:2} star-rating-applied star-rating-live" id="rating-star-ids" style="background-color: transparent !important; cursor: pointer; float: left; height: 15px; margin: 0px; overflow: hidden !important; padding: 0px; text-indent: -999em; width: 17px;">
<a href="https://www.blogger.com/null" style="background-image: url(http://www.corporatelearningnetwork.com/images/star.gif); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; color: #0077b5; display: block; height: 15px; margin: 0px; outline: none; padding: 0px; width: 16px;" title="3">3</a></div>
<div class="star-rating rater-0 rating-star {split:2} star-rating-applied star-rating-live" id="rating-star-ids" style="background-color: transparent !important; cursor: pointer; float: left; height: 15px; margin: 0px; overflow: hidden !important; padding: 0px; text-indent: -999em; width: 17px;">
<a href="https://www.blogger.com/null" style="background-image: url(http://www.corporatelearningnetwork.com/images/star.gif); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; color: #0077b5; display: block; height: 15px; margin: 0px; outline: none; padding: 0px; width: 16px;" title="4">4</a></div>
<div class="star-rating rater-0 rating-star {split:2} star-rating-applied star-rating-live" id="rating-star-ids" style="background-color: transparent !important; cursor: pointer; float: left; height: 15px; margin: 0px; overflow: hidden !important; padding: 0px; text-indent: -999em; width: 17px;">
<a href="https://www.blogger.com/null" style="background-image: url(http://www.corporatelearningnetwork.com/images/star.gif); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; color: #0077b5; display: block; height: 15px; margin: 0px; outline: none; padding: 0px; width: 16px;" title="5">5</a></div>
</span></span></div>
</td></tr>
</tbody></table>
</td></tr>
</tbody></table>
<div class="tags" style="color: #888888; font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin: 0px; padding: 8px 0px 0px;">
Tags: <a class="top5_profilelink" href="http://www.corporatelearningnetwork.com/search/learning-design/" style="color: #b72c2f; margin: 0px; outline: none; padding: 0px; text-decoration: none;">learning design</a> | <a class="top5_profilelink" href="http://www.corporatelearningnetwork.com/search/learner-experience-design/" style="color: #b72c2f; margin: 0px; outline: none; padding: 0px; text-decoration: none;">learner experience design</a> <br style="margin: 0px; padding: 0px;" /></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The process of designing any sort of human experience, regardless of purpose or platform, is centered on reaching a desired outcome, ideally with as little fuss and as much joy as possible.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The purpose of an experience and the platform on which the experience takes place will vary: purchasing a plane ticket on a tablet to vacation, enjoying a musical performance in a theater, or learning to code in a classroom. Although each of these experiences requires its own unique methods and frameworks, the elements that should be taken into consideration during the design process remain mostly the same</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The best representation of those elements comes from Jesse James Garrett’s <em style="margin: 0px; padding: 0px;">Elements of User Experience</em>. While Garrett’s “elements” are most relevant to digital product design, I’ve been able to use them as a roadmap for developing learning experiences for adults.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Designing adult learning experiences that take place either online or in a classroom has always traditionally been about defining a curriculum. That process of curriculum creation is most commonly called instructional design. But, in the same way that user experience design requires much more than deciding what content should go on a website, true learning experience design requires much more than curriculum.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
With that in mind, I took Garrett’s Elements as inspiration to create my own Elements of Learning Experience Design to formalize and communicate a design process I have struggled to explain to others.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<br /></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<img src="http://farm8.staticflickr.com/7435/12778067415_091934fec7_z.jpg" style="border: 0px; margin: 0px; padding: 0px;" /></div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px 0px 7px;">
Strategy plane</h3>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<em style="margin: 0px; padding: 0px;">What are the needs and goals of your learners and your organization?</em></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The goal of almost any learning experience is rooted in acquiring the new skills, knowledge, motivation, and/or confidence to change an existing behavior or create a new one. Those changes in behavior should have measurable impacts, allowing you to define key success metrics.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Before you start building anything, you should first get a better understanding of the needs you’re trying to solve for.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
This means identifying the learner’s needs, which include the additional skills and knowledge required to do something differently, and their goals, which is what they hope to accomplish by doing things differently. Identifying your organization’s needs and goals are equally important. A successful learning experience must be able to address the objectives of both, regardless of how different they may be.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Ultimately, adult learners and their organizations expect learning experiences to establish behaviors that make their lives or work more efficient and effective.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
As a learning experience designer, you should focus your time and attention during the strategy plane on identifying the gaps that exist between the learner and his/her desired outcome. Those gaps exist due to a lack of the following:</div>
<ul style="list-style-image: initial; list-style-position: outside; margin: 0px; padding: 12px 0px 12px 24px;">
<li style="margin: 0px; padding: 3px 0px;"><strong style="margin: 0px; padding: 0px;">Knowledge</strong>: Do learners lack the proper information to complete a task?</li>
<li style="margin: 0px; padding: 3px 0px;"><strong style="margin: 0px; padding: 0px;">Skill</strong>: Do they have all of the right information but lack the ability to translate that knowledge into action that could be applied to a given situation?</li>
<li style="margin: 0px; padding: 3px 0px;"><strong style="margin: 0px; padding: 0px;">Confidence</strong>: Are they able to demonstrate or apply the skill, but do they hesitate or refuse to apply it?</li>
<li style="margin: 0px; padding: 3px 0px;"><strong style="margin: 0px; padding: 0px;">Motivation</strong>: Are they able to demonstrate or apply the skill confidently but just don’t want to do it?</li>
<li style="margin: 0px; padding: 3px 0px;"><strong style="margin: 0px; padding: 0px;">Access</strong>: Do they have all of the above but lack the proper tools or resources to complete a task?</li>
</ul>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Once you are able to properly identify the gaps that cause learners to struggle, you must design a solution that effectively addresses those gaps.</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px 0px 7px;">
<strong style="margin: 0px; padding: 0px;">Requirements plane</strong></h3>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<em style="margin: 0px; padding: 0px;">What are the key topics, methods, activities, and logistics required to create a successful learning experience?</em></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Once your objectives have reached a certain level of clarity, you can begin defining the content and functional requirements needed of the learning experience in order to reach those objectives.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Let’s break this down by using an example.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Start with your objectives. Let’s say a political campaign wants to decrease the amount of inaccurate voter data without decreasing the amount of data coming in.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
What key metrics represent success to your organization and your learners? Based on the example’s objectives, the key metrics could be maintaining the amount of data being processed, and decreasing the number of “inaccurate information” reports.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Work backwards from there to figure out the core behaviors that support those metrics from being reached. In this example, volunteers must be able to ask accurate questions, know how to fill out data reports, and do it all pretty quickly.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Then, outline the necessary knowledge, skills, and resources needed to exhibit those behaviors. Asking effective questions is a skill built upon the knowledge of what makes certain questions effective, and what the campaign is interested in learning.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Knowing how to accurately fill out a form is a knowledge-based task requiring a limited amount of practice. Doing something quickly and accurately has a lot to do with practice, confidence, and motivation. Logistically, volunteers need to have access to data entry forms or terminals, and voters to speak to.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Next, map those components to topics and activities. By the end of the training session, learners will be able to describe why accurate data is critical to the campaign, prioritize what data is most important to the campaign, identify the right questions to ask to gather that data, and practice inputting that data into different forms or terminals.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
And that’s how you arrive at your content requirements.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
It’s also important to think beyond what content is required of an experience. The content outlined in our example above may close our learners’ knowledge, skill, and confidence gaps, but it will likely fail to achieve the actual objectives without functional requirements.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
For offline learning experiences, these functional requirements include facilities, personnel, logistics (materials, A/V, and the like), and pre-/post-course support (including on-boarding and continued engagement and follow-up). Online learning experiences have similar functional requirements, including choosing a platform (such as a custom site versus Articulate), and finding designers and engineers to actually build the digital product, downloadable materials, and pre-/post-course support.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
One of the worst mistakes you can make as a learning experience designer is to assume that functional requirements take care of themselves. When functional requirements are not built into the experience, you end up with disgruntled learners who will be much less likely to apply anything they’ve learned during the experience you’ve designed.</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px 0px 7px;">
<strong style="margin: 0px; padding: 0px;">Structure plane</strong></h3>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<em style="margin: 0px; padding: 0px;">How will the topics, activities, logistics, and assessments be structured?</em></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Imagine you’re learning how to drive.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
First, your instructor teaches you about starting your car. Next, she goes over how to park your car. After that, she teaches you about the gas pedal, the brake pedal, and shifting to reverse. And finally, she shows you how to adjust your mirrors.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Does this sequence of events sound strange to you? That’s because the structure of the learning experience described above is not being taken into consideration.Once you’ve outlined your requirements and objectives, you must think about how those requirements will be structured.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
In user experience and learning experience design, this relates directly to the organizing of information in order to make it usable, otherwise known as information architecture.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
For an adult learning experience to be successful, the learning modules must be designed and structured in the way that is the most logical and relevant to the learner. To do that, you must first understand how different topics relate to one another in the learner’s mind (example: A key unlocks a door), in what order they usually occur (example: A door must be unlocked before being opened), and what knowledge or skill builds upon another (example: Turning a key builds the skill to turn a doorknob).</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
If you were to create a sales training program, would you begin with a customer entering the store, or would you begin with the product arriving in inventory? Would the section on point-of-sale systems be near the beginning, middle, or end of the program?</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Structure becomes even trickier when your program involves non-linear scenarios, like setting up a multi-channel marketing campaign. Should the learner know about Google Analytics before or after Facebook Paid Advertising? There are valid arguments to either option, but the real question is what makes most sense to the learner</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
To answer that question, you’ll often have to look back at your objectives and learner needs. How much do you know about your learners, their daily responsibilities, and their environment? If you’re still finding it difficult to determine the structure of your learning experience, you should probably do more research.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Structure also applies to the functional requirements of your learning experience. When will learners need the most support? Which topics or skills present the largest challenge to your learners? You should also consider whether or not the learning environment is conducive to the type of experience you’re designing (online vs. offline, short-term vs. long-term, facilitated vs. self-led, and the like).</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px 0px 7px;">
<strong style="margin: 0px; padding: 0px;">Interaction plane</strong></h3>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<em style="margin: 0px; padding: 0px;">What will learners actually be doing, hearing, and seeing during the learning experience?</em></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The interaction plane deals directly with designing the materials, activities, lectures, and discussions that make up the learning experience. This is where instructional design lives. As an instructional designer, you will focus most of your efforts on defining exactly how learners are introduced to new skills and knowledge, and what practice and application look like those skills.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
When introducing new knowledge to learners, it helps tremendously to root it in existing knowledge. This can be done through the use of use analogies, previous experiences, and common cultural references. To use these methods effectively, you must have a strong grasp of your learners’ perspectives and experiences as they relate to the content.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Acquiring new skills demands a different approach. Learners must be able to actually apply new skills to both real and hypothetical problems within the learning experience in order to become proficient. Think of how many times you had to practice parking a car in both empty and full parking lots before you felt comfortable parking on a daily basis. You must create opportunities that allow learners to practice and apply their new skills in supportive environments.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
This is also the time to think about how your learners’ progress will be tracked. Assessment criteria should first be defined within the requirements plane, and then built into the program in the structure plane. Exactly which tools and processes are used to evaluate a learner’s skill-level, and how progress is communicated back to learners should be defined here.</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px 0px 7px;">
<strong style="margin: 0px; padding: 0px;">Sensory plane</strong></h3>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
<em style="margin: 0px; padding: 0px;">What will the learning experience look and sound like?</em></div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The experience you design must be able to cater to your learners’ sense as well as align with your organization’s brand. The sensory plane applies to all materials and instructions designed for the program, including presentation decks, guides, web sites, lesson plans, worksheets, activity materials, and so on.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The sensory plane allows your materials to implicitly communicate information to your learners about the experience they are about to have. The tone of your written content, as well as the visual design of your materials, should represent your organization’s branding and communicate the mood of the experience, be it professional, fun, or quirky. In the same way that content should be strategically structured, the visual design of your materials should be cohesive and consistent.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
The sensory plane is your opportunity to create a learning experience that is both functional and beautiful. Decks are designed as visual references to anchor learners, but if they’re filled with too much text and poorly chosen images, decks end up being frustrating and useless. A lack of verbal instructions will frustrate learners, but it’s still better than unclear or misleading instructions.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
People, regardless of their preferences, are drawn to polished, well-designed materials and clear communication. The sensory layer creates a single, cohesive experience that allows learners to focus on gaining new skills and not deciphering their learning environment.</div>
<h3 style="color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px 0px 7px;">
<strong style="margin: 0px; padding: 0px;">Conclusion</strong></h3>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Designing learning experiences must be treated in the same way as designing any sort of user experience. Learners, just like users, have needs that can only be solved through proper research, design, validation, and iteration.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
Anyone involved in adult learning should step outside the limiting boundaries of curriculum design in order to account for the learner’s entire experience. By only focusing on content, we are missing out and what actually makes up a person’s reality, including the environment in which they’re learning in, and their lives before and after the learning experience.</div>
<div style="border: none; line-height: 18px; padding: 7px 0px 14px;">
By taking each of these elements into consideration, any teacher or instructional designer can start begin to think beyond those limitations, and look to create immersive and enriching experiences for their learners. This not only allows us to be more effective at teaching others, but it also establishes a higher level of quality that people should expect of a learning experiences.</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-15135014975167585692014-03-03T14:56:00.000-05:002014-03-03T14:56:52.945-05:00JS SVG Libraries<i>Abridged from StackOverFlow@<a href="http://stackoverflow.com/questions/15103258/pure-svg-javascript-library">http://stackoverflow.com/questions/15103258/pure-svg-javascript-library</a> </i><br />
<i><br /></i>
<blockquote class="tr_bq">
<span class="comment-copy" style="background-color: white; border: 0px; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; vertical-align: baseline;">Raphael is a very strongly built SVG library, if its functions are limited, going with pure Javascript+SVG might be the right way.</span><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> – </span><a class="comment-user" href="http://stackoverflow.com/users/295264/starx" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; white-space: nowrap;" title="36339 reputation">Starx</a><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> </span><span class="comment-date" dir="ltr" style="background-color: white; border-bottom-style: none; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #999999; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="comment-link" href="http://stackoverflow.com/questions/15103258/pure-svg-javascript-library#comment21249368_15103258" style="background-color: transparent; border-bottom-style: none; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #999999; cursor: pointer; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="relativetime-clean" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;" title="2013-02-27 02:51:50Z">Feb 27 '13 at 2:51</span></a></span></blockquote>
<br />
<blockquote class="tr_bq">
<span class="comment-copy" style="background-color: white; border: 0px; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; vertical-align: baseline;">I think I'll give Keith Wood's JQuery SVG a go</span><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> – </span><a class="comment-user owner" href="http://stackoverflow.com/users/708436/jodes" style="background-color: #e0eaf1; border: 0px; color: #4a6b82; cursor: pointer; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 2px 5px; text-decoration: none; vertical-align: baseline; white-space: nowrap;" title="3284 reputation">Jodes</a><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> </span><span class="comment-date" dir="ltr" style="background-color: white; border-bottom-style: none; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #999999; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; vertical-align: baseline;"><a class="comment-link" href="http://stackoverflow.com/questions/15103258/pure-svg-javascript-library#comment21249532_15103258" style="background-color: transparent; border-bottom-style: none; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #999999; cursor: pointer; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="relativetime-clean" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;" title="2013-02-27 03:00:34Z">Feb 27 '13 at 3:00</span></a></span><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> </span></blockquote>
<br />
<blockquote class="tr_bq">
<span class="comment-copy" style="background-color: white; border: 0px; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; vertical-align: baseline;">Query SVG is not a library, its an extension to enables several functionality of jquery especially its selector ability to be applied on SVG elements.</span><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> – </span><a class="comment-user" href="http://stackoverflow.com/users/295264/starx" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; white-space: nowrap;" title="36339 reputation">Starx</a><span style="background-color: white; color: #444444; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px;"> </span><span class="comment-date" dir="ltr" style="background-color: white; border-bottom-style: none; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #999999; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; vertical-align: baseline;"><span class="relativetime-clean" style="background-color: transparent; border: 0px; color: #999999; cursor: pointer; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="2013-02-27 03:15:33Z"><a class="comment-link" href="http://stackoverflow.com/questions/15103258/pure-svg-javascript-library#comment21249740_15103258" style="background-color: transparent; border-bottom-style: none; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; color: #999999; cursor: pointer; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Feb 27 '13 at 3:15</a></span></span></blockquote>
<br />
<blockquote class="tr_bq">
<span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;">If your graphics generate, in some way or another, from data, I would give D3.js a try. </span></blockquote>
<blockquote class="tr_bq">
<span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;">Even if the data weight of your needs is low, I think that it can be very useful to give it a look. </span></blockquote>
<blockquote class="tr_bq">
<span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;">On the plus side is that it generates absolutely standard svg, style with standard css, so you can check what is happening easily. You could even use it to generate svg, and then copy/paste your svg to another project without the D3.js. </span></blockquote>
<blockquote class="tr_bq">
<span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;">Another plus is the support for transitions, that is very good imho.</span> </blockquote>
<blockquote class="tr_bq">
<br />
<span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;">There's a new compact library called </span><a href="http://svgjs.com/" rel="nofollow" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">svg.js</a><span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;"> that offers easier svg manipulation, and which doesn't have any VML legacy code/restrictions like </span><a href="http://raphaeljs.com/" rel="nofollow" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Raphaël</a><span style="background-color: white; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 18px;"> has.</span> </blockquote>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-11999063475950467612014-03-03T14:30:00.001-05:002014-03-03T14:30:22.195-05:00Top SVG Javascript Libraries Worth Looking At<h2>
Top SVG Javascript Libraries Worth Looking At</h2>
<i>Original post by Farinspace@<a href="http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/">http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/</a></i><br />
<br />
<div class="entry-content" style="border: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 21px; margin: 0px 0px 10px; outline: none; padding: 0px; vertical-align: baseline;">
<div style="border: none; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
<img alt="SVG Javascript Libraries" src="http://cdn.farinspace.net/wp-content/uploads/svg.jpg" style="border: 0px; height: auto; margin: 0px; max-width: 610px; outline: none; padding: 0px; vertical-align: baseline;" /></div>
<div class="intro" style="border: none; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
Learn about SVG and simplify your work with Canvas/VML with these top Javascript SVG libraries you can use in your projects.</div>
<div style="border: none; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
<span id="more-308" style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"></span></div>
<div style="border: none; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
I read a <a href="http://www.sitepoint.com/what-everybody-ought-to-know-about-using-svg-right-now/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">great article</a> this morning about <a href="http://www.w3.org/TR/SVG11/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">SVG</a> (Scalable Vector Graphics), its current state on the web and how to use it. If you’re even a slight bit curious about SVG, it’s really a great read.</div>
<div style="border: none; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
So I got to wondering how many Javascript SVG libraries/frameworks are out there… Well nothing that a good google search and some looking around couldn’t cure.</div>
<div style="border: none; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
Here is what I found… if you know of any JS SVG API I have not mentioned please, please let me know.</div>
<h2 style="border: none; font-family: Arimo, sans-serif; font-size: 21px; font-weight: normal; margin: 0px 0px 21px; outline: none; padding: 0px; text-shadow: rgb(254, 254, 254) 1px 1px; vertical-align: baseline;">
SVG Javascript Libraries</h2>
<ol style="border: none; list-style-image: initial; list-style-position: initial; margin: 0px 0px 21px 3em; outline: none; padding: 0px; vertical-align: baseline;">
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://raphaeljs.com/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Raphaël—JavaScript Library</a></strong><br />Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. It’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://code.google.com/p/svgweb/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">svgweb</a></strong><br />SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://processingjs.org/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Processing.js</strong></a><br />Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. Processing.js is explicitly developed for browsers that support the HTML5 <Canvas> element. Processing.js runs in FireFox, Safari, Opera and Chrome but will not be supported in Internet Explorer until Mircosoft catches up.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://docs.dojocampus.org/dojox/gfx" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">dojox.gfx</strong></a><br />dojox.gfx (GFX) is a cross-platform vector graphics API. It loosely follows SVG as the underlying model. GFX helps to isolate your application from the many native vector graphics implementation differences across all modern Browsers.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://code.google.com/p/explorercanvas/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">ExplorerCanvas</a></strong><br />Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://svgkit.sourceforge.net/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">SVGKit</strong></a><br />SVGKit is a collection of JavaScript libraries for painless client-side SVG manipulation: SVGKit provides browser-independent access, SVGCanvas implements Canvas API, and SVGPlot plots/graphs data and functions.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.liquidx.net/plotkit/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">PlotKit</strong></a><br />PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.kevlindev.com/projects/jsdrawing/index.htm" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">JSDrawing</strong></a><br />JSDrawing is a client-side JavaScript library that allows you to render vector graphics independently of browser and platform. The rendering API is based on SVG’s path commands and adding support for new renderers is very simple.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">VectorGraphics</strong></a><br />This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don’t have JavaScript experience.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://keith-wood.name/svgRef.html" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">jQuery SVG</strong></a><br />A jQuery plugin that lets you interact with an SVG canvas.</li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.dotuscomus.com/pergola/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><strong style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">PERGOLA</strong></a><br />PERGOLA is a JavaScript framework and library using SVG, designed to provide developers with a powerful tool for building web applications, User Interfaces, presentations and more (the framework requires a <a href="http://www.dotuscomus.com/pergola/download.html" rel="nofollow" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">license</a>)</li>
</ol>
<h2 style="border: none; font-family: Arimo, sans-serif; font-size: 21px; font-weight: normal; margin: 0px 0px 21px; outline: none; padding: 0px; text-shadow: rgb(254, 254, 254) 1px 1px; vertical-align: baseline;">
Learning More About SVG</h2>
<ul style="border: none; list-style: square; margin: 0px 0px 21px 2.5em; outline: none; padding: 0px; vertical-align: baseline;">
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.mozilla.org/projects/svg/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Mozilla SVG Project</a></li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://objjob.phrogz.net/objects.asp?langID=1" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">SVG DOM Reference</a></li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="https://developer.mozilla.org/en/Canvas_tutorial" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Canvas tutorial</a></li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://wiki.svg.org/index.php?title=Inline_SVG" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Inline SVG</a></li>
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.w3.org/TR/SVG11/" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Scalable Vector Graphics (SVG) Specification</a></li>
</ul>
<span style="border: none; clear: both; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><img alt="" height="0" src="http://www.farinspace.com/wp-content/plugins/wp-spamfree/img/wpsf-img.php" style="border: 0px none; height: 0px; margin: 0px; max-width: 610px; outline: none; padding: 0px; vertical-align: baseline; width: 0px;" width="0" /></span><div class="yarpp-related" style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<h2 style="border: none; font-family: Arimo, sans-serif; font-size: 21px; font-weight: normal; margin: 0px 0px 21px; outline: none; padding: 0px; text-shadow: rgb(254, 254, 254) 1px 1px; vertical-align: baseline;">
Related posts</h2>
<ol style="border: none; list-style-image: initial; list-style-position: initial; margin: 0px 0px 21px 3em; outline: none; padding: 0px; vertical-align: baseline;">
<li style="border: none; margin: 7px 0px; outline: none; padding: 0px; vertical-align: baseline;"><a href="http://www.farinspace.com/jquery-image-preload-plugin/" rel="bookmark" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;" title="jQuery Image Preload Plugin">jQuery Image Preload Plugin</a></li>
</ol>
</div>
</div>
<div class="entry-meta" style="border: none; clear: both; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-style: italic; line-height: 21px; margin-bottom: 21px; outline: none; padding: 0px; vertical-align: baseline;">
<span class="category" style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><span class="before" style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">Posted in </span><a href="http://www.farinspace.com/category/javascript/" rel="tag" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Javascript</a></span> <span class="post_tag" style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><span class="before" style="border: none; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">| Tagged </span><a href="http://www.farinspace.com/tag/canvas/" rel="tag" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">canvas</a>, <a href="http://www.farinspace.com/tag/javascript/" rel="tag" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Javascript</a>, <a href="http://www.farinspace.com/tag/svg/" rel="tag" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">svg</a></span> | <a class="comments-link" href="http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/#comments" style="border: none; color: #551a8b; cursor: pointer; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Comment on Top SVG Javascript Libraries Worth Looking At">11 Responses</a></div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-208792018558024802014-02-20T17:09:00.001-05:002014-02-20T17:09:25.139-05:00Pushing Data to Browser<h2>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Pushing Data to Browser</span></h2>
<h4>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">By Will Fox on Feb. 20, 2014</span></h4>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I noticed in one of the classes I take that uses <a href="http://piazza.com/">piazza.com</a> as a discussion tool that changes to <span style="color: red;">the page content was pushed real time without refreshing the page</span>. This intrigued me immensely so I did some search and here is what I found out:</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">It's called "<a href="http://en.wikipedia.org/wiki/Push_technology" target="_blank" title="Wikipedia: Push Technology">Push Technology</a>", where data is pushed by the server to the browser instead of the browser pulling data from the server.</span><br />
<h4>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">From <a href="http://stackoverflow.com/questions/19995/is-there-some-way-to-push-data-from-web-server-to-browser" target="_blank" title="Stackoverflow post">Stackoverflow</a>:</span></h4>
<blockquote class="tr_bq">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Q: Is there some way to PUSH data from web server to browser? <span style="background-color: white; font-size: 14px; line-height: 18px;">Of course I am aware of Ajax, but the problem with Ajax is that the browser should poll the server frequently to find whether there is new data. This increases server load.</span>Is there any better method (even using Ajax) other than polling the server frequently?</span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">A1: <span style="background-color: white; font-size: 14px; line-height: 18px;">Yes, what you're looking for is COMET </span><a href="http://en.wikipedia.org/wiki/Comet_(programming)" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">http://en.wikipedia.org/wiki/Comet_(programming)</a><span style="background-color: white; font-size: 14px; line-height: 18px;">. Other good Google terms to search for are AJAX-push and reverse-ajax.</span></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="background-color: white; font-size: 14px; line-height: 18px;">A2: </span><span style="background-color: white; font-size: 14px; line-height: 18px;">Yes, its called </span><strong style="background-color: white; border: 0px; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; vertical-align: baseline;">Reverse Ajax</strong><span style="background-color: white; font-size: 14px; line-height: 18px;"> or </span><strong style="background-color: white; border: 0px; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; vertical-align: baseline;">Comet</strong><span style="background-color: white; font-size: 14px; line-height: 18px;">. Comet is basically an umbrella term for different ways of opening long-lived HTTP requests in order to push data in real-time to a web browser. I'd recommend</span><a href="http://www.stream-hub.com/" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">StreamHub Push Server</a><span style="background-color: white; font-size: 14px; line-height: 18px;">, they have some cool demos and its much easier to get started with than any of the other servers. Check out the </span><a href="http://streamhub.blogspot.com/2009/07/getting-started-with-streamhub-and.html" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Getting Started with Comet and StreamHub Tutorial</a><span style="background-color: white; font-size: 14px; line-height: 18px;"> for a quick intro. You can use the Community Edition which is available to download free but limited to 20 concurrent users. The commercial version is well worth it for the support alone plus you get SSL and Desktop .NET & Java client adapters. Help is available via the </span><a href="http://groups.google.co.uk/group/streamhub-comet-server-community" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Google Group</a><span style="background-color: white; font-size: 14px; line-height: 18px;">, there's a good bunch of tutorials on the net and there's a </span><a href="http://code.google.com/p/gwt-comet-streamhub/" style="background-color: white; border: 0px; color: #4a6b82; cursor: pointer; font-size: 14px; line-height: 18px; margin: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">GWT Comet adapter</a><span style="background-color: white; font-size: 14px; line-height: 18px;"> too.</span></span></blockquote>
<h4>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">A couple of frameworks that implement server pushing:</span></h4>
<div>
<ul>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="http://directwebremoting.org/" target="_blank">Direct Web Remoting (DWR)</a>: a Java lib that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="http://ape-project.org/" target="_blank">Ajax Push Engine (APE)</a>: an opensource project that features a Comet server that implements the POST and GET methods of the HTTP protocol used only for AJAX Push. It also comes with a JavaScript Framework (JSF) that receives information sent by the server, handles the data, and sends back the users commands.</span></li>
</ul>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-55486816359705838742014-02-18T10:46:00.005-05:002014-03-31T14:52:50.135-04:00Say Hello to Learning Interface DesignA post by Dorian Peters @ <a href="http://uxmag.com/articles/say-hello-to-learning-interface-design">http://uxmag.com/articles/say-hello-to-learning-interface-design</a><br />
<br />
<div class="block block-system block-main block-system-main odd block-without-title" id="block-system-main" style="background-color: #f8f8f8; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(218, 218, 218) !important; color: #1e1e1e; font-family: HelveticaNeue, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; line-height: 19px; margin: 0px 0px 10px; outline: 0px; padding: 6px; vertical-align: baseline;">
<div class="block-inner clearfix" style="background-color: rgb(255, 255, 255) !important; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 10px; vertical-align: baseline;">
<div class="block-inner-content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="content clearfix" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div about="/articles/say-hello-to-learning-interface-design" class="node node-article clearfix" id="node-article-31980" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;" typeof="sioc:Item foaf:Document">
<div class="content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div itemscope="" itemtype="http://schema.org/Article" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="meta" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span itemprop="name" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span><br />
<h1 class="node-title" datatype="" property="dc:title" style="border: 0px; font-family: 'Archivo Narrow', sans-serif; font-size: 24px; font-style: inherit; font-variant: inherit; font-weight: normal; letter-spacing: 0px; line-height: 21px; margin: 0px 0px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span itemprop="name" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Say Hello to Learning Interface Design</span></h1>
<span itemprop="name" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</span><br />
<div class="submitted" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="authors" style="border: 0px; color: #cccccc; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span itemprop="author" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><span class="label-inline" style="border: 0px; float: left; font-family: inherit; font-size: inherit; font-style: italic; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px 4px 0px 0px; vertical-align: baseline;">by</span><a href="http://uxmag.com/user/81479" rel="author" style="border: 0px; color: #cc0000; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Dorian Peters</a></span></span></div>
<div class="submitted" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="authors" style="border: 0px; color: #cccccc; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div class="comment-info" style="border: 1px solid rgb(203, 203, 203); cursor: pointer; float: left; font-family: inherit; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; vertical-align: baseline;">
<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design#comments" style="border: 0px; color: #db583b; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; width: auto;"></a><br />
<div class="comment-label" style="border: 0px; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design#comments" style="border: 0px; color: #db583b; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; width: auto;">Comments(13)</a></div>
<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design#comments" style="border: 0px; color: #db583b; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; width: auto;">
</a></div>
<div class="print" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://uxmag.com/print/31980" style="border: 1px solid rgb(203, 203, 203); color: #db583b; cursor: pointer; float: left; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; text-decoration: none; vertical-align: baseline; width: auto;"></a><br />
<div class="print-label" style="background-attachment: scroll; background-color: rgba(0, 0, 0, 0); background-image: url(http://uxmag.com/sites/all/themes/uxjobs/images/print_icon.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px 0px 0px 20px; vertical-align: baseline;">
<a href="http://uxmag.com/print/31980" style="border: 1px solid rgb(203, 203, 203); color: #db583b; cursor: pointer; float: left; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; text-decoration: none; vertical-align: baseline; width: auto;">Print</a></div>
<a href="http://uxmag.com/print/31980" style="border: 1px solid rgb(203, 203, 203); color: #db583b; cursor: pointer; float: left; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; text-decoration: none; vertical-align: baseline; width: auto;">
</a></div>
<div class="share" style="border-bottom-color: rgb(204, 0, 0); border-bottom-style: solid; border-width: 0px 0px 3px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: -6px 0px 5px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="field-name-login-radius-top" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="lrcounter_simplebox" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
</div>
</div>
<div class="content clearfix" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="print-link" style="border: 0px; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px 0px 0.5em; text-align: right; vertical-align: baseline;"></span><br />
<div class="field field-name-field-article-image field-type-image field-label-hidden" style="border: 0px; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px 10px 20px 0px; vertical-align: baseline;">
<div class="field-items" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="field-item even" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
<img src="http://uxmag.com/sites/default/files/legacy/articleimage_29.jpg" height="207" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: bottom;" typeof="foaf:Image" width="300" /></div>
</div>
</div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="field-items" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="field-item even" property="content:encoded" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;">
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
"So what do you do?" asks the aging hipster in the faux retro tee. "Oh, me? I'm a Learning Interface Designer.” I pause a minute to test the sound of it tripping off the tongue… sounds sexy enough. This party introduction marks the final stage in the beta testing of an emergent concept: <em style="border: 0px; font-family: inherit; font-size: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">learning interface design</em>. Let’s take a moment to welcome the official debut of a brand new and desperately needed sub-discipline, which promises to see digital learning experiences come of age.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
From university webinars and "Mathletics" in schools, to corporate eLearning, to spelling apps, learning has gone very digital. Learning is no less ubiquitous than technology and everyone at multiple points in their lives (arguably multiple points during the day) is a learner. So it's time to stop pretending learners are the same as all other users and get better at the way we design for them.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
In order to go from user interface design to learning interface design, we need digital designers who have a sophisticated grasp of educational theory and educational psychology insofar as these can be applied to the design of interface and media elements.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Designers all over the world have been engaging in learning interface design (without calling it that) for projects such as employee training or educational technology, relying on tried-and-true design principles, instinct, experience, and the shared knowledge of interdisciplinary teams. Now it’s time to take it up a notch.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
We haven't yet put a name on this speciality and it’s not just a style issue. Naming the art is critical to building a body of shared knowledge, encouraging desperately needed user research in the area, and working towards best practice specific to the design of interfaces for learning.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
So why the fuss? Simple. The ways you employ graphics, sequence tasks, display information, use animation, provide controls for that animation, or combine narration with that animation can determine how well users will learn. If you've experienced bad online courses, you understand the pain of struggling against an obstructive interface when you're trying to learn something. On the other hand when people have a smooth, engaging, and enlightening learning experience via <a class="topics-tag" href="http://uxmag.com/topics/web" style="-webkit-appearance: none; background-color: #eeeeee; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 1px 5px; text-decoration: none; vertical-align: baseline;" target="_blank">the Web</a>, they may or may not notice how much the interface played a part.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
It goes beyond <a class="topics-tag" href="http://uxmag.com/topics/usability" style="-webkit-appearance: none; background-color: #eeeeee; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 1px 5px; text-decoration: none; vertical-align: baseline;" target="_blank">usability</a>. People have different requirements when they’re engaging in learning activities than they do when they’re buying something on a <a class="topics-tag" href="http://uxmag.com/topics/e-commerce" style="-webkit-appearance: none; background-color: #eeeeee; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 1px 5px; text-decoration: none; vertical-align: baseline;" target="_blank">shopping site</a> or information seeking on the Web. And this breaks down further: how users learn, and thus how an interface should support them, depends on their age, their level of content expertise, their previous experience, their conceptions of learning, and even potentially their learning styles. It’s a complex area and we need to start digging in.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
While it's well understood that good curriculum design is foremost, and we know a lot about learning from research in the field of education (and its newer interdisciplinary sibling, the learning sciences) it’s not yet on many people's radar how critical visual and multimedia design are to success. Despite the fact that there's plenty of evidence for its influence (<a href="http://www.amazon.com/gp/product/0136117570/ref=as_li_ss_tl?ie=UTF8&tag=uxma0e-20&linkCode=as2&camp=217145&creative=399369&creativeASIN=0136117570" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">see Richard Mayer's work</a> as a starting point), the front-end can still fall victim to old school prejudices that the visual design is mere decoration or not a serious contributor to the experience.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
That's where a new sub-discipline needs to zip in to save the day with a new wave of specialist designers. We need <em style="border: 0px; font-family: inherit; font-size: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">learning interface designers</em> (LIDs) to handle the recent investor craze for educational technologies. And we need LIDs for the plethora of online courses redefining universities, and for the multiplicity of learning objects, apps, multimedia materials, games, and training tools being unleashed on people of all ages in schools and outside of them.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
In just a few years we should see LIDs working with instructional designers, subject matter experts, specialists in usability for learning (e.g., see <a href="http://usablelearning.wordpress.com/" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Julie Dirksen's blog</a>), together with the usual band of Information architects, developers, etc., all working as part of a learning experience design team.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
But its not just formal education that seeks to benefit. Maturing our knowledge in learning interface design will inevitably improve UX design across the board. Because learning happens in small and informal ways every day and as part of other larger activities, what we learn about how to design for learning can inform our design of everything else. As an example, see <a href="http://www.alistapart.com/articles/the-ux-of-learning/" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">basic learning theory applied to the design of e-commerce sites</a> in the July issue of A List Apart.</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
With any luck, we’ll find a host of LIDs showcasing their work in design mags in the not too distant future. Until then, take note of what you learn today digitally, and ask yourself this question: did I learn something in spite of the way this was designed, or because of it? Could we be doing this even better?</div>
</div>
</div>
</div>
</div>
<div class="comment-info" style="border: 1px solid rgb(203, 203, 203); cursor: pointer; float: left; font-family: inherit; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; vertical-align: baseline;">
<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design#comments" style="border: 0px; color: #db583b; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; width: auto;"></a><br />
<div class="comment-label" style="border: 0px; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design#comments" style="border: 0px; color: #db583b; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; width: auto;">Comments(13)</a></div>
<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design#comments" style="border: 0px; color: #db583b; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; width: auto;">
</a></div>
<div class="print" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://uxmag.com/print/31980" style="border: 1px solid rgb(203, 203, 203); color: #db583b; cursor: pointer; float: left; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; text-decoration: none; vertical-align: baseline; width: auto;"></a><br />
<div class="print-label" style="background-attachment: scroll; background-color: rgba(0, 0, 0, 0); background-image: url(http://uxmag.com/sites/all/themes/uxjobs/images/print_icon.gif); background-position: 0% 100%; background-repeat: no-repeat no-repeat; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px 0px 0px 20px; vertical-align: baseline;">
<a href="http://uxmag.com/print/31980" style="border: 1px solid rgb(203, 203, 203); color: #db583b; cursor: pointer; float: left; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; text-decoration: none; vertical-align: baseline; width: auto;">Print</a></div>
<a href="http://uxmag.com/print/31980" style="border: 1px solid rgb(203, 203, 203); color: #db583b; cursor: pointer; float: left; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 5px 0px 0px; outline: 0px; padding: 0px 4px 1px; text-decoration: none; vertical-align: baseline; width: auto;">
</a></div>
<div class="share" style="border-bottom-color: rgb(204, 0, 0); border-bottom-style: solid; border-width: 0px 0px 3px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: -6px 0px 5px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="field-name-login-radius-top" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="lrcounter_simplebox" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block block-views block-about-the-author-block block-views-about-the-author-block even block-without-title" id="block-views-about-the-author-block" style="background-color: #f8f8f8; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgb(218, 218, 218) !important; color: #1e1e1e; font-family: HelveticaNeue, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; line-height: 19px; margin: 0px 0px 10px; outline: 0px; padding: 6px; vertical-align: baseline;">
<div class="block-inner clearfix" style="background-color: rgb(255, 255, 255) !important; border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 10px; vertical-align: baseline;">
<div class="block-inner-content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="content clearfix" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="view view-about-the-author view-id-about_the_author view-display-id-block view-dom-id-c1a26585dcb41c2563649c87f802afe0" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="view-header" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 10px; outline: 0px; padding: 0px; vertical-align: baseline;">
<h2 style="border: 0px; font-family: 'Archivo Narrow', sans-serif; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: normal; letter-spacing: 0px; line-height: 21px; margin: 0px 0px 5px; outline: 0px; padding: 0px; vertical-align: baseline;">
ABOUT THE AUTHOR(S)</h2>
</div>
<div class="view-content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-width: 0px 0px 1px; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 10px; outline: 0px; padding: 0px 0px 10px; vertical-align: baseline; width: 628px;">
<div class="views-field views-field-picture" style="border: 0px; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px 10px 0px 0px; vertical-align: baseline;">
<div class="field-content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="user-picture" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://uxmag.com/contributors/dorian-peters" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="View user profile."><img alt="User Profile" src="http://uxmag.com/sites/default/files/styles/150x150/public/pictures/picture-81479-1370854766.jpg?itok=Tc_GzsOg" height="150" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: bottom;" title="User Profile" typeof="foaf:Image" width="150" /></a></div>
</div>
</div>
<div class="views-field views-field-name" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<span class="field-content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a about="/contributors/dorian-peters" class="username" datatype="" href="http://uxmag.com/contributors/dorian-peters" property="foaf:name" style="border: 0px; color: #cc0000; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="View user profile." typeof="sioc:UserAccount" xml:lang="">Dorian Peters</a></span></div>
<div class="views-field views-field-field-uprofile-about-small" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div class="field-content" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
Dorian cultivates best practice in the design of digital spaces for learning & wellbeing. She currently directs online strategy for the Faculty of Education at the University of Sydney. She is also a member of <a href="http://sydney.edu.au/edsw/coco/" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">CoCo</a> (the Centre for Research on Computer Supported Learning & Cognition). You can find out more about her work at <a href="http://www.elearninginterfacedesign.com/" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">eLearningInterfaceDesign.com</a> and <a href="http://www.positivecomputing.org/" style="border: 0px; color: #006699; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">PositiveComputing.org</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-65871975261751524742014-02-18T10:44:00.000-05:002014-02-18T10:44:00.887-05:00UX for Learning: Design Guidelines for the Learner Experience<i>A post by Dorian Peters @ <a href="http://uxmatters.com/mt/archives/2012/07/ux-for-learning-design-guidelines-for-the-learner-experience.php">http://uxmatters.com/mt/archives/2012/07/ux-for-learning-design-guidelines-for-the-learner-experience.php</a></i><br />
<br />
<h1 style="font-family: Georgia, Georgia, serif; font-weight: normal; line-height: 1.2em; margin: 0px; max-width: 500px; padding: 0px 46px 0px 24px;">
UX for Learning: Design Guidelines for the Learner Experience</h1>
<div class="sharethis-float-right" style="clear: both; display: inline; float: right; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px; margin: 10px 0px 0px; padding: 0px 20px 0px 24px;">
<span class="st_twitter_large" displaytext="Tweet" style="margin: 0px; padding: 0px;"></span><span class="st_facebook_large" displaytext="Facebook" style="margin: 0px; padding: 0px;"></span><span class="st_linkedin_large" displaytext="LinkedIn" style="margin: 0px; padding: 0px;"></span><span class="st_delicious_large" displaytext="Delicious" style="margin: 0px; padding: 0px;"></span><span class="st_email_large" displaytext="Email" style="margin: 0px; padding: 0px;"></span><span class="st_sharethis_large" displaytext="ShareThis" style="margin: 0px; padding: 0px;"></span></div>
<div class="author" style="color: #00708e; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.95em; font-weight: bold; letter-spacing: 0.075em; line-height: 1.3em; margin-bottom: 3px; margin-top: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
By <a href="http://uxmatters.com/authors/archives/2012/07/dorian_peters.php" style="color: #514293; margin: 0px; padding: 3px 0px 6px; text-decoration: none; vertical-align: bottom;" title="Dorian Peters">Dorian Peters</a></div>
<div class="date" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.95em; line-height: 1.3em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Published: July 24, 2012</div>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“With educational applications for kids, corporate eLearning, and online degree programs, more and more UX designers face design briefs for creating digital experiences with an educational purpose.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
With educational applications for kids, corporate eLearning, and online degree programs, more and more UX designers face design briefs for creating digital experiences with an educational purpose. Other applications, whether they’re new or launching new features, often present micro-learning experiences that gently teach users how to use the software.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
But as UX designers, how much do we really know about how people learn? And does design really affect learning?</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Absolutely. Research shows that user interface and interaction design decisions significantly affect how well users learn. For a manifesto on that topic, see my article “<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design" style="color: #514293; margin: 0px; padding: 0px;" title="Say Hello to Learning Interface Design">Say Hello to Learning Interface Design</a>.”<a href="http://uxmag.com/articles/say-hello-to-learning-interface-design" style="color: #514293; margin: 0px; padding: 0px;" title="Say Hello to Learning Interface Design"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a>Nevertheless, for the most part, we go into these projects armed with a wealth of UX knowledge about how people use technology, but without any sound knowledge about how people learn.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
In this article, I’ll begin to fill that gap by presenting some design guidelines that derive from key findings from relevant psychology and education research on learning with technology. These findings relate specifically to user interface and interaction design for digital learning experiences. I’ve drawn most of these guidelines from the pioneering work of educational psychologist Richard E. Mayer, whose discoveries form the foundation of much multimedia instruction today.</div>
<h2 style="color: #43318f; font-family: Georgia, Georgia, serif; font-size: 1.75em; font-weight: normal; line-height: 1.2em; margin: 18px 0px 12px; max-width: 500px; padding: 0px 46px 0px 24px;">
What Is Learning Experience Design (LXD)?</h2>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“A big part of LXD is designing a user interface in a way that supports and enhances the cognitive and affective processes that learning involves.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
In much of design, we aim to craft a user experience that meets business or communication goals. In learning experience design, the goal is to help someone learn something. It’s about improving learning outcomes and the quality of the learning experience. A big part of LXD is designing a user interface in a way that supports and enhances the cognitive and affective processes that learning involves.</div>
<h2 style="color: #43318f; font-family: Georgia, Georgia, serif; font-size: 1.75em; font-weight: normal; line-height: 1.2em; margin: 18px 0px 12px; max-width: 500px; padding: 0px 46px 0px 24px;">
A View of the Landscape: Examples of Digital Learning</h2>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Digital user interfaces for learning include digital environments, technologies, and tools. Specific examples include:</div>
<ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; list-style-type: none; margin: -2px 0px 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">learning objects</span>—These are self-contained experiences based on just one learning objective. Users can use them as needed or combine them for a more complete course. You’ll find a slew of these at <a href="http://econtent.thelearningfederation.edu.au/ec/p/home" style="color: #514293; margin: 0px; padding: 0px;" title="http://econtent.thelearningfederation.edu.au/ec/p/home">The Learning Federation</a>.<a href="http://econtent.thelearningfederation.edu.au/ec/p/home" style="color: #514293; margin: 0px; padding: 0px;" title="http://econtent.thelearningfederation.edu.au/ec/p/home"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a></li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">educational games and simulations</span>—Computer games designed around educational goals—like Global Conflicts and the NASA game<a href="http://www.nasa.gov/offices/education/programs/national/ltp/games/moonbasealpha" style="color: #514293; margin: 0px; padding: 0px;" title="http://www.nasa.gov/offices/education/programs/national/ltp/games/moonbasealpha">Moonbase Alpha</a><a href="http://www.nasa.gov/offices/education/programs/national/ltp/games/moonbasealpha" style="color: #514293; margin: 0px; padding: 0px;" title="http://www.nasa.gov/offices/education/programs/national/ltp/games/moonbasealpha"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a>—are called <em style="margin: 0px; padding: 0px;">serious games</em>.</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Learning Management Systems (LMS)</span>—These large software systems manage tens or even thousands of courses and students. They provide tools for course portals, assessment, and synchronous and asynchronous interactions. Examples include Blackboard, Coursera, shown in Figure 1, and the open-source LMS <a href="http://moodle.org/" style="color: #514293; margin: 0px; padding: 0px;" title="http://moodle.org/">Moodle</a>.<a href="http://moodle.org/" style="color: #514293; margin: 0px; padding: 0px;" title="http://moodle.org/"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a></li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><strong class="run-in-head" style="color: #43318f; margin: 0px; padding: 0px;">synchronous collaborative learning spaces</strong>—Virtual spaces in which learners get together in real time. These might include video, chat, shared whiteboards, note taking, and wikis. Two examples are Adobe Connect, shown in Figure 2, and KnowledgeForum.</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Intelligent Tutoring Systems (ITS)</span>—These computer systems provide customized feedback to students without human intervention—for example, <a href="http://en.wikipedia.org/wiki/AutoTutor" style="color: #514293; margin: 0px; padding: 0px;" title="AutoTutor">AutoTutor</a>,<a href="http://en.wikipedia.org/wiki/AutoTutor" style="color: #514293; margin: 0px; padding: 0px;" title="AutoTutor"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a> shown in Figure 3, and <a href="http://deeptutor.memphis.edu/" style="color: #514293; margin: 0px; padding: 0px;" title="DeepTutor">DeepTutor</a>.<a href="http://deeptutor.memphis.edu/" style="color: #514293; margin: 0px; padding: 0px;" title="DeepTutor"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a></li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">corporate eLearning courseware</span>—Companies deliver courses via digital technology to teach their employees workplace skills like how to use software or soft skills such as customer service or sales strategy. Examples include Savv-e, shown in Figure 4, and ClearlyTrained.</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">3D Virtual Learning Environments (VLEs)</span>—Purpose-built, 3D worlds like JumpStart and Virtual Singapora, shown in Figure 5, structure learning. Learning of all types of subjects—from math to drama—also takes place in off-the-shelf worlds like Second Life.</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">mobile learning applications</span>—There is a list of mobile learning applications for children at “<a href="http://www.smartappsforkids.com/" style="color: #514293; margin: 0px; padding: 0px;" title="http://www.smartappsforkids.com/">Smart Apps for Kids</a>.”<a href="http://www.smartappsforkids.com/" style="color: #514293; margin: 0px; padding: 0px;" title="http://www.smartappsforkids.com/"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a> Figure 5 shows an example, PBS Kids.</li>
</ul>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Figure 1</span>—Coursera</div>
<img alt="Coursera" class="figure-left" height="363" src="http://uxmatters.com/mt/archives/2012/07/images/Coursera.jpg" style="border: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px; margin: 0px 26px 14px 24px; padding: 0px;" width="474" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px;"></span><br />
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Figure 2</span>—Adobe Connect</div>
<img alt="Adobe Connect" class="figure-left" height="363" src="http://uxmatters.com/mt/archives/2012/07/images/AdobeConnect.jpg" style="border: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px; margin: 0px 26px 14px 24px; padding: 0px;" width="474" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px;"></span><br />
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Figure 3</span>—AutoTutor</div>
<img alt="AutoTutor" class="figure-left" height="363" src="http://uxmatters.com/mt/archives/2012/07/images/AutoTutor.jpg" style="border: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px; margin: 0px 26px 14px 24px; padding: 0px;" width="474" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px;"></span><br />
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Figure 4</span>—Savv-e</div>
<img alt="Savv-e" class="figure-left" height="235" src="http://uxmatters.com/mt/archives/2012/07/images/Savv-e_courseware.jpg" style="border: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px; margin: 0px 26px 14px 24px; padding: 0px;" width="474" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px;"></span><br />
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Figure 5</span>—Virtual Singapora</div>
<img alt="Virtual Singapora" class="figure-left" height="363" src="http://uxmatters.com/mt/archives/2012/07/images/VirtualSingapura.jpg" style="border: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px; margin: 0px 26px 14px 24px; padding: 0px;" width="474" /><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17.90625px;"></span><br />
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Figure 6</span>—PBS Kids mobile learning applications</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<img alt="PBS Kids mobile learning applications" height="363" src="http://uxmatters.com/mt/archives/2012/07/images/PBS_mobile.jpg" style="border: none; margin: 0px; padding: 0px;" width="474" /></div>
<h2 style="color: #43318f; font-family: Georgia, Georgia, serif; font-size: 1.75em; font-weight: normal; line-height: 1.2em; margin: 18px 0px 12px; max-width: 500px; padding: 0px 46px 0px 24px;">
Guidelines for the Design of Learning Interfaces</h2>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“Extraneous visuals are especially problematic in regard to learning. … Extraneous imagery adds to cognitive load.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Here is a summary of guidelines that relate specifically to user interface design from the larger set of findings by <span class="sub-p" style="margin: 0px; padding: 0px; text-indent: 21px;">Richard E. </span>Mayer.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
1. The multimedia principle: People learn better from a combination of text and visuals rather than text alone.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
This is not exactly breaking news for visual designers, but it’s important to know that the inclusion of visuals is not just nice; it improves learning. Visuals might include illustrations, photos, infographics, diagrams, or comparative charts, as well as videos or animations. Text refers to both written text and audio. Having said this, I must note that it’s necessary to design combinations of text and visuals properly to yield learning advantages.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
2. Graphics should be relevant, not merely decorative.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Extraneous visuals are especially problematic in regard to learning. While it might be tempting to load up a lesson on global warming with various photos of natural wonders to enhance its visual appeal, extraneous imagery adds to cognitive load. Whatever portion of users’ brain power goes into processing these photos is unavailable for learning. This doesn’t mean a user interface can’t be beautiful. But find ways of guiding visual focus to what matters and lean toward minimalism when in doubt.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Mayer’s findings refer not to graphic user interface (GUI) design, but to graphics that serve as an adjunct to text—such as images that accompany the text of a lesson. In this case, steer away from decorative or representational graphics—for example, generic stock photos—and instead focus on providing explanatory graphics that help the learner process and interpret information, including:</div>
<ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; list-style-type: none; margin: -2px 0px 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">relational graphics</span>—like comparative graphs or interactive systems models</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">graphic organizers</span>—which structure the concepts a lesson’s text discusses</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">transitional graphics</span>—which show change over time</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">graphics showing things that would otherwise be invisible</span>—for example, an atomic structure, greenhouse gas flow, or the global movement of money</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">graphics that help place learning in context</span>—for example, a GUI metaphor or virtual world</li>
</ul>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
3. Use animations to teach physical procedures and still images to teach processes.</h3>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“People learn physical procedures … better by watching videos or animations. In contrast, they learn conceptual processes … better when they are illustrated by a series of static images.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
People learn physical procedures—such as how to fold origami, assemble a piece of furniture, or tie a square knot—better by watching videos or animations. In contrast, they learn conceptual processes—for example, how rain forms—better when they are illustrated by a series of static images. Apparently, this is because, from early in human evolution, we’ve been hardwired to learn motor skills by observation. The understanding of complex processes, however, is not quite so primal. In this case, an animation does too much of the work for us and removes pacing out of our control, so we become passive viewers. In contrast, a series of static images requires us to make logical connections between them, which helps us to learn, and we can do this at our own pace.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
4. To promote understanding, simplify visuals or make them abstract.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
People learn processes and principles better from simplified visuals. For example, simple line drawings that illustrate a process such as cellular mitosis are generally better than a series of photos showing the real thing in microscopic imagery. A computer animation that omits extraneous background detail is simpler than a video that shows everything. However, there are likely to be some exceptions—for example, advanced practice—that call for highly realistic simulations such as in aircraft simulators.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
5. Don’t separate related text and visuals.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
In line with the basic design principle of proximity, learning research has shown that people learn better when text relating to an image appears near that image. As obvious as it sounds, designers often violate this guideline. For example, rather than adding a list of labels to a diagram’s caption, create callouts, drawing lines to various parts of the diagram and labeling those parts directly; and rather than providing feedback for an incorrect answer at the bottom of a screen, include it beside the learner’s answer.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Also, include an explanation in the form of a narration whenever possible. If you can’t use narration, provide text for learners to read<em style="margin: 0px; padding: 0px;">before</em> playing a video. While you can present these on the same screen, avoid having text appear on a screen at the same time a video or animation is running. That would be too much visual information for learners to take in at once.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
6. Use virtual agents to deliver instructional content.</h3>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“People learn better when they perceive social presence.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Research shows that people learn better when they perceive social presence. For this reason, using a conversational tone in first or second person increases learning. We are hardwired to pay more active attention when we’re dealing with human beings rather than machines. This is probably why virtual coaches, tutors, characters, or avatars help people learn. Keep in mind that you should use agents for instruction, <em style="margin: 0px; padding: 0px;">not</em>entertainment. Agents are good for providing hints, explanations, and demonstrations, but you need to use them sparingly to prevent their becoming irritating.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Interestingly, realistic characters are <em style="margin: 0px; padding: 0px;">not</em> more effective instructors than cartoon characters. In fact, an agent does not even need to be visible, as long as learners hear a voice. Also, a voice should be a human voice rather than a machine voice. So don’t blow your budget on a 3D animated avatar with a robotic voice. A simple illustration with a human-voice narration—regardless of whether that human is visible—is enough for learning gains. As a final note, while having a realistic human <em style="margin: 0px; padding: 0px;">appearance</em>is not necessary, learners do benefit from agents who exhibit realistic human <em style="margin: 0px; padding: 0px;">behavior</em> such as human-like eye gaze and gesturing.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
7. Break complex information into chunks and provide pre-training.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Two basic ways of managing complex information are either to break it into segments, or <em style="margin: 0px; padding: 0px;">chunks</em>, or to extract difficult terms or key concepts and deal with those first, which is called <em style="margin: 0px; padding: 0px;">pre-training</em>. <em style="margin: 0px; padding: 0px;">Segmenting</em> means breaking content into parts that deal with just one, two, or three steps or concepts at a time.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Lynda.com provides a wonderful library of training courses on everything that relates to the Web. If you haven’t already seen the site, it’s well worth a visit. Their instructional approach is to provide high-quality videos of best practices or software training. This works well because video is a good medium for demonstrating procedures. They manage complexity, and give users control over the pacing, by breaking each course up into bite-sized concept chunks. This also means people can select and review just the bits they need when they need them.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
8. Avoid irrelevant video, audio, stories, and text.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Research shows that adding sidebar stories for the sake of interest hurts learning. It may seem sensible to spice up a lesson on the physics of lightning with a sidebar on the world-record holder for the most lightning hits. However, research has proven that this is <em style="margin: 0px; padding: 0px;">not</em> a good idea. The message here is to focus on what is inherently interesting about the content rather than adding extraneous detail—especially if specific learning goals are at stake. Along these lines, adding music or audio to learning experiences for ambiance impairs learning.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
9. Set learning in a real-world context to facilitate knowledge transfer.</h3>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“The closer a learning experience is to a real-world context, the more likely learners will be able to transfer what they’ve learned to the real world.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
The closer a learning experience is to a real-world context, the more likely learners will be able to transfer what they’ve learned to the real world. One criticism of video games for learning stems from their low transfer rates—skills people learn in the game world don’t transfer to the real world. One company thought a corporate orientation game set in a sci-fi world would have greater appeal. However, in reality, it had little uptake because learners couldn’t see its relevance. Moreover, learners would be unlikely to transfer concepts they learned in such an environment back to the real world, because there would be no contextual cues embedded in the learning.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
If people need to adapt the skills they’re learning to multiple environments and diverse circumstances, include examples set in more than one context. When you expose learners to multiple contexts, they are better able to extract essential principles and transfer them to various real-world scenarios.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
10. Provide informative feedback.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Avoid providing feedback that sounds personal or draws attention to the self instead of the task—for example, “good job” or “you got that wrong.” Also, avoid giving feedback that is uninformative like “correct” or “incorrect.” While an instructional designer writes the feedback, as a user interface designer, you need to design space in the interface for rich forms of feedback, remembering to place answers near the questions to which they refer.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
11. Choose your tools based on learning activities.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Different types of tools are most effective for different types of learning activities. For example, asynchronous communication tools that allow interaction over time—such as discussion forums—are well suited to learning experiences that require reflection or independent research. Synchronous tools like chat or live online classroom sessions are well suited to experiences that benefit from group synergy and social presence.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
12. Know when to give learners control.</h3>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“Allow learners to control their pace through a learning experience. Give them video and animation controls, let them review previous content, and allow them to exit at any time.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Allow learners to control their pace through a learning experience. Give them video and animation controls, let them review previous content, and allow them to exit at any time. However, you should be more careful about giving learners control of the sequence of instruction.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Research shows that novices are not able to effectively design their own path through non-linear content or decide how much practice they require. This impacts how you design both navigation and information architecture. You should allow learners choices regarding what topics to read or activities to do <em style="margin: 0px; padding: 0px;">only</em> if they have prior knowledge, in advanced courses, when chunks of content are <em style="margin: 0px; padding: 0px;">not</em> interdependent, or when designing a learning experience to be supportive and informational rather than for skill building. Along these lines, research shows that unguided exploratory learning is not effective for achieving specific learning outcomes.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
13. Design learning games and simulations in strict alignment with learning goals.</h3>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
The recent trend in gamification has led to the assumption that adding badges, rewards, and scoreboards to just about anything makes it a game. The main point to take away from games and learning is the notion of extrinsic versus intrinsic motivation. While it’s tempting to think that adding game rewards and goals would increase learners’ motivation and thus help them to learn better, you have to ask what is motivation about? Are people more motivated by learning a topic or by collecting points?</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
In fact, research has shown that learning does <em style="margin: 0px; padding: 0px;">not</em> improve when a learner’s focus is on game goals rather than learning goals. You could have learners practice and teach them facts by placing them in a virtual Jeopardy-style game show, but this would decontextualize the knowledge making it unlikely to transfer. Effective learning games retain contextual cues, align game goals with learning goals, and drive interest with intrinsic motivation. More on that later.</div>
<h3 style="font-family: Georgia, Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1.2em; margin: 14px 0px 8px; max-width: 500px; padding: 0px 46px 0px 24px;">
14. Be aware of the expertise reversal effect.</h3>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“Experts are more flexible and can learn just as well from text alone as they can from a combination of text and visuals.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
A major caveat to everything I’ve said so far is that the rules break down when it comes to experts. This is known in the research world as the<em style="margin: 0px; padding: 0px;">expertise reversal effect.</em> In essence, all of the guidelines I’ve provided are especially important for novices. If you’re teaching biology or management skills to non-experts, everything applies. However, if you’re teaching advanced concepts in biology to a doctor or management strategy to a CEO, these rules may not apply. Such design decisions usually make less impact on such people. Experts are more flexible and can learn just as well from text alone as they can from a combination of text and visuals. Experts don’t need information to be chunked, and they can handle having more control over their instruction.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
In general, following design guidelines that benefit non-experts won’t negatively impact experts. However, in a few cases, the rules for designing for novices do actually decrease learning outcomes for experts. Therefore, if you’re designing for an audience of experts, it’s worth reading more about their unique requirements—first, in Clark and Mayer’s book; second, by looking up the research on the expertise reversal effect.</div>
<h2 style="color: #43318f; font-family: Georgia, Georgia, serif; font-size: 1.75em; font-weight: normal; line-height: 1.2em; margin: 18px 0px 12px; max-width: 500px; padding: 0px 46px 0px 24px;">
Unleash Intrinsic Motivation</h2>
<div class="pullquote-wide" style="background-color: #f0f1ff; background-image: url(http://uxmatters.com/images/pullquote-bg.gif); background-position: 0% 0%; background-repeat: repeat no-repeat; border: 1px solid rgb(140, 130, 221); clear: both; display: inline; float: right; font-family: Georgia, Georgia, serif; font-size: 1.2em; font-style: italic; line-height: 1.4em; margin: 3px 25px 15px 18px; padding: 12px; width: 215px;">
“Motivation is key in learning.”</div>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
Motivation is key in learning. Therefore, when considering approaches to digital learning, it’s worth giving motivation some extra attention. In addition to the points I made earlier about the pitfalls of gamification and the limits of extrinsic motivation, I want to focus now on how UX professionals can become more creative about uncovering intrinsic motivation.</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
Too often, intrinsic motivation gets skimmed over in digital learning design, but UX professionals are just the right people to tackle this. It takes empathy, ideation, and a knack for storytelling. One prevalent example is kids and literacy. The market abounds with drill and practice software for spelling and phonics. But imposing extrinsic motivation in the form of points, competition, and speed rounds has obvious limitations. Can’t we do better?</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
We need to ask ourselves the question: what is inherently motivating about reading and writing? The answer? There are many motivations: storytelling, engagement with characters, self-expression. Kids get wildly excited by <em style="margin: 0px; padding: 0px;">Harry Potter.</em> They use social media to tell the stories of their own lives. How can we tap into this kind of motivation, which is so much more powerful than badges and scores, to help teach literacy skills? Might we place spelling words in stores instead of random sentences? Could we ask students to write a letter to Hogwarts rather than just fill in a template? Could we design collaborative, global story-writing activities so all children, even lower-ability writers, could be part of something special? Could we ask famous writers to contribute?</div>
<div class="sub-p" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px; text-indent: 21px;">
The point is, while the onus of activity design rests with teachers and instructional designers, there may be times when UX designers have an opportunity to contribute to effective learning. In these cases, challenge your team to go beyond extrinsic motivation and tap into the heart of intrinsic motivation—what intrinsically makes your topic exciting.</div>
<h2 style="color: #43318f; font-family: Georgia, Georgia, serif; font-size: 1.75em; font-weight: normal; line-height: 1.2em; margin: 18px 0px 12px; max-width: 500px; padding: 0px 46px 0px 24px;">
Going Deeper</h2>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
As I’m sure you’ve guessed, there is a lot more to designing for learning than what I’ve presented here. The trouble is, much of what is known is buried in academic research. If designing for learning is a significant part of your job, here’s where to turn next to enrich your credentials:</div>
<ul style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; list-style-type: none; margin: -2px 0px 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Read the book.</span> For a complete list of principles, examples, and in-depth explanations of the psychology behind them, read Mayer and Clark’s book <em style="margin: 0px; padding: 0px;">E-learning and the Science of Instruction</em>.</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Follow my blog.</span> I have been posting information on LXD on my blog,<em style="margin: 0px; padding: 0px;"><a href="http://www.learninginterfacedesign.com/" style="color: #514293; margin: 0px; padding: 0px;" title="Learning Interface Design">Learning Interface Design</a>,</em><a href="http://www.learninginterfacedesign.com/" style="color: #514293; margin: 0px; padding: 0px;" title="Learning Interface Design"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a> regularly since 2005.</li>
<li style="background-image: url(http://uxmatters.com/images/bullet-spacer-purple_main.gif); background-position: 0px -0.125em; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 2px 0px; padding: 0px 0px 0px 1.75em;"><span class="run-in-head" style="color: #43318f; font-weight: bold; margin: 0px; padding: 0px;">Read the research.</span> Keep up with new publications on this research topic by following or joining the <em style="margin: 0px; padding: 0px;">Learning Interface Design</em> research-sharing community on <a href="http://www.mendeley.com/groups/778381/educational-multimedia-design-learning-interface-design/" style="color: #514293; margin: 0px; padding: 0px;" title="Mendeley">Mendeley</a>.<a href="http://www.mendeley.com/groups/778381/educational-multimedia-design-learning-interface-design/" style="color: #514293; margin: 0px; padding: 0px;" title="Mendeley"><img class="icon-right" height="12" src="http://uxmatters.com/images/new-window-arrow.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 3px; vertical-align: top; visibility: visible;" width="14" /></a></li>
</ul>
<h2 style="color: #43318f; font-family: Georgia, Georgia, serif; font-size: 1.75em; font-weight: normal; line-height: 1.2em; margin: 18px 0px 12px; max-width: 500px; padding: 0px 46px 0px 24px;">
In Conclusion</h2>
<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 0px 24px;">
These guidelines provide a solid start to informing our practice of the design of learning experiences. As digital learning continues to enrich and, in some cases, even displace traditional learning strategies, I anticipate that a rigorous field of research and best practices that focus specifically on the design of user interfaces and experiences for learning will begin to develop.<a href="http://uxmatters.com/mt/archives/2012/07/ux-for-learning-design-guidelines-for-the-learner-experience.php#top" style="color: #514293; margin: 0px; padding: 0px;" title="Top"><img class="bug" height="18" src="http://uxmatters.com/images/ux-bug.gif" style="border: none; line-height: 13px; margin: 0px; padding: 1px 0px 1px 2px; vertical-align: top;" width="18" /></a></div>
<div class="topic-links" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.85em; line-height: 1.4em; margin-bottom: 10px; max-width: 500px; padding: 0px 26px 8px 24px;">
<span class="run-in_head" style="margin: 0px; padding: 0px;">Topic:</span> <a href="http://uxmatters.com/topics/ux-design/" style="color: #514293; margin: 0px; padding: 0px;">UX Design</a></div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-7001132423141567472014-02-14T11:09:00.000-05:002014-02-14T11:09:02.646-05:00Solved by Flexbox<i>A post by Philip Walton @ <a href="http://philipwalton.github.io/solved-by-flexbox/">http://philipwalton.github.io/solved-by-flexbox/</a></i><br />
<br />
<header class="Header" role="banner" style="background-color: rgba(147, 128, 108, 0.0980392); box-sizing: border-box; color: #404040; font-family: proxima-nova, sans-serif; font-size: 16px; line-height: 21px; padding: 3em 1.5em; text-align: center;"><div class="Header-titles" style="box-sizing: border-box;">
<h1 class="Header-title" style="-webkit-font-kerning: normal; box-sizing: border-box; font-size: 4em; line-height: 1; margin: 0px 0px 0.15em; word-spacing: 0.08em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/" style="background-position: 0px 0px; border: 0px; box-sizing: border-box; font-weight: inherit; text-decoration: none;">Solved <i style="box-sizing: border-box; font-family: serif; font-weight: 400; letter-spacing: -0.03em;">by</i> Flexbox</a></h1>
<h2 class="Header-subTitle" style="-webkit-font-kerning: normal; box-sizing: border-box; font-size: 1.1em; font-weight: 300; line-height: normal; margin: 1em 0px 1.75em; white-space: nowrap;">
Cleaner, hack-free CSS</h2>
</div>
<div class="Header-actions" style="-webkit-box-align: center; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-box-pack: center; align-items: center; box-sizing: border-box; display: flex; flex-direction: row; font-size: 1.1em; justify-content: center;">
<a class="Header-button Button Button--action Button--wide" href="https://github.com/philipwalton/solved-by-flexbox" style="-webkit-transition: background-color 0.2s; background-color: #46b980; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-size: 0.8125em; line-height: normal; margin: 0px 1em 0px 0px; padding: 0.6em 1.5em; text-decoration: none; transition: background-color 0.2s; white-space: nowrap;" target="_blank"><span class="icon-github icon-large" style="-webkit-font-smoothing: antialiased; background-image: none; background-position: 0% 0%; background-repeat: repeat repeat; box-sizing: border-box; display: inline; font-family: FontAwesome; height: auto; margin-top: 0px; text-decoration: inherit; vertical-align: baseline; width: auto;"></span> View Project Source</a><a class="Header-button Button Button--wide" href="http://twitter.com/intent/tweet?text=A%20showcase%20of%20traditionally%20hard%20CSS%20problems,%20easily%20solved%20using%20flexbox.&url=http://philipwalton.github.com/solved-by-flexbox/&via=philwalton" style="-webkit-transition: background-color 0.2s; background-color: rgba(147, 128, 108, 0.14902); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 0.8125em; line-height: normal; padding: 0.6em 1.5em; text-decoration: none; transition: background-color 0.2s; white-space: nowrap;" target="_blank"> Spread the Word</a></div>
</header><main class="Site-content" style="-webkit-box-flex: 1; box-sizing: border-box; color: #404040; flex: 1 1 0px; font-family: proxima-nova, sans-serif; font-size: 16px; line-height: 21px; padding: 2em 1.5em 1.5em;"><section class="Section Container" style="box-sizing: border-box; margin: 0px auto 2em; max-width: 50rem;"><h2 class="PromoHeading" style="-webkit-font-kerning: normal; box-sizing: border-box; font-family: ff-tisa-web-pro, serif; font-size: 1.6em; font-weight: normal; line-height: normal; margin: 0px 0px 0.8em; text-align: center;">
Introduction</h2>
<div style="box-sizing: border-box; margin-bottom: 1em;">
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.</div>
<div style="box-sizing: border-box; margin-bottom: 1em;">
Finally, thanks to <a href="http://www.w3.org/TR/css3-flexbox/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">Flexbox</a>, we have a solution.</div>
<div style="box-sizing: border-box; margin-bottom: 1em;">
This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.</div>
<div style="box-sizing: border-box; margin-bottom: 1em;">
Check out the demos below. View the styles in the Web inspector or dive into <a href="https://github.com/philipwalton/solved-by-flexbox" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">the source</a> to see just how easy CSS layout will become once Flexbox becomes mainstream.</div>
</section><section class="Section Section--striped" style="background-color: rgba(147, 128, 108, 0.0980392); box-sizing: border-box; margin: 1.5em -1.5em; padding: 1.5em 1.5em 0px;"><div class="Container" style="box-sizing: border-box; margin: 0px auto; max-width: 50rem;">
<h2 class="PromoHeading" style="-webkit-font-kerning: normal; box-sizing: border-box; font-family: ff-tisa-web-pro, serif; font-size: 1.6em; font-weight: normal; line-height: normal; margin: 0px 0px 0.8em; text-align: center;">
Showcase</h2>
<ul class="Grid Grid--guttersLarge Grid--ffMultilineSupport large-Grid--gutters2x" style="box-sizing: border-box; display: flex; flex-wrap: wrap; list-style: none; margin: 0px 0px 0px -2em; padding: 0px;">
<li class="Grid-cell u-full u-med-1of2 u-large-1of3" style="-webkit-box-flex: 1; box-sizing: border-box; flex: 1 1 0px; padding-left: 2em; width: 277.328125px;"><div class="Feature" style="box-sizing: border-box; margin-bottom: 2em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/grids/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"></a><br />
<figure class="Feature-figure" style="-webkit-transition: border-color 0.2s; border: 1px solid rgb(217, 217, 217); box-sizing: border-box; margin: 0px 0px 0.75em; transition: border-color 0.2s;"><a href="http://philipwalton.github.io/solved-by-flexbox/demos/grids/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"><img alt="Better, Simpler Grids" class="Feature-image" src="http://philipwalton.github.io/solved-by-flexbox/images/grids.jpg" style="border: 5px solid rgb(255, 255, 255); box-sizing: border-box; display: block; height: auto; max-width: 100%;" /></a></figure><h3 class="Feature-title" style="-webkit-transition: color 0.1s; box-sizing: border-box; color: #404040; font-size: 1.1em; margin: 0px 0px 0.5em; text-align: center; transition: color 0.1s;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/grids/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
Better, Simpler Grids</a></h3>
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/grids/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
</a><br />
<div class="Feature-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-left: 0.75em; margin-right: 0.75em;">
Flexbox gives us most of the features we want from a grid system out of the box. And sizing and alignment are just one or two properties away.</div>
</div>
</li>
<li class="Grid-cell u-full u-med-1of2 u-large-1of3" style="-webkit-box-flex: 1; box-sizing: border-box; flex: 1 1 0px; padding-left: 2em; width: 277.328125px;"><div class="Feature" style="box-sizing: border-box; margin-bottom: 2em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/media-object/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"></a><br />
<figure class="Feature-figure" style="-webkit-transition: border-color 0.2s; border: 1px solid rgb(217, 217, 217); box-sizing: border-box; margin: 0px 0px 0.75em; transition: border-color 0.2s;"><a href="http://philipwalton.github.io/solved-by-flexbox/demos/media-object/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"><img alt="Media Object" class="Feature-image" src="http://philipwalton.github.io/solved-by-flexbox/images/media-object.jpg" style="border: 5px solid rgb(255, 255, 255); box-sizing: border-box; display: block; height: auto; max-width: 100%;" /></a></figure><h3 class="Feature-title" style="-webkit-transition: color 0.1s; box-sizing: border-box; color: #404040; font-size: 1.1em; margin: 0px 0px 0.5em; text-align: center; transition: color 0.1s;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/media-object/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
The Media Object</a></h3>
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/media-object/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
</a><br />
<div class="Feature-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-left: 0.75em; margin-right: 0.75em;">
Create media objects with fixed or varying figure sizes without worrying about overflow, clearfixing, or block formatting context hacks.</div>
</div>
</li>
<li class="Grid-cell u-full u-med-1of2 u-large-1of3" style="-webkit-box-flex: 1; box-sizing: border-box; flex: 1 1 0px; padding-left: 2em; width: 277.328125px;"><div class="Feature" style="box-sizing: border-box; margin-bottom: 2em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"></a><br />
<figure class="Feature-figure" style="-webkit-transition: border-color 0.2s; border: 1px solid rgb(217, 217, 217); box-sizing: border-box; margin: 0px 0px 0.75em; transition: border-color 0.2s;"><a href="http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"><img alt="Input Add-ons" class="Feature-image" src="http://philipwalton.github.io/solved-by-flexbox/images/input-add-on.jpg" style="border: 5px solid rgb(255, 255, 255); box-sizing: border-box; display: block; height: auto; max-width: 100%;" /></a></figure><h3 class="Feature-title" style="-webkit-transition: color 0.1s; box-sizing: border-box; color: #404040; font-size: 1.1em; margin: 0px 0px 0.5em; text-align: center; transition: color 0.1s;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
Input Add-ons</a></h3>
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
</a><br />
<div class="Feature-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-left: 0.75em; margin-right: 0.75em;">
Creating full-width, fluid input/button pairs has been impossible for most of the history of CSS. With Flexbox it couldn't be easier.</div>
</div>
</li>
<li class="Grid-cell u-full u-med-1of2 u-large-1of3" style="-webkit-box-flex: 1; box-sizing: border-box; flex: 1 1 0px; padding-left: 2em; width: 277.328125px;"><div class="Feature" style="box-sizing: border-box; margin-bottom: 2em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"></a><br />
<figure class="Feature-figure" style="-webkit-transition: border-color 0.2s; border: 1px solid rgb(217, 217, 217); box-sizing: border-box; margin: 0px 0px 0.75em; transition: border-color 0.2s;"><a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"><img alt="Sticky Footer" class="Feature-image" src="http://philipwalton.github.io/solved-by-flexbox/images/sticky-footer.jpg" style="border: 5px solid rgb(255, 255, 255); box-sizing: border-box; display: block; height: auto; max-width: 100%;" /></a></figure><h3 class="Feature-title" style="-webkit-transition: color 0.1s; box-sizing: border-box; color: #404040; font-size: 1.1em; margin: 0px 0px 0.5em; text-align: center; transition: color 0.1s;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
Sticky Footer</a></h3>
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
</a><br />
<div class="Feature-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-left: 0.75em; margin-right: 0.75em;">
Getting your footer to stick to the bottom of sparsely contented pages has always been tricky. And if the footer's height is unknown, it's basically impossible. Not so anymore.</div>
</div>
</li>
<li class="Grid-cell u-full u-med-1of2 u-large-1of3" style="-webkit-box-flex: 1; box-sizing: border-box; flex: 1 1 0px; padding-left: 2em; width: 277.328125px;"><div class="Feature" style="box-sizing: border-box; margin-bottom: 2em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"></a><br />
<figure class="Feature-figure" style="-webkit-transition: border-color 0.2s; border: 1px solid rgb(217, 217, 217); box-sizing: border-box; margin: 0px 0px 0.75em; transition: border-color 0.2s;"><a href="http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"><img alt="Holy Grail Layout" class="Feature-image" src="http://philipwalton.github.io/solved-by-flexbox/images/holy-grail.jpg" style="border: 5px solid rgb(255, 255, 255); box-sizing: border-box; display: block; height: auto; max-width: 100%;" /></a></figure><h3 class="Feature-title" style="-webkit-transition: color 0.1s; box-sizing: border-box; color: #404040; font-size: 1.1em; margin: 0px 0px 0.5em; text-align: center; transition: color 0.1s;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
Holy Grail Layout</a></h3>
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
</a><br />
<div class="Feature-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-left: 0.75em; margin-right: 0.75em;">
This classic problem has been challenging CSS hackers for years, yet none of the historical solutions have fully solved it. With Flexbox, it's finally possible.</div>
</div>
</li>
<li class="Grid-cell u-full u-med-1of2 u-large-1of3" style="-webkit-box-flex: 1; box-sizing: border-box; flex: 1 1 0px; padding-left: 2em; width: 277.328125px;"><div class="Feature" style="box-sizing: border-box; margin-bottom: 2em;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"></a><br />
<figure class="Feature-figure" style="-webkit-transition: border-color 0.2s; border: 1px solid rgb(217, 217, 217); box-sizing: border-box; margin: 0px 0px 0.75em; transition: border-color 0.2s;"><a href="http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;"><img alt="Vertical Centering" class="Feature-image" src="http://philipwalton.github.io/solved-by-flexbox/images/vertical-centering.jpg" style="border: 5px solid rgb(255, 255, 255); box-sizing: border-box; display: block; height: auto; max-width: 100%;" /></a></figure><h3 class="Feature-title" style="-webkit-transition: color 0.1s; box-sizing: border-box; color: #404040; font-size: 1.1em; margin: 0px 0px 0.5em; text-align: center; transition: color 0.1s;">
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
Vertical Centering</a></h3>
<a href="http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;">
</a><br />
<div class="Feature-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-left: 0.75em; margin-right: 0.75em;">
A lack of proper vertical centering has been the butt of almost every CSS joke ever told. While it's technically always been mostly possible, it's never been very intuitive — until now.</div>
</div>
</li>
</ul>
</div>
</section><section class="Section Container" style="box-sizing: border-box; margin: 0px auto 2em; max-width: 50rem;"><h2 class="PromoHeading" style="-webkit-font-kerning: normal; box-sizing: border-box; font-family: ff-tisa-web-pro, serif; font-size: 1.6em; font-weight: normal; line-height: normal; margin: 0px 0px 0.8em; text-align: center;">
Browser Support</h2>
<ul class="BrowserMatrix" style="-webkit-box-pack: center; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0px; padding: 0px;">
<li class="BrowserMatrix-item" style="box-sizing: border-box; margin: 0.5em 1.5em; max-width: 10em; min-width: 4em; text-align: center;"><span class="BrowserLogo BrowserLogo--chrome" style="-webkit-background-size: auto 100%; background-image: url(http://philipwalton.github.io/solved-by-flexbox/images/browser-logos.jpg); background-position: 0px 0px; background-repeat: no-repeat no-repeat; background-size: auto 100%; box-sizing: border-box; display: inline-block; height: 64px; margin-bottom: 0.5em; width: 64px;"></span><div class="BrowserMatrix-title" style="box-sizing: border-box; font-size: 0.8em;">
Chrome</div>
<div class="BrowserMatrix-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-bottom: 0.5em; white-space: nowrap;">
21+</div>
</li>
<li class="BrowserMatrix-item" style="box-sizing: border-box; margin: 0.5em 1.5em; max-width: 10em; min-width: 4em; text-align: center;"><span class="BrowserLogo BrowserLogo--opera" style="-webkit-background-size: auto 100%; background-image: url(http://philipwalton.github.io/solved-by-flexbox/images/browser-logos.jpg); background-position: -64px 0px; background-repeat: no-repeat no-repeat; background-size: auto 100%; box-sizing: border-box; display: inline-block; height: 64px; margin-bottom: 0.5em; width: 64px;"></span><div class="BrowserMatrix-title" style="box-sizing: border-box; font-size: 0.8em;">
Opera</div>
<div class="BrowserMatrix-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-bottom: 0.5em; white-space: nowrap;">
12.1+</div>
</li>
<li class="BrowserMatrix-item" style="box-sizing: border-box; margin: 0.5em 1.5em; max-width: 10em; min-width: 4em; text-align: center;"><span class="BrowserLogo BrowserLogo--firefox" style="-webkit-background-size: auto 100%; background-image: url(http://philipwalton.github.io/solved-by-flexbox/images/browser-logos.jpg); background-position: -128px 0px; background-repeat: no-repeat no-repeat; background-size: auto 100%; box-sizing: border-box; display: inline-block; height: 64px; margin-bottom: 0.5em; width: 64px;"></span><div class="BrowserMatrix-title" style="box-sizing: border-box; font-size: 0.8em;">
Firefox</div>
<div class="BrowserMatrix-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-bottom: 0.5em; white-space: nowrap;">
22+</div>
</li>
<li class="BrowserMatrix-item" style="box-sizing: border-box; margin: 0.5em 1.5em; max-width: 10em; min-width: 4em; text-align: center;"><span class="BrowserLogo BrowserLogo--safari" style="-webkit-background-size: auto 100%; background-image: url(http://philipwalton.github.io/solved-by-flexbox/images/browser-logos.jpg); background-position: -192px 0px; background-repeat: no-repeat no-repeat; background-size: auto 100%; box-sizing: border-box; display: inline-block; height: 64px; margin-bottom: 0.5em; width: 64px;"></span><div class="BrowserMatrix-title" style="box-sizing: border-box; font-size: 0.8em;">
Safari</div>
<div class="BrowserMatrix-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-bottom: 0.5em; white-space: nowrap;">
6.1+</div>
</li>
<li class="BrowserMatrix-item" style="box-sizing: border-box; margin: 0.5em 1.5em; max-width: 10em; min-width: 4em; text-align: center;"><span class="BrowserLogo BrowserLogo--ie" style="-webkit-background-size: auto 100%; background-image: url(http://philipwalton.github.io/solved-by-flexbox/images/browser-logos.jpg); background-position: -256px 0px; background-repeat: no-repeat no-repeat; background-size: auto 100%; box-sizing: border-box; display: inline-block; height: 64px; margin-bottom: 0.5em; width: 64px;"></span><div class="BrowserMatrix-title" style="box-sizing: border-box; font-size: 0.8em;">
IE</div>
<div class="BrowserMatrix-description" style="box-sizing: border-box; color: grey; font-size: 0.8em; margin-bottom: 0.5em; white-space: nowrap;">
11+</div>
</li>
</ul>
<h3 class="PromoSubheading" style="box-sizing: border-box; font-size: 1.1em; margin: 0.6em 0px; text-align: center;">
Caveats and Known Issues</h3>
<ul class="List List--centered" style="box-sizing: border-box; list-style: square inside; margin: 0px 0px 1em; padding: 0px; text-align: center;">
<li style="box-sizing: border-box; margin-bottom: 0.2em;">IE 10 has Flexbox support but for a <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">draft version</a> of the current spec: (<code style="box-sizing: border-box; color: black; font-family: source-code-pro, monospace; font-size: 0.9em;">display:flexbox</code>).</li>
<li style="box-sizing: border-box; margin-bottom: 0.2em;">Safari 6 and earlier support the <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">original</a> Flexbox syntax, which is now obsolete: (<code style="box-sizing: border-box; color: black; font-family: source-code-pro, monospace; font-size: 0.9em;">display:box</code>).</li>
<li style="box-sizing: border-box; margin-bottom: 0.2em;">Firefox 27 and earlier do not support multi-line flexboxes. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=702508" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">this bug</a> for more details.</li>
<li style="box-sizing: border-box; margin-bottom: 0.2em;">For a full browser support comparison, check out <a href="http://caniuse.com/flexbox" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">caniuse.com/flexbox</a></li>
</ul>
</section><section class="Section Section--striped Section--last" style="background-color: rgba(147, 128, 108, 0.0980392); box-sizing: border-box; margin: 1.5em -1.5em -1.5em; overflow: hidden; padding: 1.5em 1.5em 1em;"><div class="Container" style="box-sizing: border-box; margin: 0px auto; max-width: 50rem;">
<h2 class="PromoHeading" style="-webkit-font-kerning: normal; box-sizing: border-box; font-family: ff-tisa-web-pro, serif; font-size: 1.6em; font-weight: normal; line-height: normal; margin: 0px 0px 0.8em; text-align: center;">
About the Code</h2>
<div style="box-sizing: border-box; margin-bottom: 1em;">
In addition to showcasing the power of Flexbox, this site also aims to be an example of modern CSS design and architectural practices. Namely modular, reusable style rules built on a predictable and testable naming convention.</div>
<div style="box-sizing: border-box; margin-bottom: 1em;">
All of the CSS code in these examples make use of the <a href="https://github.com/suitcss/suit" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">SUIT</a> naming conventions developed by <a href="http://nicolasgallagher.com/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">Nicolas Gallagher</a>and are based on OOCSS and BEM methodologies. Each example includes one or more reuseable CSS components allowing you to adapt or copy these patterns in to your own projects. Links are provided to their respective components on each example page.</div>
<div style="box-sizing: border-box; margin-bottom: 1em;">
This site also uses the excellent <a href="https://github.com/ai/autoprefixer" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">autoprefixer</a> library by <a href="http://sitnik.ru/" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">Andrey Sitnik</a>, which takes care of vendor prefixing the CSS, so you don't have to think about it.</div>
<div style="box-sizing: border-box; margin-bottom: 1em;">
If you find a mistake or would like to suggest an additional example, feel free to open an issue or submit a pull request on <a href="https://github.com/philipwalton/solved-by-flexbox" style="background-position: 0px 0px; background-repeat: initial initial; border-bottom-color: rgba(70, 185, 128, 0.498039); border-bottom-style: dashed; border-bottom-width: 1px; box-sizing: border-box; color: #46b980; text-decoration: none;" target="_blank">Github</a>.</div>
</div>
</section></main>Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-2218060996328764542014-02-14T11:01:00.001-05:002014-02-14T11:01:17.669-05:00Multiple Simultaneous Ajax Requests (with one callback) in jQuery<i>A post by Chris Coyier @ <a href="http://css-tricks.com/multiple-simultaneous-ajax-requests-one-callback-jquery/">http://css-tricks.com/multiple-simultaneous-ajax-requests-one-callback-jquery/</a></i><br />
<br />
<h1 style="box-sizing: border-box; color: #333333; font-family: 'Whitney Cond A', 'Whitney Cond B', ronnia-condensed, sans-serif; font-size: 48px; line-height: 1.1; margin: 0px; padding: 0px;">
Multiple Simultaneous Ajax Requests (with one callback) in jQuery</h1>
<div class="time" style="box-sizing: border-box; color: #d6d5d5; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; letter-spacing: 3px; line-height: 22px; margin-bottom: 20px; margin-top: 20px; text-transform: uppercase;">
PUBLISHED <time datetime="2014-02-13" style="box-sizing: border-box;">FEBRUARY 13, 2014 </time>BY CHRIS COYIER</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 20px; margin-bottom: 20px;">
Let's say there is a feature on your website that only gets used 5% of the time. That feature requires some HTML, CSS, and JavaScript to work. So you decide that instead of having that HTML, CSS, and JavaScript on the page directly, you're going to Ajax that stuff in when the feature is about to be used.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
We'll need to make three Ajax requests. Since we don't want to show anything to the user until the feature is ready to go (plus they all kinda rely on each other to work right) we need to wait for all three of them to be complete before proceeding.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
What's the best way to do that?</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
<span id="more-162826" style="box-sizing: border-box;"></span></div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
Ajax calls in jQuery provide callbacks:</div>
<pre class=" language-javascript" rel="jQuery" style="background-color: #1d1f21; box-sizing: border-box; color: white; font-family: Menlo, Monaco, monospace; font-size: 16px; line-height: 22px; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-javascript" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;">$<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>ajax<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
statusCode<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">:</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
url<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">:</span> <span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/feature"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span>
success<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">:</span> <span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Ajax success
</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span></code></pre>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
Or the "Deferred" way, this time using a shorthand <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px; box-sizing: border-box; font-size: 14px; margin: 0px 3px 0px 1px; padding: 2px 4px 1px; position: relative; top: -1px;">$.get()</code> method:</div>
<pre class=" language-javascript" rel="jQuery" style="background-color: #1d1f21; box-sizing: border-box; color: white; font-family: Menlo, Monaco, monospace; font-size: 16px; line-height: 22px; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-javascript" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;">$<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>get<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/feature/"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>done<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Ajax success
</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span></code></pre>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
But we have three Ajax requests we're needing to perform, and we want to wait for all three of them to finish before doing anything, so it could get pretty gnarly in callback land:</div>
<pre class=" language-javascript" rel="jQuery" style="background-color: #1d1f21; box-sizing: border-box; color: white; font-family: Menlo, Monaco, monospace; font-size: 16px; line-height: 22px; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-javascript" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;"><span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Get the HTML
</span>$<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>get<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/feature/"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;"> // Get the CSS
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>get<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/assets/feature.css"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>css<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;"> // Get the JavaScript
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>getScript<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/assets/feature.js"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;"> // All is ready now, so...
</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;"> // Add CSS to page
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"<style />"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>css<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>appendTo<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"head"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;"> // Add HTML to page
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"body"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>append<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span></code></pre>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
This successfully waits until everything is ready before adding anything to the page. So by the time the user sees anything, it's good to go. Perhaps that makes some of you feel nauseated, but I've done things that way before. At least it makes sense and works. <strong style="box-sizing: border-box;">The problem?</strong> It's slow.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
One request ... wait to be done ... another request ... wait to be done ... another request ... wait to be done ... go.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
It would be faster if we could do:</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
All three requests in parallel ... wait for all three to be done ... go.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
We can use a bit of Deferred / Promises action to help here. I'm sure this is some JavaScript 101 stuff to some of you but this kind of thing eluded me for a long time and more complex Promises stuff still does.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
In our simple use case, we can use jQuery's <code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px; box-sizing: border-box; font-size: 14px; margin: 0px 3px 0px 1px; padding: 2px 4px 1px; position: relative; top: -1px;">$.when()</code> method, which takes a list of these "Deferred" objects (All jQuery Ajax methods return Deferred objects) and then provides a single callback.</div>
<pre class=" language-javascript" rel="jQuery" style="background-color: #1d1f21; box-sizing: border-box; color: white; font-family: Menlo, Monaco, monospace; font-size: 16px; line-height: 22px; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-javascript" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;">$<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>when<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Deferred object (probably Ajax request),
</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Deferred object (probably Ajax request),
</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Deferred object (probably Ajax request)
</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>then<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// All have been resolved (or rejected), do your thing
</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span></code></pre>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
So our callback-hell can be rewritten like:</div>
<pre class=" language-javascript" rel="jQuery" style="background-color: #1d1f21; box-sizing: border-box; color: white; font-family: Menlo, Monaco, monospace; font-size: 16px; line-height: 22px; margin-bottom: 20px; overflow: auto; padding: 33px 0px 0px; position: relative; tab-size: 2; word-break: normal;"><code class=" language-javascript" style="background-image: none; box-sizing: border-box; display: block; font-family: Menlo, Monaco, monospace; overflow: auto; padding: 15px;">$<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>when<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Get the HTML
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>get<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/feature/"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
globalStore<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>html <span class="token operator" style="box-sizing: border-box; color: #a67f59;">=</span> html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Get the CSS
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>get<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/assets/feature.css"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span> <span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>css<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
globalStore<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>css <span class="token operator" style="box-sizing: border-box; color: #a67f59;">=</span> css<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">,</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Get the JS
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>getScript<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"/assets/feature.js"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>then<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token keyword" style="box-sizing: border-box; color: #8f9c6c;">function</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span> <span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">{</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// All is ready now, so...
</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Add CSS to page
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"<style />"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>globalStore<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>css<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>appendTo<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"head"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token comment" spellcheck="true" style="box-sizing: border-box; color: #777777;">// Add HTML to page
</span> $<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span><span class="token string" style="box-sizing: border-box; color: #8f9c6c;">"body"</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>append<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">(</span>globalStore<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">.</span>html<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span>
<span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #ab875d;">;</span></code></pre>
<h3 style="box-sizing: border-box; color: #333333; font-family: 'Whitney Cond A', 'Whitney Cond B', ronnia-condensed, sans-serif; font-size: 36px; line-height: 1.1; margin: 50px 0px 10px; padding: 0px;">
Another use case: mustard cutting</h3>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px; margin-bottom: 20px;">
My use-case example above is a 5% feature. Keep the page lighter for the 95% of users who don't use the feature, and have it be a relatively quick add-on for those that do.</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Whitney SSm A', 'Whitney SSm B', ff-meta-web-pro, sans-serif; font-size: 16px; line-height: 22px;">
Another situation might be a cut-the-mustard situation where you add in additional features or content to a page in certain situations, as you decide. Perhaps do a<code style="background-color: #eeeeee; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px; box-sizing: border-box; font-size: 14px; margin: 0px 3px 0px 1px; padding: 2px 4px 1px; position: relative; top: -1px;">matchMedia</code> test on some media queries and determine the device's screen and capabilities are such that you're going to include some extra modules. Cool, do it up with some parallel Ajax calls!</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-78102966687109844782014-02-06T14:23:00.001-05:002014-02-06T14:24:58.521-05:00Database Schema for Tagging System<br />
<a href="http://tagging.pui.ch/post/37027745720/tags-database-schemas" style="background-color: white; color: #c00906; font-family: Georgia, serif; font-size: 1.5em; line-height: 1; text-decoration: none;">Tags: Database schemas</a><br />
<div class="post" style="background-color: white; margin-bottom: 2.25em; padding-bottom: 2.25em; position: relative;">
<div class="text">
<div class="text-body">
<div style="margin-bottom: 1.5em;">
<i style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px;">A Post by </i><span style="color: #333333; font-family: Georgia, serif;"><span style="line-height: 24px;"><i>Philipp Keller </i></span></span><i style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px;">@<a href="http://tagging.pui.ch/post/37027745720/tags-database-schemas" style="font-family: 'Times New Roman'; font-size: medium; line-height: normal;">http://tagging.pui.ch/post/37027745720/tags-database-schemas</a></i></div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Recently, <a href="http://lists.del.icio.us/pipermail/discuss/2005-April/002827.html" style="color: #c00906; text-decoration: none;">on del.icio.us mailinglist</a>, I asked the question “Does anyone know the database schema of del.icio.us?”. I got a few private responses so I wanted to share the knowledge with the world.<br />
<br />
The Problem: You want to have a database schema where you can tag a bookmark (or a blog post or whatever) with as many <a href="http://en.wikipedia.org/wiki/Tags" style="color: #c00906; text-decoration: none;">tags</a> as you want. Later then, you want to run queries to constrain the bookmarks to a<a href="http://en.wikipedia.org/wiki/Union_%28set_theory%29" style="color: #c00906; text-decoration: none;">union</a> or <a href="http://en.wikipedia.org/wiki/Intersection_%28set_theory%29" style="color: #c00906; text-decoration: none;">intersection</a> of tags. You also want to exclude (say: minus) some tags from the search result.</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Apparently there are three different solutions (<strong>Attention: </strong>If you are building a websites that allows users to tag, be sure to have a look at <a href="http://tagging.pui.ch/post/37027746608/tagsystems-performance-tests" style="color: #c00906; text-decoration: none;">my performance tests</a> as performance seems to be a problem on larger scaled sites.)</div>
<h2 style="color: #111111; font-family: Georgia, serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px;">
<a href="https://www.blogger.com/blogger.g?blogID=1951384499390869365" id="mysqlicious" name="mysqlicious"></a>"MySQLicious" solution</h2>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<br />
<img alt="mysqlicious sample data" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOpGw0NPxn8V0TtDbcO8dg0CaiZqNNPwD0M7n4b1vY3GLqK-VUJvKL0zU7nF1Xhfy6NxxIwIGJRz1_Dvbr55T79lC_4OPhLgfVphx_jc4Ej4IprngnyPY6-HEWKvVYBz6j91t4w77cBbU/s373/mysqlicious_data.png" /><img alt="mysqlicious database stucture" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuVeXkyCegcahM_dV5n7phYxFUcMUkB3MVGFA2qozFXcWreDWhD5-lEB-kjpzFvTQ69kEdZnUCGwjPW_-zhJbjPMnWjNnUjlfTgSpufwPhLPjZ582eUHF_k05aYC-FOiYyE2x1qFEfUWU/s128/mysqlicious_structure.png" /></div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
In this solution, the schema has got just one table, it is <a href="http://en.wikipedia.org/wiki/Denormalization" style="color: #c00906; text-decoration: none;">denormalized</a>.</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
I named this solution “MySQLicious solution” because <a href="http://nanovivid.com/projects/mysqlicious/" style="color: #c00906; text-decoration: none;">MySQLicious</a>imports del.icio.us data into a table with this structure.</div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Intersection (AND)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “search+webservice+semweb”:<br />
<code>SELECT *<br />FROM `delicious`<br />WHERE tags LIKE "%search%"<br />AND tags LIKE "%webservice%"<br />AND tags LIKE "%semweb%"</code></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Union (OR)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “search|webservice|semweb”:</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<code>SELECT *<br />FROM `delicious`<br />WHERE tags LIKE "%search%"<br />OR tags LIKE "%webservice%"<br />OR tags LIKE "%semweb%"</code></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Minus</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “search+webservice-semweb”</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<code>SELECT *<br />FROM `delicious`<br />WHERE tags LIKE "%search%"<br />AND tags LIKE "%webservice%"<br />AND tags NOT LIKE "%semweb%"</code></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Conclusion</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
The advantages of this solution:</div>
<ul style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin: 0px 0px 1.5em; padding: 0px;">
<li>just one table</li>
<li>the queries are very straightforward</li>
<li>one can also achieve results via fulltextsearch. That might be a little faster.</li>
<li>queries are quite slow according to some commenters. Fulltext search would speed up a bit. I <a href="http://tagging.pui.ch/post/37027746608/tagsystems-performance-tests" style="color: #c00906; text-decoration: none;">did some performance tests</a> to prove that.</li>
<li><a href="http://tagging.pui.ch/post/37027745995/tags-with-mysql-fulltext" style="color: #c00906; text-decoration: none;">In my follow up post I dealt with MySQL fulltext concerning tagging</a>.</li>
</ul>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<br />
Disadvantages:</div>
<ul style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin: 0px 0px 1.5em; padding: 0px;">
<li>You have a limit on the number of tags per bookmark. Normally you use a 256byte field in your DB (<code>VARCHAR</code>). Otherwise, if you took a <code>text</code> field or similar, the query times would slow down, I suppose</li>
<li>Patrice <a href="http://tagging.pui.ch/post/37027745720/tags-database-schemas#comment-725379777" style="color: #c00906; text-decoration: none;">noticed</a> that <code>LIKE "%search"</code> will also find tags with “websearch”. If you alter the query to <code>LIKE " %search% "</code> you end up having a messy solution: You have to add a space to the beginning of the tags value to make this work.</li>
</ul>
<h2 style="color: #111111; font-family: Georgia, serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px;">
<a href="https://www.blogger.com/blogger.g?blogID=1951384499390869365" id="scuttle" name="scuttle"></a>"Scuttle" solution</h2>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Scuttle organizes its data in two tables. That table “scCategories” is the “tag”-table and has got a foreign key to the “bookmark”-table. <img alt="database structure of scuttle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHSprQyVjJ6ao1udxmIuCtOXhPn15fZ2L1GXi63MMVM6k2S4rM-4Lx4zVcx5jAL9VUgpCyvA5JbeCcpo8m0IapMduz2Y-VhZ1s1iugsvKhJPfM_-cfSl0NOV76yT0dwq_89_imL42YWgk/s206/scuttle_structure.png" /></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Intersection (AND)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “bookmark+webservice+semweb”:</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<code>SELECT b.*<br />FROM scBookmarks b, scCategories c<br />WHERE c.bId = b.bId<br />AND (c.category IN ('bookmark', 'webservice', 'semweb'))<br />GROUP BY b.bId<br />HAVING COUNT( b.bId )=3</code></div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
First, all bookmark-tag combinations are searched, where the tag is “bookmark”, “webservice” or “semweb” (<code>c.category IN ('bookmark', 'webservice', 'semweb')</code>), then just the bookmarks that have got all three tags searched for are taken into account (<code>HAVING COUNT(b.bId)=3</code>).</div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Union (OR)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “bookmark|webservice|semweb”:</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Just leave out the <code>HAVING</code> clause and you have union:</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<code>SELECT b.*<br />FROM scBookmarks b, scCategories c<br />WHERE c.bId = b.bId<br />AND (c.category IN ('bookmark', 'webservice', 'semweb'))<br />GROUP BY b.bId</code></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Minus (Exclusion)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “bookmark+webservice-semweb”, that is: bookmark AND webservice AND NOT semweb.<br />
<code>SELECT b. *<br />FROM scBookmarks b, scCategories c<br />WHERE b.bId = c.bId<br />AND (c.category IN ('bookmark', 'webservice'))<br />AND b.bId NOT<br />IN (SELECT b.bId FROM scBookmarks b, scCategories c WHERE b.bId = c.bId AND c.category = 'semweb')<br />GROUP BY b.bId<br />HAVING COUNT( b.bId ) =2</code></div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Leaving out the <code>HAVING COUNT</code> leads to the Query for “bookmark|webservice-semweb”.<br />
Credits go to <a href="http://www.metafilter.com/user/26222" style="color: #c00906; text-decoration: none;">Rhomboid</a> for <a href="http://ask.metafilter.com/mefi/34897#544185" style="color: #c00906; text-decoration: none;">helping me out with this query</a>.</div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Conclusion</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
I guess the main advantage of this solution is that it is more normalized than the first solution, and that you can have unlimited number of tags per bookmark.</div>
<h2 style="color: #111111; font-family: Georgia, serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px;">
<a href="https://www.blogger.com/blogger.g?blogID=1951384499390869365" id="toxi" name="toxi"></a>"Toxi" solution</h2>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<img alt="image" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZKF5Om2bjVgbZ_2ED1B8dFJXCXSntL2qn6yoxyKM8BBTlaZnQczczLelI3PRbAnRA4XbnvgQOJ8YW6eFbouijqw3CzJ3198E9QCGBVuqUSWjEqQeBzIQhld-_1gTppBDfDUx5DJG7fg/s330/toxi_structure.png" width="330" /></div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<a href="http://toxi.co.uk/" style="color: #c00906; text-decoration: none;">Toxi</a> came up with a three-table structure. Via the table “tagmap” the bookmarks and the tags are n-to-m related. Each tag can be used together with different bookmarks and vice versa. This DB-schema is also used by <a href="http://wordpress.org/" style="color: #c00906; text-decoration: none;">wordpress</a>.</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
The queries are quite the same as in the “scuttle” solution.</div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Intersection (AND)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “bookmark+webservice+semweb”</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<code>SELECT b.*<br />FROM tagmap bt, bookmark b, tag t<br />WHERE bt.tag_id = t.tag_id<br />AND (t.name IN ('bookmark', 'webservice', 'semweb'))<br />AND b.id = bt.bookmark_id<br />GROUP BY b.id<br />HAVING COUNT( b.id )=3</code></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Union (OR)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “bookmark|webservice|semweb”</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
<code>SELECT b.*<br />FROM tagmap bt, bookmark b, tag t<br />WHERE bt.tag_id = t.tag_id<br />AND (t.name IN ('bookmark', 'webservice', 'semweb'))<br />AND b.id = bt.bookmark_id<br />GROUP BY b.id</code></div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Minus (Exclusion)</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Query for “bookmark+webservice-semweb”, that is: bookmark AND webservice AND NOT semweb.<br />
<code><br />SELECT b. *<br />FROM bookmark b, tagmap bt, tag t<br />WHERE b.id = bt.bookmark_id<br />AND bt.tag_id = t.tag_id<br />AND (t.name IN ('Programming', 'Algorithms'))<br />AND b.id NOT IN (SELECT b.id FROM bookmark b, tagmap bt, tag t WHERE b.id = bt.bookmark_id AND bt.tag_id = t.tag_id AND t.name = 'Python')<br />GROUP BY b.id<br />HAVING COUNT( b.id ) =2</code><br />
Leaving out the <code>HAVING COUNT</code> leads to the Query for “bookmark|webservice-semweb”.<br />
Credits go to <a href="http://www.metafilter.com/user/26222" style="color: #c00906; text-decoration: none;">Rhomboid</a> for <a href="http://ask.metafilter.com/mefi/34897#544185" style="color: #c00906; text-decoration: none;">helping me out with this query</a>.</div>
<h3 style="color: #111111; font-family: Georgia, serif; font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0px 0px 1em; padding: 0px;">
Conclusion</h3>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
The advantages of this solution:</div>
<ul style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin: 0px 0px 1.5em; padding: 0px;">
<li>You can save extra information on each tag (description, tag hierarchy, …)</li>
<li>This is the most normalized solution (that is, if you go for <a href="http://en.wikipedia.org/wiki/3NF" style="color: #c00906; text-decoration: none;">3NF</a>: take this one :-)</li>
</ul>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
Disadvantages:</div>
<ul style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin: 0px 0px 1.5em; padding: 0px;">
<li>When altering or deleting bookmarks you can end up with tag-orphans.</li>
</ul>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
If you want to have more complicated queries like (bookmarks OR bookmark) AND (webservice or WS) AND NOT (semweb or semanticweb) the queries tend to become very complicated. In these cases I suggest the following query/computation process:</div>
<ol style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin: 0px 0px 1.5em; padding: 0px;">
<li>Run a query for each tag appearing in your “tag-query”: <code>SELECT b.id FROM tagmap bt, bookmark b, tag t WHERE bt.tag_id = t.tag_id AND b.id = bt.bookmark_id AND t.name = "semweb"</code></li>
<li>Put each id-set from the result into an array (that is: in your favourite coding language). You could cache this arrays if you want..</li>
<li>Constrain the arrays with union or intersection or whatever.</li>
</ol>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
In this way, you can also do queries like <code>(del.icio.us|delicious)+(semweb|semantic_web)-search</code>. This type of queries (that is: the brackets) cannot be done by using the denormalized “MySQLicious solution”.<br />
This is the most flexible data structure and I guess it should scale pretty good (that is: if you do some caching).<br />
<br />
<strong>Update May, 2006</strong>. This arcticle got quite some attention. I wasn’t really prepared for that! It seems people keep referring to it and even some new sites that allow tagging give credit to my articles. I think the real credit goes to the contributers of the different schemas:<a href="http://nanovivid.com/projects/mysqlicious/" style="color: #c00906; text-decoration: none;">MySQLicious</a>, <a href="http://sourceforge.net/projects/scuttle/" style="color: #c00906; text-decoration: none;">scuttle</a>, <a href="http://toxi.co.uk/" style="color: #c00906; text-decoration: none;">Toxi</a> and to all the contributors of the comments (be sure to read them!)</div>
<div style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin-bottom: 1.5em;">
P.S. Thanks to <a href="http://toxi.co.uk/" style="color: #c00906; text-decoration: none;">Toxi</a> for sending me the queries for the three-table-schema, Benjamin Reitzammer for pointing me to <a href="http://laughingmeme.org/archives/002918.html" style="color: #c00906; text-decoration: none;">a loughing meme article</a> (a good reference for tag queries) and powerlinux for pointing me to <a href="http://sourceforge.net/projects/scuttle/" style="color: #c00906; text-decoration: none;">scuttle</a>.<br />
Further reading</div>
<ul style="color: #333333; font-family: Georgia, serif; font-size: 16px; line-height: 24px; margin: 0px 0px 1.5em; padding: 0px;">
<li><a href="http://lists.tagschema.com/mailman/listinfo/tagdb" style="color: #c00906; text-decoration: none;">Taglist: a mailing list dedicated to schemas with tagging</a></li>
<li><a href="http://tagschema.com/blogs/tagschema/" style="color: #c00906; text-decoration: none;">Tagschema: A blog dedicated to tagging schemas</a></li>
<li><a href="http://www.bigbold.com/snippets/tags/tagging" style="color: #c00906; text-decoration: none;">Tag-related Queries on Snippets</a></li>
<li><a href="http://www.getluky.net/freetag/" style="color: #c00906; text-decoration: none;">Freetag</a> is a php “library” with which you can add tags to whatever object you like. It actually uses the “toxi schema”.</li>
<li>Hammy <a href="http://hellojoseph.com/tags-howto.php" style="color: #c00906; text-decoration: none;">gives an insight</a> how he did his tagging system with “less DB and more code” (that is: regular expressions), interesting!</li>
<li>Brad Choate <a href="http://bradchoate.com/weblog/2004/10/06/delicious" style="color: #c00906; text-decoration: none;">has got some ideas</a> which tag queries should be possible</li>
<li>Feedmaker has written <a href="http://blog.feedmarker.com/2005/04/26/tagging-in-mysql/" style="color: #c00906; text-decoration: none;">a sort of reply to this article</a></li>
</ul>
</div>
</div>
<ul class="post-footer" style="border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; color: #777777; font-family: Georgia, serif; font-size: 0.75em; line-height: 24px; margin: 1.5em 0px 0px; padding: 0.5em 0px 1em; text-align: right;">
<li style="display: inline; margin-left: 1em;"><a href="http://tagging.pui.ch/post/37027745720/tags-database-schemas#note-container" style="color: #c00906; text-decoration: none;">8 notes</a></li>
<li style="display: inline; margin-left: 1em;"><a href="http://tagging.pui.ch/post/37027745720/tags-database-schemas" style="color: #c00906; text-decoration: none;">Permalink</a></li>
<li style="display: inline; margin-left: 1em;"><a href="http://tagging.pui.ch/post/37027745720/tags-database-schemas#disqus_thread" style="color: #c00906; text-decoration: none;">87 Comments</a></li>
<li style="display: inline; margin-left: 1em;">Posted at 10:35 AM</li>
<li style="display: inline; margin-left: 1em;">Tagged: <a class="tag" href="http://tagging.pui.ch/tagged/Tags" style="color: #c00906; text-decoration: none;">Tags</a> <a class="tag" href="http://tagging.pui.ch/tagged/Del.icio.us" style="color: #c00906; text-decoration: none;">Del.icio.us</a><a class="tag" href="http://tagging.pui.ch/tagged/MySQL" style="color: #c00906; text-decoration: none;">MySQL</a></li>
</ul>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-2547225509218596672014-01-27T23:13:00.000-05:002014-02-06T14:26:59.589-05:00Front-End Development: 5 Things You Should Definitely Learn in 2014<h2>
Front-End Development: 5 Things You Should Definitely Learn in 2014</h2>
<i>A post by Joseph Howard@<a href="http://www.pencilscoop.com/2014/01/front-end-development-5-things-you-should-definitely-learn-in-2014/">http://www.pencilscoop.com/2014/01/front-end-development-5-things-you-should-definitely-learn-in-2014/</a></i><br />
<br />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<em style="font-family: inherit; font-size: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit;"><strong style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit;">We all know at what a rapid pace the world of web design and development moves. As designers and developers we are set with similar tasks of continually learning and improving to ensure we’re up to date with the latest trends, projects and practices in our continual attempt to stay relevant in such a fast-paced industry.</strong></em></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
For front-end developers, improving on existing skills and taking on new best practices, new languages, implementation techniques and deployment are integral. However it’s very easy to fall behind, often through becoming complacent or overly protective of the workflow you’ve become so accustomed to using over the years. There’s nothing wrong with this kind of “If it aint broken, don’t fix it” attitude, however it comes at a risk – one of becoming obsolete, very quickly.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Today, the web is such a vibrant environment full of media, applications and interactivity. Sure, a simple HTML/CSS setup has worked for a long time, and will continue to do so– however we are now seeing a seemingly endless stream of innovative development and deployment projects released everyday.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Some of these are useful and develop a strong community and support network. However they almost always take a significant amount of time to become widely accepted as a recognised development practice.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
One way of ensuring you’re at the forefront of the latest web development know-how is to make an active list of things you need to improve on or learn, and commit a structured time management road-map to improvement.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
If you haven’t already – here are some useful things you should consider learning in 2014:</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h2 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.875em; font-weight: normal; line-height: 1.267em; margin: 0px 0px 15px; padding: 0px;">
Learn and Start Using SASS</h2>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://sass-lang.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="learn-SASS" class="alignnone size-full wp-image-11103" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/01/learn-SASS.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
You’ve almost definitely heard of SASS right? However (like a lot of people) you may be reluctant to give it a try. Let me put it this way, every developer who currently uses SASS has gone through the exact same notion you’re going through. After years of religiously following your own workflow and structuring CSS files just the way you like them – why should you change? Well, there’s heaps of reasons, all the buzz around SASS wouldn’t be for nothing right? If so many people are using it, there must be something good about it right? Exactly and there’s a lot of things – once you start using it, you’ll wonder why you didn’t earlier. Here’s a few useful links to get started:</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://alistapart.com/article/why-sass" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Why SASS?</a> – A List Apart.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://jeffcroft.com/blog/2012/feb/23/many-ways-to-use-css-preprocessors/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">The Many Ways To Work With CSS Preprocessors</a> – Jeff Croft.</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h2 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.875em; font-weight: normal; line-height: 1.267em; margin: 0px 0px 15px; padding: 0px;">
Learn Grunt</h2>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://gruntjs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="learn-grunt" class="alignnone size-full wp-image-11102" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/01/learn-grunt.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Maybe you’ve heard of <a href="http://gruntjs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Grunt</a>. The name sounds kind of weird I know, but Grunt is a fantastic tool and workflow for designers and front-end developers. It runs on JavaScript and does a whole bunch of tasks for you like compiling and minifying CSS and JavaScript as well as compiling CSS from SASS. But that’s not even the start of it, Grunt can do all sorts of things (too many to list here). It’s totally customisable and works how and when you want it to work. It says it’s a task runner – but really it’s more than that, it’s a project workflow. To get started with Grunt take a look at these two links below:</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://24ways.org/2013/grunt-is-not-weird-and-hard/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Grunt for People Who Think Things Like Grunt are Weird and Hard</a> - 24 Ways.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://css-tricks.com/video-screencasts/130-first-moments-grunt/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">First Moments With Grunt</a> (screen cast video) – CSS Tricks.</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h2 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.875em; font-weight: normal; line-height: 1.267em; margin: 0px 0px 15px; padding: 0px;">
Learn SVG</h2>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="learn-SVG-animation" class="alignnone size-full wp-image-11101" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/01/learn-SVG-animation.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
You’ve probably heard all the buzz on SVG over the past few months. The truth is, SVG has been around for quite a while, but don’t ask me why it’s only taking off now. Anyway, when combined with CSS and JavaScript, SVG can produce some interesting effects and will no doubt evolve through increased interest throughout 2014. To get started, take a look at these articles:</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/getting-started-with-scalable-vector-graphics-svg/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Getting Started with SVG</a> - Webdesign Tuts+.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Animated SVG Icons with Snap.js</a> - Codrops.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://24ways.org/2013/animating-vectors-with-svg/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Animating Vectors with SVG</a> - 24 Ways.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Animate SVG With CSS and jQuery</a> - PencilScoop.</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h2 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.875em; font-weight: normal; line-height: 1.267em; margin: 0px 0px 15px; padding: 0px;">
Learn CSS Animation</h2>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.pencilscoop.com/2014/01/using-css-3d-effects-and-key-frame-animation/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="learn-keyframing" class="alignnone size-full wp-image-11100" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/01/learn-keyframing.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Again, another feature that’s been around for a while. Traditionally most browser animation has been handled via jQuery, however CSS animations are becoming highly mediated lately. The debate continues as to which way of handling animations is the best, however ultimately the choice is up to you. Personally, I find CSS animations and keyframing pretty easy to use and relatively logical in general. Here are some useful links for getting started.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://css-tricks.com/video-screencasts/97-intro-to-css-animations/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Intro to CSS Animations</a> – CSS Tricks (Screen Cast)</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://learn.shayhowe.com/advanced-html-css/transitions-animations" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Transitions <abbr style="border: 0px;" title="and">&</abbr> Animations</a> - <span style="line-height: 1.5em;">A Beginner’s Guide to HTML & CSS</span></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://css-tricks.com/snippets/css/keyframe-animation-syntax/" style="color: #ea5c35; font-weight: bold; line-height: 1.5em; text-decoration: none;">CSS Keyframe Syntax </a><span style="line-height: 1.5em;">- CSS Tricks.</span></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://daneden.github.io/animate.css/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Animate.CSS </a>- A useful list of pre-made CSS animations and effects.</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Learn Custom Parallax</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://cyclemon.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="learn-parallax" class="alignnone size-full wp-image-11099" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2014/01/learn-parallax.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Some would say the parallax effect has already come and gone, which is probably partly true. However it’s starting to be used in some more subtle ways which can help put the finishing touches on any project. That being said, there are a lot of plugins available for parallax effects, however if you really want to master it, you should really learn create your own custom effect. Here’s some more info:</div>
<div itemprop="name" style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html" style="color: #ea5c35; font-weight: bold; text-decoration: none;">20 Best Websites with Parallax Scrolling of 2013</a> - Awwwards</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">A Simple Parallax Scrolling Technique</a> – Nettuts+</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.egstudio.biz/easy-parallax-with-jquery/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Easy Parallax with jQuery</a> – egstudio</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<em style="font-family: inherit; font-size: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit;"><strong style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit;">What front-end development stuff are you using at the moment? Is anything notable you would recommend? Let us know in the comments.</strong></em></div>
<div class="author-box" style="background-color: #1e2629; border: none; color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 23.4375px; margin: 18px 0px; overflow: hidden; padding: 20px;">
<h2 style="font-family: Montserrat, sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.389em; margin: 0px 0px 15px !important; padding: 0px;">
About The Author</h2>
<div class="holder" style="margin: 0px; overflow: hidden; padding: 0px;">
<div class="visual" style="border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; float: left; height: auto; margin: 5px 22px 0px 0px; overflow: hidden; padding: 0px; width: 64px;">
<img alt="Joseph Howard" src="http://www.pencilscoop.com/wp-content/authors/Joseph%20Howard-9.png" height="64" style="border: 0px; display: block; height: auto; margin-top: 0px; max-width: 100%; overflow: hidden; width: 64px;" width="64" /></div>
<div class="text" style="margin: 0px; overflow: hidden; padding: 0px; word-spacing: -1px;">
<div style="font-size: 12px; line-height: 17px; margin-bottom: 12px; overflow: hidden; padding: 0px;">
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.</div>
</div>
</div>
</div>
<div class="social-holder" style="color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 23.4375px; margin: 0px; overflow: hidden; padding: 20px 0px 0px;">
<h3 style="font-family: Montserrat, sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.389em; margin: 0px 0px 15px; padding: 0px;">
Share this Article</h3>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-22700352980104929602014-01-27T23:09:00.001-05:002014-02-06T14:27:22.323-05:00150+ Free Animated SVG Icons<h2>
150+ Free Animated SVG Icons</h2>
<i>A post by Joseph Howard@<a href="http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/">http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/</a></i><br />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<em style="font-family: inherit; font-size: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit;"><strong style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit;">SVG implementation is fast becoming one of the hottest topics sweeping design and development circles as of late. With all the start-ups and JavaScript libraries, I wanted to create a set of SVG icons that have zero third-party dependencies and that can be implemented easily.</strong></em></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
I’ve already written a number of articles on SVG, including <a href="http://www.pencilscoop.com/2013/11/animate-svg-icons-with-css3-jquery/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" title="Animate SVG Icons with CSS3 & jQuery">this tutorial</a> on animating icons with simple CSS and a tiny bit of jQuery. If you’re mostly unfamiliar with SVG implementation, it’s a good place to start. For some additional reading, take a look at <a href="http://www.pencilscoop.com/2013/11/svg-and-icon-fonts-the-future-of-iconography/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" title="SVG and Icon Fonts: The Future Of Iconography">this article here</a>, which looks at the comparisons between SVG and icon-fonts.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
However, the idea with this article is to provide a set of icons that any web designer or developer can use. Let’s take a look at how everything’s setup.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<br /></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px; text-align: center;">
<a class="btn sunset small" href="http://www.pencilscoop.com/demos/animated-svg/demo/index.html" style="background-color: #ea5c35; background-image: url(http://www.pencilscoop.com/wp-content/themes/PencilScoopV2/images/download.png); background-position: 8px 4px; background-repeat: no-repeat no-repeat; border: none; color: white; display: inline-block; font-size: 0.875em; font-weight: bold; line-height: normal; margin: 0px 0px 10px; outline: none; padding: 5px 10px 7px 45px; text-decoration: none; vertical-align: top;" target="_blank">View Demo</a> <a class="btn sunset small" href="http://www.pencilscoop.com/demos/animated-svg/source/Animated_SVGs.zip" style="background-color: #ea5c35; background-image: url(http://www.pencilscoop.com/wp-content/themes/PencilScoopV2/images/download.png); background-position: 8px 4px; background-repeat: no-repeat no-repeat; border: none; color: white; display: inline-block; font-size: 0.875em; font-weight: bold; line-height: normal; margin: 0px 0px 10px; outline: none; padding: 5px 10px 7px 45px; text-decoration: none; vertical-align: top;" target="_blank">Download Source</a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Setup</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
As you can see in the demo, there are 6 different sets of icons with various differences in styling and animation. All the styling and animation is done exclusively in CSS, externally from the inline SVG mark-up. If you take a look at the source files, you’ll notice I’ve separated all the styling into individual styles-sheets for the corresponding icon style.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Let’s take a look at the general document setup:</div>
<ol class="mochaEnlighterJS EnlighterJSRendered" id="EnlighterJS_hqyn93d1" style="background-color: #bbccd5; border: 1px solid rgb(147, 147, 147); font-family: Monaco, Courier, monospace; font-size: 10px; line-height: 16px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 20px; overflow: auto; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">
<li class="firstline odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 5px 5px 0px 14px;"><span class="st2" style="color: #ddf2a4; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><!DOCTYPE></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="st2" style="color: #ddf2a4; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><head></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><meta</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">charset</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"utf-8"</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><title</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">150+ Animated SVG Icons Demo</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></title></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><link</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">rel</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"stylesheet"</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">type</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"text/css"</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">href</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"css/social_line_styles.css"</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="co1" style="color: #5f5a60; font-size: 12px; font-style: italic; line-height: inherit; margin: 0px; padding: 0px;"><!--SVG Styles & Animation--></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></head></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><body</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><span</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">class</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"svg-icon flat-line"</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">id</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"line-lightning"</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></span><span class="co1" style="color: #5f5a60; font-size: 12px; font-style: italic; line-height: inherit; margin: 0px; padding: 0px;"><!-- SVG icon is injected via JavaScript into span via the ID --></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><script</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">src</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"js/svg_inject_scoial_line.js"</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></script></span><span class="co1" style="color: #5f5a60; font-size: 12px; font-style: italic; line-height: inherit; margin: 0px; padding: 0px;"><!--SVG injection script - contains the inline SVG Data--></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></body></span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="lastline even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 5px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></html></span></li>
</ol>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
As you can see, the setup is quite simple. The SVG mark-up is injected externally via JavaScript and styled in an external style-sheet.</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
SVG Injection</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Let’s take a look at how the JavaScript injects the SVG into the page. The idea here is that you can use it more dynamically as you won’t need to worry about putting SVG inline SVG’s directly into the page. All you need to do is create an HTML element with the corresponding “<em style="font-family: inherit; font-size: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit;">id</em>”, and the script will inject the SVG into that element. Additionally, I’ve included all the cleaned and optimised SVG files if you prefer to use other means of implementing.</div>
<ol class="mochaEnlighterJS EnlighterJSRendered" id="EnlighterJS_hqyn93d2" style="background-color: #bbccd5; border: 1px solid rgb(147, 147, 147); font-family: Monaco, Courier, monospace; font-size: 10px; line-height: 16px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 20px; overflow: auto; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">
<li class="firstline odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 5px 5px 0px 14px;"><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">var</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> SVGstring </span><span class="sy0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="st0" style="color: #8f9d6a; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"<!--SVG Mark-Up Goes Here-->"</span><span class="sy0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">;</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="even hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 0px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></li>
<li class="lastline odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 0px 5px 5px 14px;"><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">$</span><span class="br0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">(</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">SVGstring</span><span class="br0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">)</span><span class="sy0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">.</span><span class="me0" style="color: #c5af75; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">appendTo</span><span class="br0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">(</span><span class="st0" style="color: #8f9d6a; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">'#DIV-NAME'</span><span class="br0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">)</span><span class="sy0" style="color: #777777; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">;</span></li>
</ol>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
The HTML</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
The HTML is pretty simple, the icons are injected into “<span>”s with a class for general styling and an ‘id” for specific styling and the injection.</div>
<ol class="mochaEnlighterJS EnlighterJSRendered" id="EnlighterJS_hqyn93d3" style="background-color: #bbccd5; border: 1px solid rgb(147, 147, 147); font-family: Monaco, Courier, monospace; font-size: 10px; line-height: 16px; list-style-image: initial; list-style-position: outside; margin: 0px 0px 20px; overflow: auto; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">
<li class="firstline lastline odd hoverEnabled" style="background-color: #2d2522; border-left-color: rgb(147, 147, 147); border-left-style: solid; border-width: 0px 0px 0px 2px; color: #939393; font-size: inherit; line-height: 14px; list-style: decimal-leading-zero outside; margin: 0px 0px 0px 40px; padding: 5px 5px 5px 14px;"><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"><span</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">class</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"svg-icon ICON-CLASS-STYLE"</span><span class="unknown" style="color: #f8f8f8; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"> </span><span class="kw2" style="color: #cacd69; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">id</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">=</span><span class="kw3" style="color: #afc4db; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">"INDIVIDUAL ID FOR INJECTION AND STYLING"</span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;">></span><span class="kw1" style="color: #cda869; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px;"></span></span></li>
</ol>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
The CSS</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
The SVG mark-up contains all the classes and path data. By default, it contains CSS styling mark-up as well. However I’ve placed this in the style-sheets and applied some basic styling and animations. If you want to get more advanced with the animations, feel free to do so.</div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Lastly, the flat design icons were designed by <a href="http://dribbble.com/shots/1201666-Free-Flat-Icons" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Studio4 | Creative </a>and are free for any use, credit goes to them for the design. However I slightly modified the original designs as well as converted them to SVG (amongst other things). That’s it really. Feel free to use them to your liking.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<img alt="free-animated-svg-icons" class="alignnone size-full wp-image-10855" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free-animated-svg-icons.png" style="border: 0px; margin: 10px 20px 0px 0px; max-width: 100%; overflow: hidden;" /></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<em style="font-family: inherit; font-size: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit;"><strong style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit;">Please note, although I’ve designed this for easy implementation, you may need to make some minor adjustments in integrating it into your own set-up. Enjoy!</strong></em></div>
<hr class="separator" style="border-style: solid none none; border-top-color: rgb(235, 235, 235); clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 1px; line-height: 23.4375px; margin-bottom: 15px;" />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px; text-align: center;">
<a class="btn sunset small" href="http://www.pencilscoop.com/demos/animated-svg/demo/index.html" style="background-color: #ea5c35; background-image: url(http://www.pencilscoop.com/wp-content/themes/PencilScoopV2/images/download.png); background-position: 8px 4px; background-repeat: no-repeat no-repeat; border: none; color: white; display: inline-block; font-size: 0.875em; font-weight: bold; line-height: normal; margin: 0px 0px 10px; outline: none; padding: 5px 10px 7px 45px; text-decoration: none; vertical-align: top;" target="_blank">View Demo</a> <a class="btn sunset small" href="http://www.pencilscoop.com/demos/animated-svg/source/Animated_SVGs.zip" style="background-color: #ea5c35; background-image: url(http://www.pencilscoop.com/wp-content/themes/PencilScoopV2/images/download.png); background-position: 8px 4px; background-repeat: no-repeat no-repeat; border: none; color: white; display: inline-block; font-size: 0.875em; font-weight: bold; line-height: normal; margin: 0px 0px 10px; outline: none; padding: 5px 10px 7px 45px; text-decoration: none; vertical-align: top;" target="_blank">Download Source</a></div>
<div class="author-box" style="background-color: #1e2629; border: none; color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 23.4375px; margin: 18px 0px; overflow: hidden; padding: 20px;">
<h2 style="font-family: Montserrat, sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.389em; margin: 0px 0px 15px !important; padding: 0px;">
About The Author</h2>
<div class="holder" style="margin: 0px; overflow: hidden; padding: 0px;">
<div class="visual" style="border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; float: left; height: auto; margin: 5px 22px 0px 0px; overflow: hidden; padding: 0px; width: 64px;">
<img alt="Joseph Howard" src="http://www.pencilscoop.com/wp-content/authors/Joseph%20Howard-9.png" height="64" style="border: 0px; display: block; height: auto; margin-top: 0px; max-width: 100%; overflow: hidden; width: 64px;" width="64" /></div>
<div class="text" style="margin: 0px; overflow: hidden; padding: 0px; word-spacing: -1px;">
<div style="font-size: 12px; line-height: 17px; margin-bottom: 12px; overflow: hidden; padding: 0px;">
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.</div>
</div>
</div>
</div>
<div class="social-holder" style="color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 23.4375px; margin: 0px; overflow: hidden; padding: 20px 0px 0px;">
<h3 style="font-family: Montserrat, sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.389em; margin: 0px 0px 15px; padding: 0px;">
Share this Article</h3>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-59542342980135146912014-01-27T23:07:00.001-05:002014-02-06T14:27:47.674-05:0050+ Awesome Free Tools for Web Developers<h2>
50+ Awesome Free Tools for Web Developers</h2>
<i>A post by Joseph Howard@<a href="http://www.pencilscoop.com/2013/12/50-awesome-free-tools-for-web-developers/">http://www.pencilscoop.com/2013/12/50-awesome-free-tools-for-web-developers/</a></i><br />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<strong style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit;">If you’re a front-end developer or web designer, chances are you spend a lot of time writing mark-up. Luckily, there are some great tools and projects on the web for improving your next project easily and quickly.</strong></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Often you may need a little helping hand to get things done. Today we have tracked down over 50 brilliant free online tools for developers. We’ve included everything from mark-up organizers, grid systems, jQuery plugins, gradient generators and much more.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Enjoy.</div>
<hr class="separator" style="border-style: solid none none; border-top-color: rgb(235, 235, 235); clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 1px; line-height: 23.4375px; margin-bottom: 15px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Nettuts+ Prefixr</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Ensuring cross-browser compatibility is a must for any project. However, writing all those browser prefixes can be a pain. <a href="http://prefixr.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Prefixr</a> from Nettuts+ is great online tool, simply copy and paste your mark-up and it will output all the necessary prefixes for you!</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://prefixr.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_prefixr" class="alignnone wp-image-10468" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_prefixr.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CSSmatic Gradient Generator</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Creating nice gradients in CSS can be tricky, particularly if you’re a visual thinker. However this free tool from CSSmatic can create any gradient, no matter how complex! A great tool for any developer.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.cssmatic.com/gradient-generator" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_gradients" class="alignnone wp-image-10473" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_gradients.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Headroom.js</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Playing around with headers can be difficult and almost always requires JavaScript of some sort.<a href="http://wicky.nillia.ms/headroom.js/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Headroom</a> is an awesome jQuery based plugin that allows you to show/hide your header until it’s needed by the user, reacting to page scrolling changes. A great plugin.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://wicky.nillia.ms/headroom.js/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_headroom" class="alignnone wp-image-10478" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_headroom.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Retinise.js</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.dahliacreative.com/retinisejs/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Retinise.js</a> is a really simple jQuery plugin which ‘retinises’ your inline images, and because it uses ‘data-src’ instead of ‘src’ it means it only ever serves up the image you need, saving you and your users bandwidth.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.dahliacreative.com/retinisejs/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_retinise" class="alignnone wp-image-10489" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_retinise.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Pure</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://purecss.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Pure</a> is a set of small, responsive CSS modules that you can use in every web project, such as forms, grids, tables, buttons and much more.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://purecss.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_pure" class="alignnone wp-image-10490" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_pure.jpg" style="border: 2px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Colourco</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://colourco.de/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Colourco</a> lets you create a number of different color themes based on a simple GUI set-up.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://colourco.de/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_colourco" class="alignnone wp-image-10491" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_colourco.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CSS Modal</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A plugin using only CSS for modals. The modals are designed using responsive web design methods. They work on all screen sizes from a small mobile phone up to high resolution screens.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://drublic.github.io/css-modal/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_css_modal" class="alignnone wp-image-10492" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_css_modal.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Snap.SVG</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://snapsvg.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Snap.SVG</a> is a free library for SVG based web animations. It’s probably one of the better SVG-jQuery scripts available at the moment.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://snapsvg.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_snap-svg" class="alignnone wp-image-10536" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_snap-svg.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
ProCSSor</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
If you need to clean up your CSS, <a href="http://procssor.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">ProCSSor</a> is hands-down the best free online CSS beautifier. It has host of awesome features so your mark-up gets formatted just the way you like it.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://procssor.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_css-procssor" class="alignnone wp-image-10469" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_css-procssor.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
W3C Markup Validation</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Usually when you’re at the finishing stages of a project, you’ll want to ensure all your work is error free and W3C compliant. A pretty standard procedure for most, however nonetheless integral.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://validator.w3.org/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_w3c--HTML" class="alignnone wp-image-10470" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_w3c-HTML.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Foundation</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://foundation.zurb.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Foundation</a> is probably the most widely used responsive front-end development framework for developers.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://foundation.zurb.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_foundation" class="alignnone size-full wp-image-10524" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_foundation.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Animate.CSS</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Hands-down the best CSS animation presets. A really great tool.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://daneden.github.io/animate.css/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="animate.css" class="alignnone wp-image-11137" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/animate.css.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<span style="font-size: 14px; line-height: 1.5em;"><br /></span></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
</div>
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Responsive Web CSS</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Build responsive CSS media queries and breakpoints for specific devices.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.responsivewebcss.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_resonsivecss" class="alignnone wp-image-10493" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_resonsivecss.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Grunt</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://gruntjs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Grunt</a> is an awesome tool for developers. It’s a JavaScript task runner that minifies CSS and jQuery as well as converting SASS to CSS. And lot’s lot’s more. Take a look at these two articles to learn how to use it.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://24ways.org/2013/grunt-is-not-weird-and-hard/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Grunt for People Who Think Things Like Grunt are Weird and Hard</a> - 24 Ways.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://css-tricks.com/video-screencasts/130-first-moments-grunt/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">First Moments With Grunt</a> (screen cast video) – CSS Tricks.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://gruntjs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="developer-tools-grunt" class="alignnone size-full wp-image-11139" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/developer-tools-grunt.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
SASS</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
While it’s not so much of a tool as a markup language, <a href="http://sass-lang.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">SASS</a> is a way of writing CSS that can save you lot’s of time and produce cleaner, less repetitive stylesheets. It’s also great for Grunt.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://sass-lang.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="SASS-tools" class="alignnone size-full wp-image-11141" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/SASS-tools.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<br /></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Yeoman</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A lot of these tools have funny names, Yeoman is one of them. But don’t be fooled, if you’ve decided to use Grunt you should definitely take a look at this.Yeoman is an open source project which defines an opinionated stack for web application development.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://yeoman.io/index.html" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="yeoman-tool" class="alignnone size-full wp-image-11150" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/yeoman-tool.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<br /></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Dirty Markup</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Clean up your HTML, CSS and JavaScript with the appropriately named <a href="http://www.dirtymarkup.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Dirty Markup</a>.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.dirtymarkup.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_dirty-markup" class="alignnone wp-image-10481" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_dirty-markup.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Free Formatter</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
If you need to convert HTML to JSON or convert something to escaped format, or pretty much any Web Dev related conversion, <a href="http://www.freeformatter.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">freeformatters.com</a> has a whole bunch of tools ready for the job.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.freeformatter.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_free-formatters" class="alignnone wp-image-10483" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_free-formatters.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Glyph Search</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://glyphsearch.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Glyph Search</a> let’s you search a number of free online glyph icon libraries.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://glyphsearch.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_glyphsearch" class="alignnone wp-image-10507" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_glyphsearch.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CodePen</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://codepen.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Codepen</a> is a really great site for sharing web code with the greater community. It can also serve as a great tool when you need to figure out how do something. Simply type what you’re looking for into search, and chances are someone has made it.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://codepen.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_codepen" class="alignnone size-full wp-image-10486" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_codepen.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CSS Animation Cheat Sheet</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
The <a href="http://www.justinaguilar.com/animations/index.html" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">CSS3 Animation Cheat Sheet</a> is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.justinaguilar.com/animations/index.html" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_css_animation-sheet" class="alignnone wp-image-10494" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_css_animation-sheet.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Pre Composed Touch Gestures</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A set of basic, precomposed touch-device gestures in a neatly organized zip file for you to use in product demos or presentations.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://areuswade.com/precomposed-touch-gestures/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_touch-gesture" class="alignnone wp-image-10495" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_touch-gesture.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CSS Inliner</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Sometimes you need to put your CSS styles inline. This free tool does just that. Simply paste your HTML and it puts all your styles inline.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://inliner.cm/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_css-inline" class="alignnone wp-image-10508" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_css-inline.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Type Wonder</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://typewonder.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Type Wonder</a> let’s you test webfonts on any live site.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://typewonder.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_type-wonder" class="alignnone wp-image-10497" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_type-wonder.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
IcoMelon</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://iconmelon.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">IcoMelon</a> is a free online library and generator for SVG based web icons.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://iconmelon.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_icomelon" class="alignnone wp-image-10499" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_icomelon.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CSS Comb</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://csscomb.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">CSS Comb</a> is a free online tool for sorting CSS properties in a number of specific orders. It also is a plugin for a number of popular text editors.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://csscomb.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_css-comb" class="alignnone wp-image-10500" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_css-comb.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
WP Test</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://wptest.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">WP Test</a> is a set of data testing tools that check the integrity of your WordPress plugins and themes.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://wptest.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_wp-test" class="alignnone wp-image-10501" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_wp-test.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
UI Cloud</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://ui-cloud.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">UI Cloud</a> is the largest online database of user interface designs, letting you search through almost 50,000 designs.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://ui-cloud.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_ui-cloud" class="alignnone wp-image-10502" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_ui-cloud.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
RAW</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://raw.densitydesign.org/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Raw</a> let’s you easily and quickly turn spreadsheet data into SVG web visualizations.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://raw.densitydesign.org/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_raw" class="alignnone wp-image-10503" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_raw.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Bento</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.bentobox.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Bento</a> is an online resource for learning web development, all links are categorized into various mark-up languages.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.bentobox.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_bento" class="alignnone size-full wp-image-10504" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_bento.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
FlatIcon</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.flaticon.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">FlatIcon</a> is a free online database of over 25, 000 vector icons.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.flaticon.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_flat-icons" class="alignnone size-full wp-image-10506" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_flat-icons.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Bitters</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://bitters.bourbon.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Bitters</a> is a free starter template for setting up projects based on bourbon and SASS.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://bitters.bourbon.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_bitters" class="alignnone wp-image-10510" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_bitters.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Subtle Patterns</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://subtlepatterns.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Subtle Patterns</a> is probably the best online collection of patterns for backgrounds and other uses. It’s based on user provided content but it’s curated carefully, which means no junk. There’s also a photoshop plugin available.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://subtlepatterns.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="subtle-patterns-tool" class="alignnone size-full wp-image-11144" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/subtle-patterns-tool.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="separator" style="border-style: solid none none; border-top-color: rgb(235, 235, 235); clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 1px; line-height: 23.4375px; margin-bottom: 15px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Color Template</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.rocket-design.fr/color-template/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Color template</a> is an online development and learning resource for creating color templates for web implementation.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.rocket-design.fr/color-template/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_color-template" class="alignnone wp-image-10512" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_color-template.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
IcoMoon</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://icomoon.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">IcoMoon</a> is a free online library and generator for font icons.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://icomoon.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_icomoon" class="alignnone size-full wp-image-10535" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_icomoon.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Ink</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://zurb.com/ink/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Ink</a> is an online tool for creating responsive HTML email templates that are cross-browser/device compatible.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://zurb.com/ink/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_ink" class="alignnone wp-image-10513" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_ink.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
CSS Colors</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Did you know CSS has over 140 different colors like “Thistle”, “Darkorchid” and “Cornflowerblue” ? Probably not right? Well <a href="http://colours.neilorangepeel.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">this page</a> has a comprehensive list of all the pre-defined CSS colors available.</div>
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://colours.neilorangepeel.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="css-colors-tool" class="alignnone size-full wp-image-11145" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/css-colors-tool.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Script SRC.net</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://scriptsrc.net/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Script src</a> is a simple website for all the most current and widely used script tags.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://scriptsrc.net/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_script-src" class="alignnone wp-image-10515" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_script-src.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Sprite Box</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.spritebox.net/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Sprite Box</a> let’s you easily create image sprites for web implementation.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.spritebox.net/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_sprite-box" class="alignnone wp-image-10516" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_sprite-box.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Diff Checker</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A simple tool for finding differences and comparing markup.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.diffchecker.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_dif-checker" class="alignnone wp-image-10517" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_dif-checker.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Bootstrap</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://getbootstrap.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Bootstrap</a> is a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://getbootstrap.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_bootstrap" class="alignnone size-full wp-image-10518" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_bootstrap.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Browser Hacks</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://browserhacks.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">BrowserHacks</a> is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://browserhacks.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_browser-hacks" class="alignnone wp-image-10519" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_browser-hacks.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Prefix Free</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://leaverou.github.io/prefixfree/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Prefix Free</a> is a JavaScript based plugin that automatically adds browser prefixes to your CSS.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://leaverou.github.io/prefixfree/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_prefix-free" class="alignnone wp-image-10520" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_prefix-free.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Brackets</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://brackets.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Brackets</a> is a free online text-editor for web designers and front-end developers.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://brackets.io/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_brackets" class="alignnone wp-image-10521" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_brackets.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Zurb Grid Builder</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A great grid builder based on Zurb’s Foundation framework.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://zurb.com/playground/css-grid-builder" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_zurb-builder" class="alignnone wp-image-10523" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_zurb-builder.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
DropZone.js</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.dropzonejs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">DropzoneJS</a> is an open source library that provides drag’n'drop file uploads with image previews.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.dropzonejs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_dropzone" class="alignnone wp-image-10526" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_dropzone.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Hint.CSS</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://kushagragour.in/lab/hint/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Hint.CSS</a> is free css based library for tooltips based on SASS.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://kushagragour.in/lab/hint/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_hintcss" class="alignnone size-full wp-image-10527" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_hintcss.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
MUELLER</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://muellergridsystem.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">MUELLER</a> is a modular grid system for responsive/adaptive and non–responsive layouts, based on <a href="http://compass-style.org/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Compass</a>. You have full control over column width, gutter width, baseline grid and media–queries.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://muellergridsystem.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_mueller-modules" class="alignnone size-full wp-image-10529" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_mueller-modules.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Top Drawer</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Based on Modernizer, <a href="http://www.jordanm.co.uk/lab/topdrawer" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Top Drawer</a> is plugin for smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.jordanm.co.uk/lab/topdrawer" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_top-drawer" class="alignnone size-full wp-image-10530" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_top-drawer.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Toolbar.js</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://paulkinzett.github.io/toolbar/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Toolbar.js</a> allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://paulkinzett.github.io/toolbar/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="free_code_tools_toolbar" class="alignnone size-full wp-image-10531" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_toolbar.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Hooks.js</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://usehook.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank">Hooks.js</a> is a small plugin that allows app style ‘pull to refresh’ functionality on the web.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://usehook.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_pullrefresh" class="alignnone wp-image-10532" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_pullrefresh.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
SVG.js</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A lightweight library for manipulating web SVG.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.svgjs.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_SVGjs" class="alignnone wp-image-10533" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_SVGjs.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Profound Grid</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.profoundgrid.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;" target="_blank"><img alt="free_code_tools_profound-grid" class="alignnone wp-image-10534" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/free_code_tools_profound-grid.jpg" style="border: 1px solid black; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Responsive Text Sizes</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
Responsive design can be tricky, particularly text sizes. While this is not a tool as such, this blogpost can help you determine your text sizes across different screen sizes.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://typecast.com/blog/a-more-modern-scale-for-web-typography" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="text-size-tool" class="alignnone size-full wp-image-11147" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/text-size-tool.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<br /></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<h3 style="color: #1e2629; font-family: Montserrat, sans-serif; font-size: 1.688em; font-weight: normal; line-height: 1.407em; margin: 0px 0px 15px; padding: 0px;">
Sublime Text</h3>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
If you work on a mac, <a href="http://www.sublimetext.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;">Sublime Text</a> is the code-editor of choice for most professionals. While it’s not strictly free, the trial version still works.</div>
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<a href="http://www.sublimetext.com/" style="color: #ea5c35; font-weight: bold; text-decoration: none;"><img alt="sublime-text-tool" class="alignnone size-full wp-image-11148" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/12/sublime-text-tool.jpg" style="border: 0px; clear: both; float: left; margin: 5px 349.5px 20px 0px; max-width: 100%; overflow: hidden;" /></a></div>
<hr class="space" style="border: none; clear: both; color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; height: 10px; line-height: 23.4375px;" />
<div style="font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 25px; margin-bottom: 15px; overflow: hidden; padding: 0px;">
<em style="font-family: inherit; font-size: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit;"><strong style="font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit;">What tools are you currently using in your workflow? Are there any awesome ones you would suggest? Let us know in the comments.</strong></em></div>
<div class="author-box" style="background-color: #1e2629; border: none; color: white; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 23.4375px; margin: 18px 0px; overflow: hidden; padding: 20px;">
<h2 style="font-family: Montserrat, sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.389em; margin: 0px 0px 15px !important; padding: 0px;">
About The Author</h2>
<div class="holder" style="margin: 0px; overflow: hidden; padding: 0px;">
<div class="visual" style="border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; float: left; height: auto; margin: 5px 22px 0px 0px; overflow: hidden; padding: 0px; width: 64px;">
<img alt="Joseph Howard" src="http://www.pencilscoop.com/wp-content/authors/Joseph%20Howard-9.png" height="64" style="border: 0px; display: block; height: auto; margin-top: 0px; max-width: 100%; overflow: hidden; width: 64px;" width="64" /></div>
<div class="text" style="margin: 0px; overflow: hidden; padding: 0px; word-spacing: -1px;">
<div style="font-size: 12px; line-height: 17px; margin-bottom: 12px; overflow: hidden; padding: 0px;">
Hi I'm Joseph Howard. I'm a web-designer and digital media professional and I'm the creator of PencilScoop. You can get in touch with me through your preferred social media account.</div>
</div>
</div>
</div>
<div class="social-holder" style="color: #1e2629; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 23.4375px; margin: 0px; overflow: hidden; padding: 20px 0px 0px;">
<h3 style="font-family: Montserrat, sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.389em; margin: 0px 0px 15px; padding: 0px;">
Share this Article</h3>
</div>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-48665528691159307542014-01-17T23:08:00.001-05:002014-02-06T14:28:12.631-05:00Chrome Is The New C Runtime<span style="background-color: white; font-family: opensans; font-size: 38px; line-height: 50px;">Chrome Is The New C Runtime</span><br />
<br />
<i>A post by Sanjeev Radhakrishnan@<a href="https://www.mobilespan.com/content/chrome-is-the-new-c-runtime">https://www.mobilespan.com/content/chrome-is-the-new-c-runtime</a></i><br />
<br />
<b>Date</b>:
Friday, January 17, 2014<br />
<b>Author</b>:
Sanjeev Radhakrishnan<br />
<br />
<section class="clearfix" id="content" role="main" style="background-color: white; border: 0px; font-family: opensans, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18.1875px; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;"><div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Cross-platform app development is more important than ever. 10 years ago, you just whipped out your Visual Studio when you needed a client application, but not anymore. With “app-ification” going mainstream on Android, iOS, Windows, and Mac, what is a developer to do?</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Web apps are a good solution some of the time (except for that little detail called IE!).</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
But what about when you need the features and performance of native code, across platforms? And you’re a startup with a small team and impossible deadlines?</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Well, at MobileSpan we’ve been living in this world for the past 2 years, and we want to share our approach.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
We chose to build our application by integrating with the source code of <a href="http://www.chromium.org/Home" style="border: 0px; color: #3882f4; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Chromium</a>.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Chromium is the open-source base of Google Chrome. My co-founder and I are Xooglers from the Chrome team, so we were very familiar with it and it was an easy choice for us. But you don't have to spend 4 years at Google to take advantage of Chrome's rich code base.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h2 style="border: 0px; font-family: opensans; font-size: 28px; font-style: inherit; font-variant: inherit; font-weight: 400; line-height: 40px; margin: 30px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
But... I'm not building a browser!</h2>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
So, why would Chrome source be useful to me for cross-platform app development? I'm not building a browser...</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
In reality, Chrome is much more than just a browser. Chrome code is highly tuned for performance, reliability, and cross-platform compatibility across PCs and iOS + Android devices.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Out of necessity, the Chrome team has created cross-platform abstractions for many low-level platform features. We use this source as the core API on which we build our business logic, and it's made the bulk of our app cross-platform with little effort.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Most importantly -- Chrome code has been battle-tested like almost nothing else, with an installed base in the hundreds of millions. That makes all the difference when you want to spend your days working on your company’s business logic instead of debugging platform issues.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Basically, you can structure your code like the diagram below, where you only write your application logic, and let Chromium do the heavy lifting.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: hidden; padding: 0px; vertical-align: baseline;">
<img alt="Chrome Development Diagram" src="https://www.mobilespan.com/sites/default/files/images/blog/chrome-dev-platform.png" style="border: 0px; display: inline; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 30px 0px 0px; outline: none; padding: 0px; vertical-align: middle;" title="Chrome Development Diagram" /></div>
<h2 style="border: 0px; font-family: opensans; font-size: 28px; font-style: inherit; font-variant: inherit; font-weight: 400; line-height: 40px; margin: 30px 0px 16px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
So what's in Chrome that's so great?</h2>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Well, consider the parts of a modern browser. Chrome contains high-performance, cross-platform implementations of:</div>
<ul style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li class="first odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Concurrency handling</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Compression</li>
<li class="odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Encryption</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Certificate handling</li>
<li class="odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Low-level socket interfaces</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">High-level protocol implementations like HTTP, HTTPS, FTP)</li>
<li class="odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">DNS resolution</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Proxy handling</li>
<li class="odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Complex disk caching</li>
<li class="last even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Cookie handling</li>
</ul>
... and more<br />
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
What it lets you do is build a single, cross-platform application layer, on top of all this goodness.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Chrome code also has other unexpected, higher-level goodies like:</div>
<ul style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li class="first odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Chrome Remote Desktop,</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">a full P2P (TURN, STUN, etc) stack (used by the Chrome Remote Desktop code),</li>
<li class="last odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">an XMPP client (used by Chrome Sync as well as Chrome Remote Desktop)</li>
</ul>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h2 style="border: 0px; font-family: opensans; font-size: 28px; font-style: inherit; font-variant: inherit; font-weight: 400; line-height: 40px; margin: 30px 0px 16px; outline: none; padding: 0px; text-align: center; vertical-align: baseline;">
Where Do I Start?</h2>
<h3 style="border: 0px; font-family: opensans; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: 300; line-height: 26px; margin: 25px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
First Things First: The right tools to generate your project</h3>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
The first step in starting your project is to create the appropriate project file for your platform (Visual Studio, XCode etc). Chromium uses <a href="https://code.google.com/p/gyp" style="border: 0px; color: #3882f4; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;">GYP</a> to declaratively specify files and project settings in a platform independent manner. I strongly recommend starting your project as a GYP file. GYP generates project files for each platform (Visual Studio solution and project files, XCode project files and Android .mk files). In addition, powerful dependency options in GYP allow compiler and linker settings needed by the various Chromium project files to automatically flow into the projects that depend on them. This drastically reduces your own build headaches, as well as problems when you update your checkout of Chrome sources.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h3 style="border: 0px; font-family: opensans; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: 300; line-height: 26px; margin: 25px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
A basketful of helpers prevent your project from becoming a basket-case.</h3>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Once you get to the meat of your app, you will find yourself needing all sorts of helper libraries for everything ranging from string manipulation, concurrency handling, synchronization, thread pools, message loops, logging, file manipulation, timers, shared memory management, and more.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
If you find yourself starting to write a generic helper class or library, search the Chromium sources first. Chances are very high that you will find just the class you want, with very good unit-test coverage to boot.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
The base library in the Chromium sources (found in src/base) provides a vast array of cross-platform tools that cover all the areas mentioned above and a lot more. There are also helpers for platform-specific areas such as the Windows registry or the iOS keychain.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
It has become quite the game for developers at MobileSpan to search the Chromium sources for helpers they need.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h3 style="border: 0px; font-family: opensans; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: 300; line-height: 26px; margin: 25px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
Network stack, anyone?</h3>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Unless you are building your app for Windows 3.1, chances are that you want to talk to a server of some kind. This might involve simple HTTP or HTTPS API calls or low-level socket calls or anything in between.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
The net library in Chromium (src/net) is your friend here. You’ll find a full cross-platform HTTP and HTTPS stack, code for cookie handling, caching, TCP and UDP sockets and socket pools, SSL certificate handling, DNS resolution, proxy server resolution ..., well, you get the idea, pretty much anything network related.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h3 style="border: 0px; font-family: opensans; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: 300; line-height: 26px; margin: 25px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
Encryption</h3>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Need to handle public/private keys, encrypt data store secrets? The crypto library (src/crypto) is another excellent cross-platform library that is almost sure to have the encryption or key management routine you are looking for. By now, you get the picture of how the sources are organized.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h3 style="border: 0px; font-family: opensans; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: 300; line-height: 26px; margin: 25px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
XMPP, P2P, Protocol Buffers etc.</h3>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
These aren’t things you would normally expect to find in a web browser but Chromium includes an extensive XMPP and P2P client library built on top of libjingle (look at src/jingle and src/remoting). If you use protocol buffers in your code, GYP has support for .proto files. Just add the .proto files to your GYP file and it will do the right thing of building the protoc compiler and generate wrapper code for your protobufs. This even works for iOS projects.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h3 style="border: 0px; font-family: opensans; font-size: 20px; font-style: inherit; font-variant: inherit; font-weight: 300; line-height: 26px; margin: 25px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
Testing</h3>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Your code is only as good the unit-tests you write for them, right? Though not strictly a part of the Chrome, the GTest and GMock libraries that are part of the Chrome checkout provide an excellent framework for writing unit-tests and mocking your C++ classes. All Chrome tests are written using these frameworks so you have a big sample codebase to get inspired by.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
GYP even creates platform-appropriate containers for your tests. For example, on iOS, it will automatically create an iOS app to contain your tests so you can run them in the simulator. You just write your tests in cc files, add them to a gyp file, add the right dependencies and viola, you have cross-platform unit-tests.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
At MobileSpan, we implemented the core of our business logic in a cross-platform library that is built using Chrome. We then built our UI per platform that uses this underlying library. Porting our app to a new platform means mainly building the UI layer on the new platform and then tying it together with the cross-platform client library.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h2 style="border: 0px; font-family: opensans; font-size: 28px; font-style: inherit; font-variant: inherit; font-weight: 400; line-height: 40px; margin: 30px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
Conclusion: Tying It Together</h2>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
If I am sounding like a Chrome fan-boy, that’s because I am one. Since we embraced Chromium more than 2 years ago, we have found it to work really well for us as a dev platform, saving countless person-hours. It has allowed us to reuse some really well-written and, more importantly, well-tested code across several client platforms, and to concentrate our efforts on making a solid product that works equally well on multiple platforms.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
</div>
<h2 style="border: 0px; font-family: opensans; font-size: 28px; font-style: inherit; font-variant: inherit; font-weight: 400; line-height: 40px; margin: 30px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
Items for a future post</h2>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
This just scratches the surface of using Chrome source as a development platform. What should I cover in a next post?</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Some options include:</div>
<ul style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style-image: initial; list-style-position: initial; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;">
<li class="first odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Deep dive into specific libraries like Network, Crypto, etc.</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Keeping up to date with Chromium sources</li>
<li class="odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">How to fork and keep your sanity (and knowing when to fork certain sources)</li>
<li class="even" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">Process of checking out Chromium sources</li>
<li class="last odd" style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4em; list-style: disc; margin: 0px 0px 0px 17px; outline: none; padding: 0px; vertical-align: baseline;">More details on cross-platform UI development</li>
</ul>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Have you poked at Chrome's codebase or used it to build a cool product? Tell us about it in the comments section.</div>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
<br /></div>
<div class="content-left" style="border-top-color: gray; border-top-style: solid; border-width: 1px 0px 0px; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.4em; margin: 0px 20px 0px 0px; outline: none; padding: 30px 0px 0px; vertical-align: baseline; width: inherit;">
<div class="team" style="border: none; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.4em; margin: 0px 0px 20px; min-height: 150px; outline: none; padding: 0px 0px 20px 165px; position: relative; vertical-align: baseline; width: auto;">
<div class="team-img" style="border: 1px solid rgb(204, 204, 204); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: 150px; left: 0px; line-height: 1.4em; margin: 0px; outline: none; padding: 1px; position: absolute; top: 0px; vertical-align: baseline; width: 150px;">
<img alt="Sanjeev Radhakrishnan" src="https://www.mobilespan.com/sites/default/files/team/Sanjeev.png" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; outline: none; padding: 0px; vertical-align: baseline;" /></div>
<h2 style="border: 0px; color: #666666; font-family: opensans; font-size: 14px; font-style: inherit; font-variant: inherit; font-weight: 400; line-height: 20px; margin: 30px 0px 16px; outline: none; padding: 0px; vertical-align: baseline;">
Sanjeev Radhakrishnan</h2>
<div style="border: 0px; font-family: inherit; font-size: 15px; font-style: inherit; font-variant: inherit; line-height: 1.4em; margin-bottom: 10px; margin-top: 10px; outline: none; overflow: auto; padding: 0px; vertical-align: baseline;">
Co-Founder and CTO, Sanjeev leads technology development and architecture at MobileSpan. He brings many years of experience from working on Google Chrome's security and sandboxing.</div>
</div>
</div>
</section>
Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0tag:blogger.com,1999:blog-1951384499390869365.post-46950990247638245272014-01-17T20:35:00.000-05:002014-02-06T14:57:36.390-05:00JS: the right way<i>A post by William Oliveira@<a href="http://jstherightway.org/">http://jstherightway.org/</a> </i><br />
<br />
<br />
<section class="main" id="main" style="background-color: #f7f169; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px;"><section class="wrapper" style="margin: 0px auto; position: relative; "><h1 style="color: white; font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.109804) 2px 3px 0px; text-transform: uppercase;">
CHOOSE YOUR PATH</h1>
<ul style="list-style: none; margin: 0px; padding: 0px;">
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#getting-started" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Getting Started</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#js-code-style" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">JavaScript Code Style</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#the-good-parts" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">The Good Parts</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#patterns" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Patterns</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#testing-tools" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Testing Tools</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#frameworks" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Frameworks</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#reading" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Reading</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#whotofollow" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Who to follow</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#paas" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">PaaS Providers</a></li>
<li style="padding: 10px 0px;"><a href="http://jstherightway.org/#helpers" style="-webkit-transition: all 0.2s ease-in-out; border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 3px; color: black; font-size: 24px; text-decoration: none; transition: all 0.2s ease-in-out;">Helpers</a></li>
</ul>
</section></section><section class="section" id="getting-started" style="background-color: #877399; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px; "><section class="wrapper" style="margin: 0px auto; position: relative;"><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
GETTING STARTED</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
ABOUT</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
Created by Netscape in 1995 as an extension of HTML for Netscape Navigator 2.0, JavaScript had as its main function the manipulation of HTML documents and form validation. Before winning this name so famous nowadays, JavaScript was called Mocha, after LiveScript and finally, when it was released by Sun Microsystems, was baptized with the name by which he is known today. Because of the similar names, people confuses JavaScript with Java. Although both have the lexical structure of programming, they are not the same language. Different from C, C# and Java, JavaScript is an interpreted language. It means that it needs an "interpreter". In case of JavaScript, the interpreter is the browser.</div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
CURRENT VERSION</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
The JavaScript standard is ECMAScript. As of 2012, all modern browsers fully support ECMAScript 5.1. Older browsers support at least ECMAScript 3. A 6th major revision of the standard is being worked on.</div>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
A good reference to versions, references and news about JavaScript, you can find at <a href="https://developer.mozilla.org/en-US/docs/JavaScript" style="color: #ff8484; text-decoration: none;">Mozilla Developer Network</a>.</div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
THE DOM</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript. See more at <a href="https://developer.mozilla.org/en-US/docs/DOM" style="color: #ff8484; text-decoration: none;">Mozilla Developer Network - DOM</a>.</div>
</section></section><section class="section" id="js-code-style" style="background-color: #48c383; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px; "><section class="wrapper" style="margin: 0px auto; position: relative; "><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
JS CODE STYLE</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
CONVENTIONS</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
As every language, JavaScript has many code style guides. Maybe the most used and recommended is the <a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" style="color: #ff8484; text-decoration: none;">Google Code Style Guide for JavaScript</a>, but we recommend you to read the <a href="https://github.com/rwldrn/idiomatic.js/" style="color: #ff8484; text-decoration: none;">Idiomatic.js</a>.</div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
LINTING</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
Nowadays the best tool to linting your JS code is the <a href="http://www.jshint.com/" style="color: #ff8484; text-decoration: none;">JSHint</a>. We recommend you whenever possible to verify you code style and patterns with a Lint tool.</div>
</section></section><section class="section" id="the-good-parts" style="background-color: #c35c48; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px; "><section class="wrapper" style="margin: 0px auto; position: relative;"><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
THE GOOD PARTS</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
OBJECT ORIENTED</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
JavaScript has strong object-oriented programming capabilities, even though some debates have taken place due to the differences in object-oriented JavaScript compared to other languages.</div>
<div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Source: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" style="color: #ff8484; text-decoration: none;">Introduction to Object-Oriented JavaScript</a></div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
ANONYMOUS FUNCTIONS</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
Anonymous functions are functions that are dynamically declared at runtime. They’re called anonymous functions because they aren’t given a name in the same way as normal functions.</div>
<div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Source: <a href="http://helephant.com/2008/08/23/javascript-anonymous-functions/" style="color: #ff8484; text-decoration: none;">Javascript anonymous functions</a></div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
FUNCTIONS AS FIRST-CLASS OBJECTS</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
Functions in javascript are first class objects. This means that javascript functions are just a special type of object that can do all the things that regular objects can do.</div>
<div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Source: <a href="http://helephant.com/2008/08/19/functions-are-first-class-objects-in-javascript/" style="color: #ff8484; text-decoration: none;">Functions are first class objects in JavaScript</a></div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
LOOSE TYPING</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
For many front end developers, JavaScript was their first taste of a scripting and/or interpretive language. To these developers, the concept and implications of loosely typed variables may be second nature. However, the explosive growth in the demand for Web 2.0-ish applications has resulted in a growing number of back end developers that have had to dip their feet into pool of client side technologies. Many of these developers are coming from a background in strongly typed languages, such as C# and Java, and are unfamiliar with both the freedom and the potential pitfalls involved in working with loosely typed variables.</div>
<div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Source: <a href="http://blog.jeremymartin.name/2008/03/understanding-loose-typing-in.html" style="color: #ff8484; text-decoration: none;">Understanding Loose Typing in JavaScript</a></div>
</section></section><section class="section" id="patterns" style="background-color: #7bc044; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px;><section class="wrapper" style="margin: 0px auto; position: relative; "><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
PATTERNS</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
DESCRIPTION</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
Too many of the classical design patterns are implemented and have uses in JavaScript and there are some JS Patterns that are exclusive.</div>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
A good way to learn about these is <a href="https://twitter.com/addyosmani" style="color: #ff8484; text-decoration: none;">Addy Osmani</a>’s open source book <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/" style="color: #ff8484; text-decoration: none;">Learning JavaScript Design Patterns</a>, and the links below are (in the majority) based on it.</div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
DESIGN PATTERNS</h3>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript" style="color: #ff8484; text-decoration: none;">Factory</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#prototypepatternjavascript" style="color: #ff8484; text-decoration: none;">Prototype</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mixinpatternjavascript" style="color: #ff8484; text-decoration: none;">Mixin</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript" style="color: #ff8484; text-decoration: none;">Singleton</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Creational Design Patterns</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#wrapperpatternjquery" style="color: #ff8484; text-decoration: none;">Adapter</a></li>
<li><a href="http://www.joezimjs.com/javascript/javascript-design-patterns-bridge/" style="color: #ff8484; text-decoration: none;">Bridge</a></li>
<li><a href="http://www.joezimjs.com/javascript/javascript-design-patterns-composite/" style="color: #ff8484; text-decoration: none;">Composite</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#decoratorpatternjavascript" style="color: #ff8484; text-decoration: none;">Decorator</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#facadepatternjavascript" style="color: #ff8484; text-decoration: none;">Facade</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailflyweight" style="color: #ff8484; text-decoration: none;">Flyweight</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript" style="color: #ff8484; text-decoration: none;">Module</a></li>
<li><a href="http://www.joezimjs.com/javascript/javascript-design-patterns-proxy/" style="color: #ff8484; text-decoration: none;">Proxy</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript" style="color: #ff8484; text-decoration: none;">Revealing Module</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Structural Design Patterns</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://www.joezimjs.com/javascript/javascript-design-patterns-chain-of-responsibility/" style="color: #ff8484; text-decoration: none;">Chain of Responsability</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#commandpatternjavascript" style="color: #ff8484; text-decoration: none;">Command</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#mediatorpatternjavascript" style="color: #ff8484; text-decoration: none;">Mediator</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript" style="color: #ff8484; text-decoration: none;">Observer</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Behavioral Design Patterns</div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
MV* PATTERNS</h3>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">There are some implementations of the traditional MVC Pattern and its variations in JS</section><section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvc" style="color: #ff8484; text-decoration: none;">MVC Pattern</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp" style="color: #ff8484; text-decoration: none;">MVP Pattern</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvvm" style="color: #ff8484; text-decoration: none;">MVVM Pattern</a></li>
</ul>
</section></section></section><section class="section" id="testing-tools" style="background-color: #ffc56f; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px;"><section class="wrapper" style="margin: 0px auto; position: relative;"><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
TESTING TOOLS</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
DESCRIPTION</h3>
<div style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; padding: 20px;">
Various libraries and frameworks to do tests in JavaScript.</div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
LINKS</h3>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://visionmedia.github.com/mocha/" style="color: #ff8484; text-decoration: none;">Mocha</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by <a href="https://github.com/visionmedia" style="color: black; text-decoration: none;">TJ Holowaychuk</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://qunitjs.com/" style="color: #ff8484; text-decoration: none;">qUnit</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by <a href="https://github.com/jquery" style="color: black; text-decoration: none;">jQuery</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="https://github.com/pivotal/jasmine" style="color: #ff8484; text-decoration: none;">Jasmine</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by <a href="https://github.com/pivotal" style="color: black; text-decoration: none;">Pivotal Labs</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://fireunit.org/" style="color: #ff8484; text-decoration: none;">FireUnit</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by <a href="https://github.com/jeresig" style="color: black; text-decoration: none;">John Resig</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://sugartest.scriptia.net/" style="color: #ff8484; text-decoration: none;">SugarTest</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by <a href="http://choangalvez.nom.es/" style="color: black; text-decoration: none;">Choan Gálvez</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://karma-runner.github.io/" style="color: #ff8484; text-decoration: none;">Karma</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by the team behing AngularJS. Mostly by <a href="https://github.com/vojtajina" style="color: black; text-decoration: none;">Vojta Jina</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;"><ul style="clear: both; margin: 0px; padding: 0px 20px;">
<li><a href="http://theintern.io/" style="color: #ff8484; text-decoration: none;">Intern</a></li>
</ul>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Created by <a href="http://www.sitepen.com/" style="color: black; text-decoration: none;">Sitepen</a></div>
</section></section><section class="section" id="frameworks" style="background-color: #178892; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px;"><section class="wrapper" style="margin: 0px auto; position: relative;"><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
FRAMEWORKS</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
CLIENT-SIDE</h3>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://jquery.com/" style="color: #ff8484; text-decoration: none;">jQuery</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
jQuery is a fast, small, and feature-rich JavaScript library. Built by <a href="https://twitter.com/jeresig" style="color: #fff849; text-decoration: none;">John Resig</a>.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://backbonejs.org/" style="color: #ff8484; text-decoration: none;">Backbone.js</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Very popular JS client-site framework, built by <a href="http://twitter.com/jashkenas" style="color: #fff849; text-decoration: none;">@jashkenas</a>.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://emberjs.com/" style="color: #ff8484; text-decoration: none;">Ember.js</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Built by <a href="http://twitter.com/wycats" style="color: #fff849; text-decoration: none;">@wycats</a>, jQuery and Ruby on Rails core developer.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://knockoutjs.com/" style="color: #ff8484; text-decoration: none;">Knockout.js</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM).</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://angularjs.org/" style="color: #ff8484; text-decoration: none;">Angular.js</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Built by Google, Angular.js is like a polyfill for the future of HTML</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://cappuccino.org/" style="color: #ff8484; text-decoration: none;">Cappuccino</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://javascriptmvc.com/" style="color: #ff8484; text-decoration: none;">JavaScript MVC</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
JavaScriptMVC is an open-source framework containing the best ideas in jQuery development.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://yuilibrary.com/" style="color: #ff8484; text-decoration: none;">YUI</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Built by Yahoo!, YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://zeptojs.com/" style="color: #ff8484; text-decoration: none;">ZeptoJS</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.</div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://dojotoolkit.org/" style="color: #ff8484; text-decoration: none;">Dojo Toolkit</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
Dojo is a free, open source JavaScript toolkit for building high performance web applications. Project sponsors include IBM and SitePen.</div>
</section></section><section class="section" id="reading" style="background-color: #7c84be; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px;"><section class="wrapper" style="margin: 0px auto; position: relative;"><h1 style="font-size: 40px; margin: 0px; text-align: center; text-shadow: rgba(0, 0, 0, 0.156863) 1px 4px 2px; text-transform: uppercase;">
READING</h1>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
ARTICLES</h3>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://robotlolita.github.io/2011/10/09/understanding-javascript-oop.html" style="color: #ff8484; text-decoration: none;">Understanding JavaScript OOP</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="https://github.com/killdream" style="color: #ffe55a; text-decoration: none;">Quildreen Motta</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://yehudakatz.com/2011/08/12/understanding-prototypes-in-JavaScript/" style="color: #ff8484; text-decoration: none;">Understanding “Prototypes” in JavaScript</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="https://github.com/wycats" style="color: #ffe55a; text-decoration: none;">Yehuda Katz</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://yehudakatz.com/2011/08/11/understanding-JavaScript-function-invocation-and-this/" style="color: #ff8484; text-decoration: none;">Understanding JavaScript Function Invocation and “this”</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="https://github.com/wycats" style="color: #ffe55a; text-decoration: none;">Yehuda Katz</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://benalman.com/news/2012/09/partial-application-in-javascript/" style="color: #ff8484; text-decoration: none;">Partial Application in JavaScript</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://github.com/cowboy" style="color: #ffe55a; text-decoration: none;">Ben Alman</a></div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
BOOKS</h3>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527" style="color: #ff8484; text-decoration: none;">JavaScript: The Definitive Guide</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://www.amazon.com/David-Flanagan/e/B000APEZR4/ref=ntt_athr_dp_pel_pop_1" style="color: #ffe55a; text-decoration: none;">David Flanagan</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742" style="color: #ff8484; text-decoration: none;">JavaScript: The Good Parts</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://www.amazon.com/Douglas-Crockford/e/B002N3VYB6/ref=ntt_athr_dp_pel_1" style="color: #ffe55a; text-decoration: none;">Douglas Crockford</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://tddjs.com/" style="color: #ff8484; text-decoration: none;">Test-Driven JavaScript Development</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://cjohansen.no/" style="color: #ffe55a; text-decoration: none;">Christian Johansen</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752" style="color: #ff8484; text-decoration: none;">JavaScript Patterns</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://www.amazon.com/Stoyan-Stefanov/e/B002BLXYIG/ref=ntt_athr_dp_pel_1" style="color: #ffe55a; text-decoration: none;">Stoyan Stefanov</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X" style="color: #ff8484; text-decoration: none;">High Performance JavaScript</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://www.amazon.com/Nicholas-C.-Zakas/e/B001IGUTOC/ref=ntt_athr_dp_pel_1" style="color: #ffe55a; text-decoration: none;">Nicholas C. Zakas</a></div>
<section class="txt" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; margin: 1em auto; padding: 20px;">
<li><a href="http://eloquentjavascript.net/" style="color: #ff8484; text-decoration: none;">Eloquent JavaScript</a></li>
</section><div class="source" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: both; color: dimgrey; float: left; margin-top: -16px; padding: 20px;">
by <a href="http://marijnhaverbeke.nl/" style="color: #ffe55a; text-decoration: none;">Marijn Haverbeke</a></div>
<h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
FREE E-BOOKS</h3>
<section class="links-container" style="clear: both; display: inline-block; float: left; margin-top: 15px;"><div class="source link" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: none !important; color: dimgrey; display: inline-block; float: none !important; margin-right: 15px; margin-top: -16px; padding: 20px;">
<a href="http://jsbooks.revolunet.com/" style="color: #ffe55a; text-decoration: none;">JSBooks</a></div>
</section><h3 style="border-bottom-color: rgba(0, 0, 0, 0.0784314); border-bottom-style: solid; border-bottom-width: 3px; clear: both; display: inline-block; float: left; text-transform: uppercase;">
PORTALS</h3>
<section class="links-container" style="clear: both; display: inline-block; float: left; margin-top: 15px;"><div class="source link" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: none !important; color: dimgrey; display: inline-block; float: none !important; margin-right: 15px; margin-top: -16px; padding: 20px;">
<a href="http://coding.smashingmagazine.com/tag/javascript/" style="color: #ffe55a; text-decoration: none;" target="_blank">Smashing Magazine</a></div>
<div class="source link" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: none !important; color: dimgrey; display: inline-block; float: none !important; margin-right: 15px; margin-top: -16px; padding: 20px;">
<a href="http://howtonode.org/" style="color: #ffe55a; text-decoration: none;" target="_blank">How to Node</a></div>
<div class="source link" style="background-color: white; background-position: initial initial; background-repeat: initial initial; box-shadow: rgba(0, 0, 0, 0.0784314) 0px 3px; clear: none !important; color: dimgrey; display: inline-block; float: none !important; margin-right: 15px; margin-top: -16px; padding: 20px;">
<a href="http://nodeguide.com/beginner.html" style="color: #ffe55a; text-decoration: none;" target="_blank">Felix’s Node.js Beginners Guide</a></div>
</section></section></section><section class="section" id="whotofollow" style="background-color: #44c0ac; color: white; float: left; font-family: 'Open Sans', sans-serif; padding: 30px 0px;><div class="wrapper" style="margin: 0px auto; position: relative;">
</div>
</section>Anonymoushttp://www.blogger.com/profile/13486517848989694950noreply@blogger.com0