Мы знаем, что существует два способа ссылки на внешний CSS на веб-страницах, а именно: @import и link. Мы часто слышим, как люди говорят, что для представления CSS лучше использовать ссылку, но знаете ли вы, почему?
связь
Ссылка предназначена для подключения внешнего CSS к веб-страницам. Конкретная форма.
@импорт
Разница между импортом и ссылкой заключается в том, что он может включать несколько других файлов CSS в один файл CSS. Конкретная форма:
Зачем использовать @import
Большинство людей используют @import, потому что старые браузеры не поддерживают @import, а это означает, что мы можем использовать @import для введения стилей CSS, которые могут анализировать только современные браузеры.
Используйте следующий код, чтобы запретить браузерам IE6 и ниже анализировать CSS (методы ниже IE6 находятся в нерабочем состоянии и здесь будут опущены)
@import url(../style.css) screen; Другая основная причина — когда на вашей веб-странице необходимо добавить несколько внешних файлов CSS. Вы можете использовать ссылку, чтобы представить CSS, а затем использовать метод @import в этом файле CSS. несколько других файлов CSS. Кажется, с ними проще работать.
Зачем использовать ссылку
Одна из основных причин использования метода ссылки заключается в том, что вы можете разрешить пользователям переключать стили CSS. Современные браузеры, такие как Firefox, Opera и Safari, поддерживают атрибут rel="alternate stylesheet" (то есть вы можете выбирать разные стили). в браузере). Конечно, вы также можете использовать Javascript, чтобы IE поддерживал изменение стилей пользователями.
Если вы не понимаете, войдите на эту страницу и нажмите «Просмотр – Стиль страницы» в Firefox.
Небольшие проблемы с @import
Если заголовок вашей веб-страницы очень простой и содержит только атрибут @import, когда пользователь просматривает Интернет с низкой скоростью, он увидит страницу без стилей, а затем он сможет увидеть страницу при загрузке файла CSS. . Чтобы избежать таких проблем, необходимо убедиться, что в заголовке присутствует хотя бы один скрипт или тег ссылки.
Обновление 04-11: @import увеличит общее время загрузки CSS и приведет к изменению порядка загрузки файлов в IE. Например, файлы сценариев, размещенные после @import, будут загружаться до CSS.
Подробную информацию можно найти на странице http://www.stevesouders.com/blog/2009/04/09/dont-use-import/.
Какой метод следует использовать?
В настоящее время кажется, что link больше подходит (или более популярен) для небольших веб-сайтов. Конечно, если в будущем нам понадобится модульность CSS, мы обязательно будем использовать @import.