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 '12 at 0:23

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

22

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

kiamlaluno♦

81.2k10133252

answered May 18 '11 at 7:44

Jeremy French

5,9842037

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 – DeveloperChris 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

add a comment |

1 Answer 1