:scriptEnabled

I was just reading a little walk-through on styling a select box and it got me thinking about “What if css was enabled, but javascript was disabled?”. Granted, his solution does get around the problem (he only hides the selects that have a classname that is set by javascript…so if you don’t have js enabled, you still see the select). Anyway, I was wondering if there could be a more generic solution to styling things differently based on whether scripting was enabled. Would a :scriptEnabled pseudo-class be a good idea? Obviously we can’t do that, but we could have a scriptEnabled css class that gets slapped onto the document.body element by a bit of script. Then our javascript-assuming styles could be written as:

body.scriptEnabled select{
display:none;
}

I like the idea. Now, is that mixing style and behavior too closely? Maybe, but I still like it. Proceed with caution though…I wouldn’t want to wind up over-doing it and doubling all my rules…one for .scriptEnabled, and one without.

3 Responses to “:scriptEnabled”

  1. Nate Says:

    I’m starting to feel that the best solution to these problems is to have 2 pages. Especially when you have a lot of css/javscript based dynamics on the page. It is just way to complicated and time consuming to come up with solutions that make the page usuable by everyone and still in the end you end up with something less than ideal. I like the idea of having an extremely simple version of the page and then having the complex pretty and dynamic version of the page.

  2. Shawna Says:

    I just wanted to say I like your website. I got it off of nates blog. If you could please let nate know I said hi. Have a great day!

Leave a Reply