Javascript & CSS

[alex_read]

Hi people!

I'd like my site's menu hyperlinks to be bold & be a taller size when the mouse rolls over them. I'd like this effect to happen whether the user's browser supports CSS, JS or both.

How could I check through Javascript whether the browser supports CSS please? If the user's browser does support CSS, the Javascript won't need to run as well. I've tried to following, but without success:

if (document.styleSheets == null) {
    document.getElementById(hlnkToAlter).style.fontWeight = 'bold';
    document.getElementById(hlnkToAlter).style.fontSize = '14px';
}

if (document.styleSheets [0].disabled == false) {
    document.getElementById(hlnkToAlter).style.fontWeight = 'bold';
    document.getElementById(hlnkToAlter).style.fontSize = '14px';
}

[sciguyryan]

The best way to check if the browser suports CSS if to do this:

<script type="text/javascript">
  <!--
    if (document.body.style){
      // What to do is CSS us available.
    }
  //-->
</script>

Cheers,

RyanJ

[alex_read]

Fantastic!!! Thank you!

Just 1 more question before/while I test that. Will this work for both IE & Netscape/Mozilla please?

[sciguyryan]

Fantastic!!! Thank you!

Just 1 more question before/while I test that. Will this work for both IE & Netscape/Mozilla please?

Yes it will

The body style attribute is available for all css scriptable browsers

Cheers,

RyanJ

[CornedBee]

Actually, it will work for neither. The presence of the style attribute means nothing.
Even if you completely disable styles in Firefox, for example, the style attribute will still exist. Similarly, Links2 has a DOM implementation but doesn't support CSS. If an element has a style="" attribute in the HTML, the DOM object of the element will have a value for the style property, but this still doesn't mean that CSS exists. (It doesn't. Links2 is a console-based browser that doesn't do anything with CSS.)
Next, in general JS is far more likely to be disabled than CSS. You need to use some tricks to actually disable CSS in Firefox or IE. It's a simple preference for JS. In general, if JS exists at all there's about a 99.9% chance that CSS exists as well, exempting very old browsers such as Netscape 3. 4 already had some rudimentary CSS, as did IE3. However, by today's standard, these implementations are so incomplete that they're practically unusable - something not detectable by JS at all.

To go on, your whole idea is, I'm sorry to say it, absolute nonsense. What you're trying to do is to catch a case in which a browser doesn't support CSS, so that you can use JavaScript to set CSS properties (which aren't understood anyway) on objects. Catch the error in your thinking?

The solution is to implement the thing you have only in CSS: if a browser doesn't support CSS, it's probably because the user doesn't care about presentation and thus about rollover effects. In other words, you're trying to circumvent either a preference of the user, which is a very bad idea, or a technical shortcoming of the user's client, which is just plain impossible. A console-based browser won't give you a different font size no matter what you do.

[alex_read]

Ok, from looking at it in that perspective, yes you're absolutely right. Iwas trying to code up for every eventuality, but I guess I am accessing/trying to set the styles in JS anyway - whoops!

Oh well, thanks for that note!! :P