Web Analytics Made Easy -
StatCounter Choosing styles using @import or <link - CodingForum


No announcement yet.

Choosing styles using @import or <link

  • Filter
  • Time
  • Show
Clear All
new posts

  • Choosing styles using @import or <link

    Just wanted to share my experience with @import and <link, in case others out there have similar problems to address:

    The Background: Because of the differences between major browsers & their different versions, I initially had 2 external stylesheets for my site: I called one "basic.css" because it had styles that practically ALL browsers can understand (like netscape & others) - which means no a:active and no a:hover among lots of other things, and I made another one called "advanced.css", to make up for the differences that the basic one didn't cover - mainly IE & Opera styles & stuff that newer browsers can figure out & render correctly.

    The Problem: I was using the @import rule to import "advanced.css", & the <link rule to apply "basic.css" styles, since netscape ignores @import... but my site was still showing some bugs & it was driving me crazy trying to find any errors in my coding.

    I found out after doing TONS of net searches (& book page-flipping) that @import is not reliable and doesn't always work. I wanted IE & Netscape (& related browsers) to use the appropriate styles so that they'll both behave when on my site.

    The Fix: I listed the "basic.css" first, using the <link tag. Next, I listed the "advanced.css" using a <link tag as well, but also adding a TITLE attribute to it because Netscape (& others) don't like it & ignores the stylesheet altogether, which is what I want it to do anyway cuz' the styles in it were incompatible/buggy with 'em.
    In the meantime, IE (& related browsers) picks up the "advanced.css" styles with the TITLE and applies it, overwriting any of the "basic.css" styles that would normally make it act buggy or render incorrectly.

    Basically, the TITLE attribute saved my site and now things look the same & look good in Netscape 4 thru 7, IE 3 thru 6, and Opera 3.5+. And if for some reason, the person had a CSS-impotent browser, my site still looks good & legible, which is a huge plus. It's nice to have all that hard work pay off - trying to make both compliant & noncompliant browsers behave with some conformity & play nice... Yay!

    Just out of curiosity... I'm sure there are tons of other ways to apply one stylesheet to one browser-type, and a different stylesheet for another browser-type. Anyone wanna list other workarounds for the rest of us to toy with?!?

    Anyone, anyone? Bueller? Bueller?
    ~ J&J ~
    "Sometimes I feel like I'm rearranging deck chairs on the Titanic."

    Work | Family | Community