Creating gracefully degrading javascript and enabling progressive enhancement
Sep 21 2008
Creating gracefully degrading Javascript and CSS is pretty simple these days. I’m sure this has been written about a million times over as well. However, I thought it would be worthwhile to share how I do it as well. Mainly, because in addition to AJAX and effects I use Javascript as a way of enabling different CSS selectors for elements. Doing this is actually quite simple, and allows you to easily alter the presentation of dynamic elements when Javascript is not available. I use this little snippet (written with Mootools) to accomplish this.
Show Plain Text- window.addEvent('domready', function() {
- $$('html')[0].addClass('js');
- });
This adds the class js to the <html> element. Making it very easy to make javascript enabled only CSS. A selector of #content .popup becomes html.js #content .popup. Also these Javascript enabled rules have greater specificity giving you greater flexibility as to where in the CSS source they can be placed.
Search
Categories
Recent Posts
- Using bindModel to get to deep relations
- New home, new sideproject
- Using bitmasks to indicate status
- AclExtras Shell
- Getting a new Oven, Migrating from CakePHP 1.1 to 1.2
- Code Completion for CakePHP in Eclipse
- CakePHP RC3 released and CakePHP 1.1 new release
- Book Review: CakePHP Application Development
- Providing Contextual Form Help with Mootools
- Creating gracefully degrading javascript and enabling progressive enhancement
Comments
Pixelastic on 21/9/08
An other way would be to load a javascript-only css file by putting a
<script language="javascript" type="text/javascript">/* <![CDATA[ */ document.write('<link rel="stylesheet" type="text/css" href="javascript.css" media="screen, projection" />'); /* ]]> */</script>And putting this after your regular stylesheet, you just have to override your rules with rules of the same name.
Doing so you will reduce the filesize of your original css file, removing commands that won’t be used.
But you’ll have an extra server hit for those people with javascript…
I did not say my way was better, just an alternative ;)
mark story on 23/9/08
Pixelastic: That is another viable option. I don’t think this is a subject where there is one ‘right’ option. There are many viable and good options each with their own benefits.
Have Something to say?