Geek Answers Handbook

Effective difference between html head for CSS tags: @import url vs. link href

Is there an 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">

Is the browser different from each other?

What is recommended from w3c etc.?

+5
source share
3 answers

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

  • Use @importmay result in unexpected ordering of how they load.
  • @importa blank white screen may cause the problem .

For more information on website performance, refer to High Performance Websites .

+3

. , ,

,

+2

: simple.css( ) modern.css( CSS2, simple.css)

"import.css", :

@import "modern.css";

simple.css import.css HEAD :

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

CSS1 simple.css import.css, @import, modern.css. modern.css simple.css, simple.css.

.

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

@import simple.css....

According to CSS specifications, @import rules must precede any other CSS rules in the stylesheet, so this creates the need to place them in your stylesheet for these purposes.

+1
source

More articles:


All Articles