CSS Forum

**TWD** · 10-20-2011, 08:44 PM

Came across this article this morning.

Conditional comments block downloads / Stoyan's phpied.com

Reading through it, the key takeaway is that placing an empty
conditional IE statement at the top of your page eliminates a bottleneck
in CSS style sheet processing when there are IE6 and IE7 style sheet references later on the page.

So best practice would seem to go something like this:

Code:

<!DOCTYPE html>

<!--[if IE]><![endif]-->

<html lang="en">

<head>

    <title>base page</title>

    <link type="text/css" rel="stylesheet"
          href="http://tools.w3clubs.com/pagr/1.expires.css">

    <!--[if IE 6]>
        <link type="text/css" rel="stylesheet"
              href="http://tools.w3clubs.com/pagr/2.expires.css">
    <![endif]-->

    <!--[if IE 7]>
        <link type="text/css" rel="stylesheet"
              href="http://tools.w3clubs.com/pagr/3.expires.css">
    <![endif]-->

</head>

<body>
The content of the document......
</body>

</html>

In the comments to this post, it was also suggested that if
you are using @import for loading your style sheet, you might want
to try adding an empty <link> element like this:

Code:

<!--[if IE]><link/><![endif]-->

as it additionally fixes the @import FOUC problem well known to exist in IE

Flash of Unstyled Content (FOUC)

Anyone doing this? Comments?

**FrankknarF** · 10-21-2011, 10:09 AM

On the FOUC page, it gives as solution to add a <link>:

Quote:

<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "style.css";</style>
</head>

But why use @import at all? Why not just do it like this:

Code:

<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

?

**TWD** · 11:14 AM

Good question.

I believe some people like to "chain" CSS style sheets to a master CSS.

http://webdesign.about.com/od/advanc..._at_import.htm

**FrankknarF** · 10-21-2011, 12:15 PM

OK, but under normal circumstances, I really wouldn't know why one would want to divide the CSS basics, typography, colors and layout over 4 style sheets, and have those imported by one main style sheet.

**vangogh** · 10-21-2011, 02:20 PM

Interesting. Totally new to me, but something that's worth investigating.

The @import is more used in a single css file to manage other css files. It can keep things a little cleaner and make it easy to swap out one set of css rules for another. I think it's always had performance issues though.