Я учусь немного CSS, чтобы настроить мой шаблон проекта. Я пришел к этой проблеме и не нашел четкого ответа в Интернете. Есть ли разница между использованием @import или ссылки в CSS?
Использование @import
<style>@import url(Path To stylesheet.css)</style>
Использование ссылки
<link rel="stylesheet" href="Path To stylesheet.css">
Какой лучший способ сделать это? и почему? Спасибо!
Теоретически, единственное различие между ними заключается в том, что @import - это механизм CSS для включения таблицы стилей, а <link> - механизм HTML. Однако браузеры обрабатывают их по-разному, что дает <link> явное преимущество с точки зрения производительности.
Стив Соудерс написал обширный пост в блоге, сравнивающий влияние как <link>, так и @import (и всевозможных их комбинаций) под названием "dont use @import". Этот заголовок говорит сам за себя.
Yahoo! также упоминает это как одну из лучших рекомендаций по производительности (в соавторстве со Стивом Соудерсом): Выберите <link> вместо @import
.Кроме того, использование тега <link> позволяет определить "предпочтительные" и альтернативные таблицы стилей. Вы не можете сделать это с @import.
Сегодня нет особой разницы, но @import не обрабатывается корректно старыми браузерами (Netscape 4 и т.д.), Поэтому @import hack может быть использован, чтобы скрыть правила CSS 2 от этих старых браузеров.
Опять же, если вы не поддерживаете действительно старые браузеры, нет никакой разницы.
Однако на вашем месте я бы использовал вариант <link> на ваших HTML-страницах, поскольку он позволяет указывать такие вещи, как тип носителя (печать, экран и т.д.).
Вы можете использовать команду import для импорта другого CSS внутри файла css, который невозможен с помощью команды link. На самом деле старый браузер не может (IE4, IE5 частично) обрабатывать функции импорта. Кроме того, некоторые библиотеки, анализирующие ваш xhtml/html, могут не получить импорт таблицы стилей. Имейте в виду, что ваш импорт должен появиться перед всеми другими объявлениями CSS.
<link> директива может допускать загрузку нескольких css и их интерпретацию несинхронно.
директива @import заставляет браузер * ждать, пока импортированный script будет загружен inline в родительский script, прежде чем он сможет корректно обработать его движком, так как технически это всего лишь один script.
Многие скрипты минимизации css (и языки, такие как less или sass), автоматически объединяют связанные скрипты в основной script, так как в итоге это приводит к меньшему накладным расходам.
* (зависит от браузера)
Эта статья может быть использована здесь: 4 метода добавления CSS в HTML: ссылка, вставка, встроенный и импорт
Когда я использую правило @import, он обычно импортирует таблицу стилей в существующую таблицу стилей (хотя мне не нравится делать это для начала). Но чтобы ответить на ваш вопрос, нет, я не считаю, что есть какая-то разница. Просто убедитесь, что URL в двойных кавычках, чтобы соответствовать действующему XHTML.
@import обычно предназначен для использования во внешней таблице стилей, а не в строке, как в вашем примере. Если вы действительно хотели скрыть таблицу стилей из очень старых браузеров, вы можете использовать это как взломать, чтобы предотвратить использование этой таблицы стилей.
В целом тег <link> обрабатывается быстрее, чем правило @import (что, по-видимому, несколько медленнее, чем механизм обработки css).