Arty Ziff Posted May 7, 2011 Share Posted May 7, 2011 What is the difference / purposes between: <style> @import "/some/path/somefile.css"; </style> verses <link rel="stylesheet" href="/some/path/somefile.css" /> I'm working with a MooTools modal app that does not work without the @import and only the <link ... />. I find this odd. Quote Link to comment Share on other sites More sharing options...
Zane Posted May 8, 2011 Share Posted May 8, 2011 @import is only convenient if you have multiple stylesheets. It's pretty much the equivalent to PHP's include function. Using link is pretty much the standard way to get external stylesheets, but using @import instead isn't really looked down upon (at least I think so). It may or may not save you a few milliseconds on load time. And the most obvious differences... - @import is a CSS function - is embedded in the of the HTML. Meaning it's probably cached. Quote Link to comment Share on other sites More sharing options...
freelance84 Posted May 9, 2011 Share Posted May 9, 2011 @import is only convenient if you have multiple stylesheets. It's pretty much the equivalent to PHP's include function. Using link is pretty much the standard way to get external stylesheets, but using @import instead isn't really looked down upon (at least I think so). It may or may not save you a few milliseconds on load time. And the most obvious differences... - @import is a CSS function - <link> is embedded in the <head> of the HTML. Meaning it's probably cached. Interesting... how do you mean by it will be cached properly? Surely the style sheet still gets downloaded and saved in the temp internet files on the clients comp? Quote Link to comment Share on other sites More sharing options...
Zane Posted May 9, 2011 Share Posted May 9, 2011 I don't exactly know what I was getting at on that point.. I was more or less just mentioning that link is inside the header, whereas a style tag (i.e the @import) could be placed anywhere else in the page. Ideally, you want everything like that in the header... and if for some reason you have multiple stylesheets... or a snippet of CSS you want to import in case of IE7, then you can use @import for that convenience. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted May 10, 2011 Share Posted May 10, 2011 During the first "Browser Wars", @import was used as a hack for hiding stylesheets from Version4 browsers and lower (varied support for CSS1). The CSS2 @import rule was not understood by V4 and lower browsers (and therefore the Stylesheets they referenced were ignored). People continued using it even after IE won the wars (like people today still use old deprecated html and invalid code even with transitional doctypes). HOWEVER, the reasons it is better to use LINK instead of @import, are: 1. there are certain performance advantages - particularity for IE 6 - 8 2. IE loads and parses the referenced files within @import sequentially (first one then another taking 2 seconds each) - this makes the page slower to finish. LINK, however, loads and parses the files all together in parallel - making the files available quicker and the page ready faster. 3. @import can create problems with JavaScript - IE loads script tags before style tags; if you have styling in the script that relies on a loaded css file (like getElementsByClassName) the resource is not going to be available and the results unpredictable. Using LINK ensures that the Stylesheets are loaded in parallel AND in the specified order. Hope this helps put it into proper perspective. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.