SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    vi
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css aand Browser switching

    Does anyone know of a javascript or some coding that allows you to switch style sheets based on the borowser being used.

    I tried this script and it does not work.


    <SCRIPT LANGUAGE="Javascript">
    <!-- var bIsIE = navigator.appName == "Microsoft Internet Explorer" var bIsIE4 = bIsIE && navigator.appVersion.indexOf("4.0") > -1
    if (bIsIE4)
    { sCSS = '<LINK REL="stylesheet" TYPE="text/css" HREF="nfi2.css">' }
    else
    {
    if (bIsNS)
    { sCSS = '<LINK REL="stylesheet" TYPE="text/css" HREF="nfi2mo.css">' } }
    document.write(sCSS) file://-->
    </SCRIPT>

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Berlin
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Judging by the example the reason for doing this is to hide css from old browsers and to feed Internet Explorer different styles from all the other browsers.

    You can do this without JavaScript by using the media atttribute and conditional comments:

    HTML Code:
    <link rel="stylesheet" href="style.css" type="text/css" media="screen,tv,print,projection" />
    <!--[if lt IE 7]><link rel="stylesheet" href="iestyle.css" type="text/css"><![endif]-->
    The media="screen,tv,print,projection" hides the stylesheet from old browsers. The contents of the comment <!--[if lt IE 7]>...<![endif]--> are treated as a comment by all browsers except IE > 5 and < 7 (I am assuming MS will produce a proper browser in the next version). So in iestyle.css you can put rules to fix all the things that IE gets wrong, while it deals with the things it gets right as specified in style.css.

    If you want to activate/deactivate stylesheets for a different reason, you can set the 'disabled' attribute of the link node referring to the stylesheet to true or false (demo here).

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    HTML Code:
    <style type="text/css" media="screen, projection, tv">
    <!--
    /*IE stylesheet*/
    @import "ie56.css";
    /*override for good browsers*/
    @import "enhanced.css" screen, projection, tv;
    -->
    </style>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •