...

View Full Version : How can I use JS to check the browser for CSS support?



claudiuiacob
02-27-2003, 07:22 AM
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:

<input type="hidden" style="color: red">
<script type="text/javascript">
if (document.elements[0].style.color != "red") {
do something
}
</script>

than again that might work if css isn't enabled.

Catman
02-27-2003, 01:35 PM
The solution, I think, is to make sure the page renders in a way that is functional if CSS is disabled for any reason.

claudiuiacob
02-28-2003, 10:29 AM
First thank you all.

to chrismiceli :

it will work, even if CSS are disabled: when I write :


<input type="hidden" style="color: red">
<script type="text/javascript">
if (document.elements[0].style.color != "red") {
do something
}
</script>



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>

From their css file (http://37signals.com/simple.css), class "oldbrowsers"....
.oldbrowsers {
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 0px;
color: #c00; }

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'?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum