Разница между @import и ссылкой в ​​CSS

Я изучаю 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(и всевозможных их комбинаций) под названием « не используйте @import ». Это название говорит само за себя.

Yahoo! также упоминает это как одну из своих лучших практик производительности (в соавторстве со Стивом Содерсом): Выберите <link>над @import

Кроме того, использование <link>тега позволяет вам определять «предпочтительные» и альтернативные таблицы стилей . Вы не можете этого сделать с @import.

Вы можете использовать команду import для импорта другого CSS в файл css, что невозможно с помощью команды ссылки. На самом деле старый браузер не может (IE4, IE5 частично) обрабатывать функцию импорта. Кроме того, некоторые библиотеки, анализирующие ваш xhtml / html, могут не получить импорт таблицы стилей. Имейте в виду, что ваш импорт должен предшествовать всем остальным объявлениям CSS.

Сегодня нет реальной разницы, но @importона не обрабатывается правильно в старых браузерах (Netscape 4 и т. Д.), Поэтому @importхак может быть использован для скрытия правил CSS 2 от этих старых браузеров.

Опять же, если вы не поддерживаете действительно старые браузеры, разницы нет.

Однако <link>на вашем месте я бы использовал этот вариант на ваших HTML-страницах, потому что он позволяет вам указывать такие вещи, как тип носителя (печать, экран и т. Д.).

Директива <link> позволяет загружать и интерпретировать несколько CSS асинхронно.

директива @import заставляет браузер * ждать, пока импортированный скрипт не будет загружен в родительский скрипт, прежде чем он сможет быть корректно обработан его движком, поскольку технически это всего лишь один скрипт.

Многие сценарии минимизации css (и такие языки, как less или sass) автоматически объединяют связанные сценарии в основной сценарий, поскольку в конечном итоге это приводит к меньшим накладным расходам при передаче.

* (зависит от браузера)

Эта статья может быть полезна здесь: 4 метода добавления CSS в HTML: ссылка, встраивание, встраивание и импорт

Когда я использую правило @import, обычно я импортирую таблицу стилей в существующую таблицу стилей (хотя мне не нравится делать это с самого начала). Но отвечая на ваш вопрос, нет, я не верю, что есть какая-то разница. Просто убедитесь, что URL-адрес заключен в двойные кавычки, чтобы соответствовать допустимому XHTML.

@import обычно предназначен для использования во внешней таблице стилей, а не во встроенной, как в вашем примере. Если ты действительно хотите скрыть таблицу стилей от очень старых браузеров, вы можете использовать это в качестве взлома, чтобы предотвратить их использование этой таблицы стилей. 

В целом, <link>тег обрабатывается быстрее, чем правило @import (которое, по-видимому, несколько медленнее с точки зрения механизма обработки css).

Microsoft Internet Explorer 9 (MSIE9) не обрабатывает @import должным образом. Обратите внимание на эти записи в моем журнале Apache (IP-адрес скрыт, но whoisсказал, что он принадлежит самой Microsoft): основной HTML-код, связанный с screen.css, в котором

@import url("print.css") print;
@import url("speech.css") aural;

который я сейчас собираюсь изменить на linkэлементы в HTML, потому что кажется, что MSIE9 выдает два неверных запроса к серверу, получая 404 ошибки, без которых я мог бы обойтись:

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

Там были соответствующие запросы на эти файлы после этого, но мы можем обойтись без этого «стрелять на сервере первые, разобраны urlпосле» логики.