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