Detecting CSS State

[Michael Crute]

I did a search and basically came up with nothing for this question,
but if I missed the answer, I apologize in advance, please just point
me in the right direction.

OK, I am using a JavaScript generated menu on my site; with CSS enabled
it looks great, but when CSS is disabled it prints out all these menu
options inline and you have to scroll past them (a pain in the ass). Is
there any way to tell if the user has CSS enabled or disabled through
JavaScript? I need a solution that works on Netscape, Mozilla (and
Firefox), IE, and preferably Opera. Any suggestions?

If you want to see what I mean check out
http://www.activelock.org/demo_site with CSS disabled (if you use
Firefox with the Web Developer plug-in its really easy, just
CTRL+SHIFT+D).

..:Mike Crute:.

[Fred Oz]

Michael Crute wrote:

I did a search and basically came up with nothing for this question,
You didn't search this new group, else you would have found an almost
identical question on 3 Dec with the subject "CSS enabled", to which
Mike Winter's uncontested response was:

"I don't believe you can."
but if I missed the answer, I apologize in advance, please just point
me in the right direction.
Apology accepted... :-p

OK, I am using a JavaScript generated menu on my site; with CSS enabled
it looks great, but when CSS is disabled it prints out all these menu
options inline and you have to scroll past them (a pain in the ass). Is
there any way to tell if the user has CSS enabled or disabled through
JavaScript? I need a solution that works on Netscape, Mozilla (and
Firefox), IE, and preferably Opera. Any suggestions?
No.

If you want to see what I mean check out
http://www.activelock.org/demo_site with CSS disabled (if you use
Firefox with the Web Developer plug-in its really easy, just
CTRL+SHIFT+D).

Your menus fail completely if JavaScript is turned off, which is
probably more prevalent than browsers without CSS support. Have you
considered that issue?

--
Fred

[JimMenees]

Mike,
The following works accurately with firefox and assumes there is only one
stylesheet (styleSheets[0] = array item 1) embedded in the doc. I don't know
what it would do with inline or @import styles.

I'm sure you could create a function to accomodate those variables if there are
more style sheets.

I put this in the body tag so that onLoad, if the stylesheet is disabled (by
firefox) you will be whisked off to yahoo.com, which assumeably is what you'd
want to do with a user: redirect them to a user-friendly non-css page ??

onLoad='if(document.styleSheets[0].disabled){location.href="http://www.yah
oo.com";}'

Obviously this needs testing in other browsers with their respective css
zappers, but it does work with firefox, so that's a positive start! ;-)

Hope this helps!

Jim

[Michael Winter]

On 13 Dec 2004 19:53:38 -0800, Michael Crute <mc****@gmail.com> wrote:

[snip]

OK, I am using a JavaScript generated menu on my site; with CSS enabled
it looks great, but when CSS is disabled it prints out all these menu
options inline and you have to scroll past them (a pain in the ass).
[...] Any suggestions?

Place the list at the end of the document, not the start, and position it
with CSS. Also, notice I said list: those links should be rendered with a
styled unordered list.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Winter]

On 15 Dec 2004 05:34:54 GMT, JimMenees <ji*******@aol.comNoSpam> wrote:

[snip]

I put this in the body tag so that onLoad, if the stylesheet is disabled
(by firefox) you will be whisked off to yahoo.com, which assumeably is
what you'd want to do with a user: redirect them to a user-friendly
non-css page ??
Considering that CSS is optional, all documents should be user-friendly,
but not particularly attractive, when CSS is disabled.
onLoad='if(document.styleSheets[0].disabled){
location.href="http://www.yahoo.com";}'

That certainly won't work with Opera as it doesn't currently implement the
styleSheets collection. Moreover, redirects should not be accomplished
with Javascript.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Crute]

Jim... thanks for the code it is a good start. As far as IE and other
browsers go, is there a little tool to disable CSS?

Michael... i think you have a good idea putting the list at the end.
The problem is though that if css is disabled I don't want to show the
list period. The rest of the page renders fine with CSS disabled but
the menu is just an annoying "feature" if there is no CSS.

The menu that I am using was generated with Macromedia Fireworks and
hacked to fit my needs. I may have to rewrite the entire Fireworks JS
code to make it more browser friendly, but I would rather not :)

[Jim Ley]

On 16 Dec 2004 11:50:09 -0800, "Michael Crute" <mc****@gmail.com>
wrote:

Jim... thanks for the code it is a good start. As far as IE and other
browsers go, is there a little tool to disable CSS?

you don't need a tool, it's built into the browser.

Jim.

[Michael Crute]

Hmm... I have never heard of such a thing, but I haven't really even
opened IE since before Firefox .08 :)