Ara Pehlivanian talked about the graceful degradation myth awhile back, and since then has come up with a simple solution to his problem.

The key is setting CSS styles aimed at JS enabled browsers that overwrite the initial state in the document that does the right thing for someone who isn’t coming in via a JavaScript enabled environment (e.g. accessible).

Here is an example of a window that drops down content in JS mode, and shows it without thus not blocking that content from non-JS view.

The CSS

Brand CSS for items that you want to override via hasJS classnames.

CSS:

  1.  
  2. body.hasJS {
  3.         background-color: #0f0;
  4. }
  5.                
  6. body {
  7.         background: #f00;
  8. }
  9.  

JavaScript

Turn on that CSS via JavaScript (addClassName):

HTML:

  1.  
  2. <script type=”text/javascript”>document.body.className += "hasJS"</script>
  3. <div class=”window”>
  4.         <div class=”head”>
  5.                 <h1 id=”toggle”>This is a window head</h1>
  6.         </div>
  7.         <div class=”content” id=”toggleContent”>
  8.                 <p>This is the windows contents.</p>
  9.                 <p>And some more content…</p>
  10.         </div>
  11. </div>
  12.  

Do you use these tactics?

Source: Ajaxian
Original Article: http://ajaxian.com/archives/understanding-and-solving-the-javascriptcss-entanglement-phenomenon

Leave a Reply

You must be logged in to post a comment.



Site Navigation