Why does Drupal 7 prefer CSS @import rules to <link> tags?

Question

"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 for the question, I just wanted to ask the same, and then found yours, thanks! — Sk8erPeter, Mar 31, 2012 at 0:23

apaderno · Accepted Answer · 2011-05-18 15:33:41Z

21

@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.

apaderno♦

94.1k15 gold badges158 silver badges280 bronze badges

answered May 18, 2011 at 7:44

Jeremy French

6,28923 silver badges37 bronze badges

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, 2012 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
– DeveloperChris
May 19, 2014 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, 2014 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, 2016 at 16:08

Add a comment |

1 Answer 1