Не используйте @import
Вольный перевод статьи
Автор:
В данной статье автор приводит наглядные доказательства, почему не стоит использовать @import для загрузки стилей в документ.
LINK vs. @import
Существует 2 способа загрузки файлов стилей. Использовать тег LINK:
<link rel='stylesheet' href='a.css'>
Или импортировать файлы с помощью @import:
<style>
@import url('a.css');
</style>
Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что @import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.
Новости примадонны отечественного шоу-бизнеса, Аллы Пугачёвой.
Все еще ищите хостинг для своего проекта?
@import @import
Я хочу рассказать о различных способах использования LINK и @import. В приведенном ниже примере прописаны 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем. В первом примере используется @import для загрузки обоих файлов стилей. В этом примере, называемом , HTML документ содержит следующий блок стилей:
<style>
@import url('a.css');
@import url('b.css');
</style>
Если вы всегда будете использовать только @import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (см. рисунок 1) Но проблемы начинают появляться, если использовать @import внутри файла стилей, либо вместе с LINK.
Рис. 1.
LINK @import
В примере используется тег LINK для загрузки a.css, и @import для b.css:
<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>
В IE (тестировалось в 6, 7, и 8), это привело к тому, что файлы загружаются последовательно друг за другом, как показано на рисунке 2. Соотвественно, время загрузки страницы в IE увеличится.
Рис. 2
LINK с @import
В примере , файл a.css загружается через LINK, и содержит внутри правило @import для b.css:
В документе:
<link rel='stylesheet' type='text/css' href='a.css'>
в a.css:
@import url('b.css');
Этот способ также приводит к тому, что файлы загружаются последовательно (рис. 3.), а не параллельно, но теперь это происходит не только в IE, но и остальных браузерах. Если подумать – все логично: браузер загружает a.css и начинает парсить его. Обнаружив внутри правило @import, начинается загрузка файла b.css.
Рис. 3.
Блоки LINK с @import
Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. LINK используется для вызова a.css и для нового файла proxy.css, который содержит только @import для b.css.
:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
В proxy.css:
@import url('b.css');
Результаты эксперимента в IE показаны на рисунке 4. Первый запрос – HTML документ. Второй запрос - a.css (2 секунды). Третий – proxy.css. Четвертый – b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5).
Рис. 4. Результаты в IE.
Рис. 5. Результаты в других браузерах.
Много @imports
Использование в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде. В этом примере используется 6 файлов стилей (каждый из которых загружается по 2 секунды), за которыми следует JS скрипт (4 секунды для загрузки).
<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src='one.js' type='text/javascript'></script>
На рис. 6 вы увидите, что самый долгий по загрузке – это скрипт. Несмотря на то что он указан после стилей, в IE он загружается первым. Если в скрипте содержится код, который зависит от применяемых стилей (getElementsByClassName, и т.п.), это может привести к ошибкам работы скрипта, т.к. он загружается прежде чем стили.
Рис. 6.
LINK LINK
Проще и безопасней использовать для загрузки стилей:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='b.css'>
Использование LINK обеспечивает параллельную загрузку файлов во всех браузерах (см. рисунок 7). Применение LINK также гарантирует, что файлы будут загружены именно в том порядке, который указан в коде документа.
Рис. 7.
Для нас особенно плохо то, что ресурсы могут быть загружены в другом порядке, нежели указано в документе. Все браузеры должны заглядывать наперед перед загрузкой стилей для извлечения правил @import и начинать их загрузку немедленно. До тех пор, пока браузеры не реализуют это, я советую избегать использование @import и загружать стили только с помощью LINK.
Еще записи на эту тему
Dmoz
ну раз так, то и не буду
а вобще и не привилась привычка использовать @import
Цитировать
а вы в код этой странички заглядывали?
@import url(http://www.getincss.ru/wp-content/themes/perfect-tabs/style.css); @import url(/wp-content/plugins/postratings/postratings-css.css);@import url(/wp-content/themes/perfect-tabs/css/ui-tabs.css);@import url(/wp-content/themes/perfect-tabs/css/print.css);Цитировать
Я прекрасно знаю свой код ;) Мне придется пока это оставить, как раз как показатель.
Цитировать
оригинальная статья обновилась! добавили ещё 2 метода, более реальные в использовании на приктике как по мне…
Цитировать
Неубедительно, причем весьма. @imports позволяет грузить файлы стилей параллельно, не препятствуя отрисовке странички и это есть главное его преимущество. А единственный весомый аргумент против – проблемы при многочисленных @imports неубедителен, так как на на практике я не встречал больше двух таблиц стилей для профессионально сделаных движков и, тем более, статических страничек. Также с использованием @imports и LINK – я думаю веб-мастер не-ламер не будет использовать разные методы.Ну а что касается Ослика, то его уже пора хоронить, а Вы все пытаетесь его воскрешать различными подгонами и ухищрениями, продлевая его агонию и мучая себя ;=) Может все-таки закопаем?
Цитировать
вообще не использую import, всегода только Link
Цитировать
Спасибо, теперь +1 в корзину против @import. Я недавно смотрел семинар Яндекса по верстке, и там рассказывали свои технологии. Так вот там используют импорт, но при загрузке некий скрипт обрабатывает всё таки образом, что бы @import заменить на содержимое файла, который он импортирует. Но Это Яндекс, со своими миллионными запросами, а обычным людям такого не надо =). Они предпочитают @import из за того, что LINK делает лишние http запросы.
Цитировать
То что ты на практике не встречал больше двух таблиц стилей ни о чем не говорит. И тут всё зависит не от профессионального движка, а от разработчика. У меня например 5 файлов стилей прибито почти всегда. Обычный, для IE, версии для печати, для визуального редактора (в CMS MODx), Иногда предпочитаю вынести отдельный файл стилей для IE7. Ослика еще рано хоронить, 2 года ему еще даю, минимум.
Цитировать
Согласен с постом. Всегда косо смотрел на @import.
@Chrono, на wow.ya.ru там практически везде используется @import в больших количествах. А я еще удивлялся – по логике вещей фреймверки не используются громосткие, а грузиться на диалапе долго по сравнению с другими более громоздкими сайтами.
Цитировать
Как-то привык разделять стили на:
main.css
header.css
content.css
footer.css
Физически не могу уже писать стили в одном файле.
Но у меня лично вопрос в другом: выгоднее ли для больших проектов (от 50 разных страниц) писать для всех страниц общие стили и потом для каждой страницы свой файл стилей, чтобы быстрее грузило или же при серфинге по сайту лучше написать один большой файл стилей для всех страниц и потом его прокешит и не будет грузить?
Цитировать
@almaz,
выгоднее написать общий файл стилей + отдельные для каждой страницы. Ведь юзер на все 50 сразу не зайдет, зачем ему лишние кб грузить?
Цитировать
Логично. Я просто спрашиваю мнения, т.к. вот есть проект на 70 страниц. Грузить я так понимаю через линк потом нужное в каждой странице? А то с импортом непонятно до конца. То пишут, что он параллельно грузится, то последовательно. А Если ИЕ для этого дела брать, то он вообще больше 2-х запросов ведь не обрабатывает, так что ему должно быть пофигу как грузить стили. Нет?
Цитировать
@almaz,
Смешивать LINK и @import, а тем более если есть скрипты – точно не стоит. Подгружайте через LINK и проблем не будет и в IE тоже.
Цитировать
Спасибо, опробую метод, хотя, честно говоря у меня и с импортом проблем не было никогда. В смысле, что даже на ИЕ этого особо не заметно при загрузке на слабых каналах.
Цитировать
И @import тоже делает, иначе никак.
На Yahoo Developer Network @import препятствует прогрессивному рендерингу страницы в IE.
Множество отдельных файлов повышают нагрузку на сервер из-за дополнительных HTTP-запросов. Может быть тебе будет полезно объединить, например, Обычный и версии для печати, если они оба появляются на всех страницах. Я думаю, разделять можно, если какая-то часть CSS-правил относится только к отдельному разделу ─ чтобы не загружать лишние правила, если посетитель даже не зашёл в этот раздел.
Хотя HTTP 1.1 имеет директиву Keep-Alive, благодаря которой открывается только одно TCP/IP-соединение для всех файлов… Но все почему-то всё равно гонятся за снижением обращений к серверу.. (все эти CSS-Sprites или даже base64-кодирование изображений..) Никто не знает, почему, а?
Цитировать
В ярушечке используется подход верстки “независимыми блоками”, описанный Чикуенком, очень удобный подход. для ие используется условные операторы, которые, действительно подключают скрипт, заменяющий @import на линк, или подключают отдельный css, который собирается спец для ие, для других же браузеров оставляют @import. Разбивают проект на папки, в каждой папке лежит верстка одного блока, в каждой такой папке есть и html, который всегда можно поправить отдельно в ней же.
Цитировать