Browser support for @import

Question

Whenever I use some CSS property I check the browser support for it at www.caniuse.com , its nice website though they haven't included Opera Mini 8 yet, but still its a nice website.

Now for a project I have multiple CSS files which I am using conditionally, so I must use the @import rule, but I don't know about the browser support, also I checked at www.caniuse.com but its not there, I googled it, but every website and blog is discussing the support for @media rule, but not for @import, they only discuss that either @import is better or minifying the css using grunt etc is better.

Can someone tell me what is the browser support for @import, and can I use it or not ?

Answer 1

of course you can use @import. You asked why its not discussed at different webdesign blogs etc, so I think the reason is because its so widely supported that there is no need to discuss its support anymore.

IE 4.x has some support for the @import rule, but later versions (even IE 5 which is also considered as an older browser and nobody use it anymore) have support for @import rule.

So go for it and use it being fearless, but as you said in the question, of course there are better ways like grunt if you're already using node.js.

Answer 2

According to MDN @import is supported in all major desktop and mobile browsers, and IE/IE mobile as of 5.5+.

Also note:

Netscape 4.x and IE 3.x do not support the @import rule. Internet Explorer 6 and below do not support the media designation. IE 4.x has some support for the @import rule, but it's spotty, and it's best not to rely on it.

Answer 3

Its better not to use @import,
Its not a best practice to use @import. @import was great when there were certain browsers around that didn't understand styles, because you can say in case of an html comment, so if a user agent (browser) doesn't understand @import rule it won't import it, so you could target specific browsers using @import. But that time is passed now and every modern or a bit older browser have support of it, so there is no reason to use it over things like grunt or other technologies that combine and minify your styles and thus decreasing the HTTP requests too. @import is not as efficient as using link tag, and its not just used as widely.