I'm building a site that needs to work with browsers that support JavaScript and browsers that don't (or that have it disable). What are some good resources that explain good approaches in doing this? Any specific technologies or frameworks that handle this well?
The technique is called Progressive Enhancement, Christian Heilmann wrote a good introduction to the subject.
There is a great video presentation from JSConf.eu 2010 on exactly this topic.
No framework will make your site accessible for JS disabled users. It's your job to do that, independently of what library you may or may not use.
There are two steps you need to take:
- Build a site fully functioning without Javascript.
- all the content should be available
- all links should be real links
- all forms should work properly
- Add interaction to the site.
- the content can be manipulated
- links can use event listeners to change behavior
- forms can be enchanced
A few techniques that you might want to consider:
The HTML <noscript></noscript>
tags are very helpful for displaying content to only browsers that have JavaScript disabled.
There is another technique that I use (credit to Paul Irish? / Modernizr?), called the no-js class. For every page, have <html class="no-js">
. Then, also on every page, include a line of JavaScript that erases that class from your html element. If JavaScript is disabled, the no-js class will persist on your markup, and you will be able to design your site (via CSS) appropriately. All you have to do is add the .no-js
selector at the beginning of the CSS rules that you want to use when JavaScript is diabled.
My ending thought is you should always try to separate structure (html), style (css), and behavior (javascript). The principles of Unobtrusive Design and Progressive Enhancement are your friends.
Start by building a version of a page or group of pages that does not use JavaScript. Add your JS on top of the functioning page(s) and keep your JS out of your html wherever possible (it's almost always possible).
If you're familiar with Rails you can check out a blog post of mine. The post and example project show how you can handle deletes with JS enabled and disabled.
精彩评论