hiding style sheets from old browsers

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I've been getting frustrated trying to keep my style sheet from causing problems with old netscape and I came a cross a technique to hide advanced css from old browsers that seems to be very useful.

If you import a style sheet like this, the old browser won't see it:

Code: [ Select ]
<style type="text/css">

 @import url(new.css);

</style>
  1. <style type="text/css">
  2.  @import url(new.css);
  3. </style>


If you combine that with a standard link to an external style sheet:

Code: [ Select ]
<link href="default.css" rel="stylesheet" type="text/css">

<style type="text/css">

  @import url(new.css);

</style>
  1. <link href="default.css" rel="stylesheet" type="text/css">
  2. <style type="text/css">
  3.   @import url(new.css);
  4. </style>


the old browser will see the first style sheet but not the imported one and the new browser will see both with any identical names being overriden by the imported one.

If you go through your style sheet and separate out all the css that is causing problems in older browsers and keep it in the imported one, you can provide a basic css implementation for old browsers and an advanced one for new browsers. Of course, this won't help if the css problem is an inline style since that will override any of the above.

I'm testing this out on an offline version of my site and it seems quite promising so far.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Hmm interesting info. Is that what the purpose of the @import feature is for? I have seen it around before but have never looked into what its purpose is.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Apparently, although I'd never used it before it's working so far. One small caveat though - if you want to put anything else in the style tag with the @import you have to make sure import comes first.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Simply add SGML comments to the style sheet. Works the same as importing.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Could you provide an example - I'm not getting any results with NE 4.08

I was thinking in terms of browsers like NE 4.x that have buggy support for css. I think enclosing the embedded style sheet in sgml comments only prevents it from appearing onscreen in really old browsers like NE3 if that's what you meant.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:

Code: [ Select ]
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
  1. <head>
  2. <style type="text/css">
  3. <!--
  4. hr {color: sienna}
  5. p {margin-left: 20px}
  6. body {background-image: url("images/back40.gif")}
  7. -->
  8. </style>
  9. </head>


From w3schools:

http://www.w3schools.com/css/css_howto.asp
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Yes, that hides it from browsers that don't support styles, but not from browsers like ne 4.x that have bad support. I should have given the original post a different title besides "old browsers" - but I've started thinking of ne 4 as being old netscape. Some of the margins and padding in my divs seem to be causing netscape to crash with an invalid page fault, although I've never been able to tell exactly what the problem is, so I'm importing the troublesome stuff because ne4 doesn't recognize @import. I also found out that it doesn't recognize any media type besides screen so if you set media="all" in the link to an external style sheet it will ignore it as well.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

By using the word "hide" in your original post, I thought you meant "hide". What I see you actually mean is that you don't want old browsers like NS 4.x to parse certain elements of style. Now it makes sense after you discuss the browser crashes etc. With that in mind, yes, your @import method works very well. And thanks for reminding me of it. I had almost forgotten that's available.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I did mean "hide" portions of css that were causing problems as I said in the original post because ne4 and ie3.02 won't even place an @import into memory. There are several ways that prevent ne4 from parsing certain lines of a style sheet, but I don't like that approach. It seems to be too error-prone when editing the css, and it results in a confusing style sheet. @import seems to function in a way that is almost analogous to an #include in c/c++. If the browser doesn't support @import it's as if the imported styles aren't included in the final style sheet, so they are "hidden" in my opinion.

I see how the subject of the original post could be misleading and appear to refer to the other method of hiding css from browers that don't support it, so I will try to be more clear in the future.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

and a very good work-a-round.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 68 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.