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

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.