7

I have a large CSS file, and I would like to include other CSS files for special cases using media queries.

Is it safe to use @import in CSS like this:

@media only screen and (max-width: 480px) {    
    @import url('/css/styles-480.css');    
}
Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
Wilson
  • 943
  • 1
  • 10
  • 11
  • 1
    Generally using @import is slowing the browsers display. See [this related question](http://stackoverflow.com/questions/6912899/css-import-best-practices). A basic rule in web optimization is simply to minimize the number of requests, especially sequential requests. – Denys Séguret Jan 02 '13 at 15:30

2 Answers2

15

It's not valid to have an @import within a @media rule, so what you have won't work.

The correct way to do this is even simpler — @import itself accepts a media query after the URL:

@import url('/css/styles-480.css') only screen and (max-width: 480px);

This syntax is introduced in CSS2.1 for use with media types, but media queries will also work since they're a direct extension from media types.

Remember that @import rules can only exist at the beginning of a stylesheet.

If you're concerned about load performance, you may want to use a separate <link> element in your page head to refer to this stylesheet instead of an @import, as shown by Asad. However, either way will work just fine.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
4

Instead of importing within a CSS file, I would recommend that you download the CSS file in parallel if it is required:

<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />

The problem with using @import is that the second file is only downloaded after the CSS file containing @import is completely downloaded and parsed. Regardless of whether you are overriding all your rules or some of your rules, this approach is faster, since it doesn't load the files sequentially.

Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • That depends - if the stylesheet where the `@import` is contains other styles that the OP needs to load anyway, then moving this `@import` out of that stylesheet won't make a difference. – BoltClock Jan 02 '13 at 15:34
  • @BoltClock True, I was assuming the OP was overriding all the current rules with `@import` – Asad Saeeduddin Jan 02 '13 at 15:35
  • 1
    @BoltClock Actually, that isn't true. My approach is faster regardless, because `@import` only kicks in once the CSS file has been completely downloaded and parsed. That means the files load sequentially. – Asad Saeeduddin Jan 02 '13 at 15:39
  • I was referring to the bit about loading an unnecessary stylesheet - the stylesheet will *always* be loaded regardless of where you declare it, as long as it is declared. Using a link tag is indisputably faster than using `@import`, but it doesn't always save an HTTP request. – BoltClock Jan 02 '13 at 15:41
  • @BoltClock Yeah, I was referring to `moving this @import out of that stylesheet won't make a difference.` It will, it'll keep the loading times the same if the file isn't required, and make them shorter if it is. – Asad Saeeduddin Jan 02 '13 at 15:43
  • 1
    Alright. Just trying to clear things up a bit in the comments :) – BoltClock Jan 02 '13 at 15:46