25

"Don’t use @import," lots of guys say.

There are lots of shortcomings of using @import.

  • Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
  • Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.

Why does Drupal 7 use it?

I want to change the @import rules to <link> tags. How can I do this?

1
  • 1
    +1 for the question, I just wanted to ask the same, and then found yours, thanks!
    – Sk8erPeter
    Mar 31 '12 at 0:23
22

Don't use @import to import css files:

@import is used only in non-CSS aggregation mode. This is done to workaround IE limitation with the number of tags.

This should explain the reason and how to get rid of it. Any production site should use CSS aggregation, and not have @import.

4
  • 1
    +1, thanks for the answer. So this is a workaround for what IE CSS Optimizer module (drupal.org/project/ie_css_optimizer) had to be used in Drupal 6 to fix the issue that Internet Explorer refuses to load more than 31 linked stylesheets.
    – Sk8erPeter
    Mar 31 '12 at 1:10
  • I know this is a few years later and most sane people don't use IE. unfortunately I don't work for most sane people. When using respond.js in IE 8 it fails to work using @imports. this gotcha can be hard to find May 19 '14 at 4:15
  • As for me i have never bumped in IE tags limitation. So it seems like stupid decision. Override of problem that almost never happens. If there are a lot of CSS files you have to think how to merge most part of them. In order to speed up page loading.
    – Rantiev
    Jun 30 '14 at 10:32
  • -1, This answer doesn't answer the two questions in the original post. Why does Drupal use @import and how do we change it?
    – Colin
    Sep 14 '16 at 16:08

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .