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]

Re: Detecting CSS State

Michael Crute wrote:[color=blue]
> I did a search and basically came up with nothing for this question,[/color]

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."
[color=blue]
> but if I missed the answer, I apologize in advance, please just point
> me in the right direction.[/color]

Apology accepted... :-p
[color=blue]
>
> 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?[/color]

No.
[color=blue]
>
> 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).[/color]

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]

Re: Detecting CSS State

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(docu ment.styleSheet s[0].disabled){loca tion.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]

Re: Detecting CSS State

On 13 Dec 2004 19:53:38 -0800, Michael Crute <mcrute@gmail.c om> wrote:

[snip]
[color=blue]
> 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?[/color]

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]

Re: Detecting CSS State

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

[snip]
[color=blue]
> 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 ??[/color]

Considering that CSS is optional, all documents should be user-friendly,
but not particularly attractive, when CSS is disabled.
[color=blue]
> onLoad='if(docu ment.styleSheet s[0].disabled){
> location.href=" http://www.yahoo.com"; }'[/color]

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]

Re: Detecting CSS State

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]

Re: Detecting CSS State

On 16 Dec 2004 11:50:09 -0800, "Michael Crute" <mcrute@gmail.c om>
wrote:
[color=blue]
>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?[/color]

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

Jim.

[Michael Crute]

Re: Detecting CSS State

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