SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast cliffgs's Avatar
    Join Date
    Aug 2003
    Location
    West Coast, New Zealand
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding css from old browser

    Hi

    I know how to hide style code from old browsers with the comment delimiters when the <style> </style> commands are in the head. I suppose the same is true if they are inline styles.

    But can someone tell me where to put the comment marks when the stylesheet is linked to? Are they put in the .css file? If not, where would I put them.

    Many thanks for any help. I am sorry about such a basic question, but it does have me stumped.

    Cliff
    Christchurch
    New Zealand

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If you want to hide styles from old browsers, put them in a separate stylesheet and link to the stylesheet like so:
    HTML Code:
    <style type="text/css" media="screen">
      @import url('/path/to/file.css');
    </style>
    Just replace the path with the path to your stylesheet. @import will be read by newer browsers (version 5 or newer of most major brand-name browsers), and will be ignored by older browsers like Netscape 4.

  3. #3
    SitePoint Enthusiast cliffgs's Avatar
    Join Date
    Aug 2003
    Location
    West Coast, New Zealand
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I wondered what the @import was for. Know I know, I think obviously that is the only way to import stylesheets.

    Thanks for your help.

    Cliff

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wondered what the @import was for.
    Consider the following:

    document 1 links to style1.css
    document 2 links to style2.css

    style1.css and style2.css BOTH import style3.css

    This way, common styles can be defined in one place. For example, you could do all the page layout in style3, and colours in style1 and style2, thereby allowing you to divide your site in two, with both parts having the same layout but different colour schemes.

    That is the sort of thing @import is *FOR*. Of course, the fact that older browsers ignore it is kinda useful, too.

  5. #5
    SitePoint Enthusiast cliffgs's Avatar
    Join Date
    Aug 2003
    Location
    West Coast, New Zealand
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. What a really useful and helpful site this is.

    Cliff

  6. #6
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In reference to your original question, if you want to hide the CSS from browsers that do not understand it, then you only need to worry about <style></style>. Browsers ignore tags and attributes that they don't understand, and just display the contents of the tag. While this causes what's in the style tags to appear, it's also what causes the browser to ignore the link tag or inline style attribute.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  7. #7
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    If you want to hide styles from old browsers, put them in a separate stylesheet and link to the stylesheet like so:
    HTML Code:
    <style type="text/css" media="screen">
      @import url('/path/to/file.css');
    </style>
    Just replace the path with the path to your stylesheet. @import will be read by newer browsers (version 5 or newer of most major brand-name browsers), and will be ignored by older browsers like Netscape 4.
    Vinnie, the CSS for www.saynotogmos.org/redo/index.htm won't validate when the media="screen" is added to the @import. The Box Model hacks needed for IE 5.5 were flagged as errors. It seems to work fine without the media="screen". Will that be a problem? BTW, have got a NN4x linked stylesheet going now that degrades pretty gracefully.

  8. #8
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the box model hack uses voice-family, you can't use media=screen. You would need to do media="screen,aural" or media="all" for it to validate.
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  9. #9
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ucahg
    If the box model hack uses voice-family, you can't use media=screen. You would need to do media="screen,aural" or media="all" for it to validate.
    Thanks, I'll give it a try. Would it screw anything up if there were no media designation like I have it now? Or do I need to specify something?

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by earther
    Thanks, I'll give it a try. Would it screw anything up if there were no media designation like I have it now? Or do I need to specify something?
    If at some point you wanted to make a print style sheet (media="print") then you would have to override all the styles declared under media="all" (the default) which could be a pain.

    Douglas
    Hello World

  11. #11
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can actually filter away specific browsers based on how/where your CSS works.

    Centricle.com has an amazing grid for this:
    http://centricle.com/ref/css/filters/ :-)


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
  •