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

<channel>
	<title>Oncemade &#187; progressive enhancement</title>
	<atom:link href="http://oncemade.com/tag/progressive-enhancement/feed/" rel="self" type="application/rss+xml" />
	<link>http://oncemade.com</link>
	<description>Design, Web Dev, Inspiration</description>
	<lastBuildDate>Fri, 09 Jul 2010 02:06:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Adding hasJS Class When JavaScript Is Available</title>
		<link>http://oncemade.com/adding-hasjs-class-when-javascript-is-available/</link>
		<comments>http://oncemade.com/adding-hasjs-class-when-javascript-is-available/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 05:01:10 +0000</pubDate>
		<dc:creator>Rodrigo</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[progressive enhancement]]></category>

		<guid isPermaLink="false">http://oncemade.com/?p=781</guid>
		<description><![CDATA[While at An Event Apart Boston, Jeremy Keith delivered the best lecture of the conference, about progressive enhancement. One slide [...]]]></description>
			<content:encoded><![CDATA[<p>While at <a href="http://www.aneventapart.com/2009/boston/" title="An Event Apart Boston 2009">An Event Apart Boston</a>, <a href="http://adactio.com/" title="Adactio: Jeremy Keith">Jeremy Keith</a> delivered the best lecture of the conference, about progressive enhancement. One slide caught my attention the most. It was about adding a class to the body if JavaScript was available. Here is his code example using jQuery:</p>
<pre><h4>Keith's Example using jQuery:</h4><code>jQuery(function($) {
$(&#x27;body&#x27;).addClass(&#x27;hasJS&#x27;);
});</code>

<h4>CSS</h4><code>.hasJS .module {
display: none;
}</code>
</pre>
<h5>Why add a class if JavaScript is enabled?</h5>
<p>Although the majority of desktop users have JavaScript enabled, mobile is one of the most used platforms to surf the web. Some mobile browsers don't support JavaScript. Keep in mind that search engines don't run JavaScript, so NEVER add important content using JavaScript.</p>
<span id="more-781"></span>
<p>My current project at work requires the content to be rendered for both enabled and disabled JavaScript browsers. I did a bit of research and found that most websites/solutions add the <em>hasJS</em> class to the body after the <abrr title="Document Object Module"><em>DOM</em></abrr> is loaded. My first thought was, if the class gets added after the <em>DOM</em> is loaded, a shift on the page will occur providing a bad user experience. Yahoo was a site I researched and they have, IMHO, the cleverest solution of them all. They add the class to the <em>HTML</em> element instead of the <em>BODY</em> element. The first script block on the page to be loaded adds the <em>hasJS</em> class without dependency on libraries. <strong>Note: Yahoo uses another class name "jsenabled"</strong>.</p>
<p class="aligncenter"><img src="http://oncemade.com/wp-content/uploads/2009/08/yahoo_firebug.png" alt="Yahoo Firebug" /></p>
<p>You might be asking why add the class to the <em>HTML</em> element? I think it makes more sense because the <em>BODY</em> is the beginning of the content. This means that everything after the body is "visible" to the user and blocking the content with a script tag isn't a good optimization practice. Here is the code to add the <em>hasJS</em>  class to the body:</p>
<pre><h4>hasJS Script Block</h4><code>&lt;script type=&quot;text/javascript&quot;&gt;
  document.getElementsByTagName(&#x27;html&#x27;)[0].className = &#x27;hasJS&#x27;;
&lt;/script&gt;
</code></pre>
<p class="note">NOTE: If you already have more classes on the HTML element, use <strong>  document.getElementsByTagName(&#x27;html&#x27;)[0].className += &#x27; hasJS&#x27;;</strong> instead.</p>

<a target="_blank" class="demoBtn" href="http://examples.oncemade.com/hasjs.html">Demo</a>

<div class="browserSupport">
<h4>Browser Support</h4>
<ul class="browserComp clearfix">
   <li class="firefoxComp"><span>Firefox</span></li>
   <li class="safariComp"><span>Safari</span></li>
   <li class="chromeComp"><span>Chrome</span></li>
   <li class="operaComp"><span>Opera</span></li>
   <li class="ie7Comp"><span>Internet Explore 7 &amp; 8</span></li>
<li class="ie6Comp"><span>Internet Explore 6</span></li>
</ul>
</div>]]></content:encoded>
			<wfw:commentRss>http://oncemade.com/adding-hasjs-class-when-javascript-is-available/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
