I recently made a popup menu wich is an integration between Java Script and CSS. It works just fine, but...

In an non - CSS browser, or with CSS disabled, the items in the list (wich should be hidden via object.style.visibility="hidden") show up and cover my page.

It not big deal to check for browser name and version and make the script work only in IE4+ or NS4+ and above, but the problem is: if anybody, for every reason has decided tot disable CSS in his IE4+, the result will be the same.

So, I'm asking you: has JS some way to know if CSS efectively are on?

the

if (document.body.style)
{do something...}

seems to work, but I'm afraid that all this does is to check for a newer version of JavaScript, one that has the style property of the object document built-in.

What do you think?
Thanks a lot for any help.

chrismiceli

02-27-2003, 12:41 PM

try this, don't know if it will work. you might want to try and give a hidden field a style, and then use javascript to test it, like this:

I just alter the style property of the object input , wich exists in the JS engine independently of browser settings (i.e. CSS disabled).

Catman , your solution is always the best, I know, but sometimes (and this time too) is hard enough to aply it.

Any other sugestions?

gecko

03-01-2003, 04:28 AM

I like what www.37signals.com does ... (I typically don't like to post someone else's code without permission, but I think I am giving a sufficient amount of credit to 37signals by providing links to the files)

From their html (http://37signals.com) file....

<div class="oldbrowsers">
<strong>Please note:</strong> This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please <a href="http://www.webstandards.org/upgrade/" title="The Web Standards Project's BROWSER UPGRADE initiative.">upgrade to a Web standards compliant browser</a>.
</div>

This way the text (something along the lines of, 'Go upgrade your browser') is visible to only non-CSS browsers. Sorry this isn't what you are looking for, but it is a unique approach.

claudiuiacob

03-02-2003, 12:25 PM

Thanks.

I thought at this kind of asking the user's help too.

Basically, such a thing can be included into the very first page of the site, and the users can choose the site version they have access to. Something like:

"if you're seeing this text, it means that you use an old browser, wich hasn't support for CSS. Click HERE for the plain HTML version of the site."

Also, using a combination between HTML and CSS I can make the link to the CSS version of the site invisible for old browsers (such as a black text on a black background) and visible for the CSS browsers (such as overriding the color of the text or background).

This is simple.
But that just may be anoying enough for the visitors: to have to click on a "enter here" or "here" link, each time they visit my page.

brothercake

03-02-2003, 04:40 PM

Originally posted by claudiuiacob
"if you're seeing this text, it means that you use an old browser, wich hasn't support for CSS. Click HERE for the plain HTML version of the site."

Also, using a combination between HTML and CSS I can make the link to the CSS version of the site invisible for old browsers

You have a better answer there in your own words - you can make parts of your site invisible or visible to css or non-css browsers, using css alone; that's all you need.

If you start with well-formed and semantic [x]html, in which none of the style information is in the HTML itself then that will make your site useable to plain-text and older browsers (not to mention speaking browsers and other less common user agents). By semantic HTML, I mean things like using <h1> - <h6> for headers, using <blockquote> for quotations, using <em> and suchlike - markup which carries meaning independent of what it looks like.

Then you add the visual design using CSS and javascript and you don't need to worry about how it degrades, because that bit's already sorted. It means you have no need for any of that meaningless "please upgrade your browser" nonsense.

claudiuiacob

03-02-2003, 04:59 PM

thanks, this discussion just gave me an idea to handle my problem.
Thank you all.
From my part - this subject is close.

gecko

03-03-2003, 04:58 PM

Could someone point me to some examples of using semantic HTML with CSS? Do you mean only using CSS elements found in HTML, such as only defining tags like H1, H2, etc? And not using unique CSS elements like '.text_unique' and 'a.text_unique'?