effective difference between html head for css tags?: @import url vs. link href

Question

Is there a effective difference between

<style type="text/css">@import url(/css/layout.css) all;</style>

and

<link href="/css/layout.css" type="text/css" static="all" rel="stylesheet">

Do browser behave different ?

What is recommended from w3c etc. ?

Answer 1

Begin with two stylesheets: simple.css (only simple rules for early browsers) modern.css (advanced CSS2, rules to override rules in simple.css)

Create a third stylesheet "import.css" containing only:

@import "modern.css";

Link the simple.css and import.css in the HEAD of the document:

<link rel="stylesheet" type="text/css" href="simple.css" />
<link rel="stylesheet" type="text/css" href="import.css" />

All CSS1 browsers will load simple.css and import.css, however, only modern browsers will understand the @import rule and also load modern.css. Since modern.css is linked after simple.css, its rules will override those in simple.css more easily. Alternate Syntax

Different versions of the import rule have varying levels of support from older browsers.

@import "style.css";      /* hidden from nearly all v4 browsers  */
@import url('style.css'); /* IE4 can understand, but not NN4 */
...

We should not put @import at the bottom of simple.css....

According to the CSS specs, @import rules must precede any other CSS rules in a stylesheet, so this creates the need to place it in its own stylesheet for these purposes.

Answer 2

There are several reasons that you should use <link> instead of @import, 2 of them are:

1. Using @import may cause unexpected ordering in how they are downloaded.
2. The @import may cause blank white screen problem.

for more information about performance of websites, pls refer High Performance Web Sites.