Опубликовано автор в категориях Верстальщику.

linlvsimpotr
Прежде чем решить, какой метод следует использовать для привязки CSS к вашей веб-странице, нужно понять суть и предназначение каждого метода.

<link> — это базовый, я бы сказал основной, метод подключения CSS к странице. Он позволяет связать веб-страницу и CSS-стили. Вызов добавляется между <head>и</head> вашего HTML документа, например:

<link href="styles.css" type="text/css" />

@import — Импорт позволяет импортировать одну таблицу стилей в другой. Он работает несколько иначе нежели «линк», так как вы можете импортировать таблицы стилей внутрь связанной через «линк» таблицы стилей. Но не желательно включать @import между <head>и</head> вашего HTML документа, например:

<style type="text/css">@import url("styles.css");</style>

С точки зрения стандартов, нет разницы между ссылкой на внешние таблицы стилей или их импортом. В любом случае это правильно, и в большинстве случаев это будет работать одинаково хорошо. Но есть несколько причин, которые могут склонить вас к использованию одного из них.

Зачем использовать @import?

Наиболее распространенная причина использования @import вместо (или вместе с) <link> состоит в том, что старые браузеры не распознают @import, поэтому вы можете таким образом спрятать от них стили. В частности:

скрыть таблицу стилей от Netscape 4, IE 3 и 4 (но не 4.72):

@import url(../style.css);

скрыть таблицу стилей от Netscape 4, IE 3 и 4 (но не 4.72), Konqueror 2 и Amaya 5.1:

@import url("../style.css");

скрыть таблицу стилей от Netscape 4, IE 6 и ниже:

@import url(../style.css) screen;

скрыть таблицу стилей от Netscape 4, IE 4 и ниже, Konqueror 2:

@import "../styles.css";

Еще одно применение для метода @import заключается в том, чтобы использовать несколько таблиц стилей на странице, но вызывать только одну таблицу в <head>. Например, корпорация может иметь глобальные таблицы стилей для каждой страницы на сайте, с подразделами, имеющими дополнительные стили, которые применяются только к этому подразделу. Связывая ссылкой суб-таблицы стилей и импортируя глобальные стили в верхней части суб-таблицы стилей, вам не придется сохранять гигантскую таблицу стилей для всего сайта в суб-таблице для подраздела. Единственное важным требованием является то, что любые правила @import должны быть введены перед остальной частью вашего файла стилей. Также необходимо следить за тем, чтобы не возникало проблем с наследованием стилей.

Зачем использовать <link>?

Одной из наиболее весомых причин в пользу использования связанных через <link> таблиц стилей является возможность использования альтернативных стилей для ваших клиентов. Такие браузеры как Firefox, Safari и Opera поддерживают атрибут rel="alternate stylesheet" и когда есть возможность позволяют пользователям переключаться между таблицами стилей. А для переключения между таблицами стилей в IE придется использовать JavaScript свитчер. Такой способ наиболее часто используется для подключения стилей для страниц в увеличенном формате. Как известно, IE не способен нормально увеличивать страницы, поэтому вы можете предложить альтернативный CSS.

Одним из недостатков использования @import является то, что если у вас есть очень простой <head> только c правилом @import, ваши страницы могут отображаться некорректно, в основном в IE6 с так называемым эффектом FOUC. Простым фиксом этой проблемы является внедрение в <head>, по крайней мере, одного дополнительного элемента <link> или <script>.

Как насчет Media Type?

Многие пишут о том, что можно использовать media type для сокрытия таблицы стилей от старых браузеров. Зачастую, этот довод приводится в пользу <link> при сравнивании способов подключения таблиц стилей, но подвох заключается в том, что на самом деле можно использовать media type в обеих случаях, и браузеры, не поддерживающие media type не будут видеть таблицы стилей. Например, Netscape 4 не распознает media type, так что вы можете использовать как связанную через <link> таблицу стилей, чтобы скрыть стиль от этого браузера, так и правило @import:

    <link href="styles-nons4.css" media="all" type="text/css" />

Но вот в некоторых версиях IE (6 и ниже) не поддерживается тип носителя при использовании правила @import, так что вы можете использовать это, чтобы скрыть таблицу стилей от них:

    <style type="text/css">@import url(styles.css) all;</style>

Итак, какой метод нужно использовать?

Лично я, как и автор статьи, предпочитаю использовать <link>, а затем импортировать таблицы стилей в мой внешний файл стилей. Таким образом, я имею только 1 или 2 строки кода в своем html-документе. Но в общем, все зависит от вас. Если вас больше устраивает @import, то используйте его! Оба метода соответствуют стандартам и, если вы не планируете поддержку действительно старых браузеров (например, Netscape 4) не существует веского довода в пользу какого-либо метода.

Дополнение

Я бы сказал, что почти не существует, так как оба метода неравноценны в плане использования ресурсов. По последним мнениям, которые существуют среди веб-мастеров, использование @import увеличивает потребление ресурсов. Более подробно об этом можно почитать в статье «Не используйте @import«.

Постовой:

Думаю для тех кто задался целью оптимизации и продвижения сайта будут полезны Онлайн сервисы для проверки PR и тИЦ сайта на Procto.net.

А если вы живете В Краснодаре и самому некогда оптимизировать сайт то — Оптимизация в Краснодаре и крае — руками профессионалов.

5 комментариев к записи “CSS @import vs link”

  1. Yakov

    Привет, Витя! Раз очередной раз зашла речь о CSS, хотел бы уточнить один вопросик, вроде бы в тему…
    На некоторых проектах в кэше поисковика CSS отваливается, с чем это может быть связано? неполные пути? или неправильный импорт?

    Ответить
  2. Hiway

    @Yakov: Яха, смотри, ситуация такая, что причин может быть несколько. Отчасти, это может быть как раз из-за импорта, а не линкования, а еще возможен вариант, когда для сборки css используется css-парсер, я использую парсер на .php. А вообще, чтобы ответить однозначно нужно смотреть на сохраненный код.

    Ответить

Оставить комментарий

  • (не будет показан)