David

Topic: Browser-specific @imports

One idea I have been considering is if it's cleaner to have different import statements for different browsers from one master stylesheet. As of now, I use a minimal amount of browser-specific "hacks" in the base stylesheet. But there are ways to import stylesheets instead of using inline hacks, like ex:

Code:
@import: url("ie.css");

(note the colon) Only IE will import this stylesheet. We could do the same for opera and IE5/mac, but since these rules are minimal, I'm just not very comfortable having too many server requests for such little code.

In general, I like the conditional comments way of targeting IE, because I know it always works and it's future-proof; no-one really knows how future versions of IE will treat weird CSS hacks that have worked before.

On the other hand - I kind of like the idea of having only one stylesheet in the HTML source and then import the needed fixes for each browser.

Any thoughts?

David's Website

maniqui

Re: Browser-specific @imports

Hi David,

that was something I didn't get on your replies at the blog post: why IE5/OSX hacks couldn't go directly on the IE style sheet? As I understand you're saying they need to be on their own standalone style sheet, why?

I prefer the CC way too.
Also, although the idea of linking just one stylesheet is appealing, I think it's more a matter of user preference. In fact, you have already done it on tripoli.css and tripoli-ie.css, or am I wrong?

Finally, regarding the order of linking the stylesheets, this is the one I currently prefer:

Code:

<!-- Tripoli - a CSS standard for HTML rendering -->
    <link rel="stylesheet" href="/css/tripoli.base.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/css/tripoli.visual.css" type="text/css" media="all" />
<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="/css/tripoli.base.ie.css" media="all">
<![endif]-->
<!-- / + info: http://devkick.com/lab/tripoli/ -->

<!-- my own set of style sheets, so I can easily override any Tripoli default, even IE specific rules -->
    <link rel="stylesheet" href="/css/mycss1.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/css/mycss2.css" type="text/css" media="all" />

<!-- Tripoli - (print CSS) -->
 <link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<!-- / + info: http://devkick.com/lab/tripoli/ -->

<!-- finally, my own IE-specific style sheet, it lets me override (for IE6/7, of course) any rule on any stylesheet above, doesn't matter which one (tripoli, my own set, print, etc) -->
<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="/css/ie-custom.css" media="all">
<![endif]-->

What do you think?

Last edited by maniqui (2008-05-15 13:03:58)