Различные сайты включают свои внешние Каскадные таблицы стилей разными способами - либо с использованием подхода @import, либо путем ссылки на этот файл CSS. В чем разница между @import и ссылкой для CSS и как вы решили, какой из них лучше для вас?
Разница между @import и Link
Связывание - это первый метод включения внешней таблицы стилей на ваши веб-страницы. Он предназначен для связи вашей страницы с таблицей стилей. Он добавляется в голову вашего HTML-документ.
Импорт позволяет импортировать одну таблицу стилей в другую. Это немного отличается от сценария ссылки, потому что вы можете импортировать таблицы стилей внутри связанной таблицы стилей.
С точки зрения стандартов, нет никакой разницы между привязкой к внешней таблице стилей или ее импортом. Любой из способов верен, и в большинстве случаев любой из них будет работать одинаково хорошо. Однако есть несколько причин, по которым вы можете использовать одно вместо другого.
Зачем использовать @import?
Много лет назад наиболее распространенной причиной использования @import вместо (или вместе с) было то, что старые браузеры не распознавали @import, поэтому вы могли скрыть от них стили. Импортируя таблицы стилей, вы, по сути, сделаете их доступными для более современных, совместимых со стандартами браузеров, «скрывая» их от
старые версии браузера.Другой способ использования метода @import - использовать несколько таблиц стилей на странице, включая только одну ссылку в заголовке документа. Например, корпорация может иметь глобальную таблицу стилей для каждой страницы на сайте с подразделами, имеющими дополнительные стили, которые применяются только к этому подразделу. Установив ссылку на таблицу стилей подраздела и импортировав глобальные стили в верхней части этого стиля таблицу, вам не нужно поддерживать гигантскую таблицу стилей со всеми стилями для сайта и подраздел. Единственное требование - любые правила @import должны предшествовать остальным правилам стиля. Наследование все еще может быть проблемой.
Зачем нужна ссылка?
Причина № 1 для использования связанных таблиц стилей состоит в том, чтобы предоставить вашим клиентам альтернативные таблицы стилей. Такие браузеры, как Firefox, Safari и Opera, поддерживают атрибут rel = "alternate stylesheet", и когда он доступен, зрители могут переключаться между ними. Вы также можете использовать переключатель JavaScript для переключения между таблицами стилей в IE - чаще всего используется с Макеты увеличения в целях доступности.
Один из недостатков использования @import заключается в том, что если у вас очень простая голова с правилом @import в ней, ваши страницы могут отображать «вспышку нестилизованного содержимого» при загрузке. Простое решение этой проблемы - убедиться, что у вас в голове есть хотя бы одна дополнительная ссылка или элемент скрипта.
А как насчет типа носителя?
Многие авторы утверждают, что вы можете использовать тип носителя, чтобы скрыть таблицы стилей от старых браузеров. Часто они упоминают эту идею как преимущество использования @import или, но вы можете установить медиа введите любой метод, и старые браузеры, не поддерживающие типы мультимедиа, не будут просматривать их ни в одном из них. дело.
Итак, какой метод вы должны использовать?
Большинство разработчиков сегодня используют ссылки, а затем импортируют таблицы стилей во внешние таблицы стилей. Таким образом, у вас есть только одна или две строки кода для корректировки в ваших HTML-документах. Но суть в том, что решать вам. Если вам удобнее использовать @import, дерзайте! Оба метода соответствуют стандартам, и если вы не планируете поддерживать действительно старые браузеры, нет веских причин для их использования.