Вопрос по css – Разница между @import и ссылкой в CSS

100

Я изучаю немного CSS, чтобы настроить шаблон моего проекта. Я пришел к этой проблеме и не нашел четкого ответа в Интернете. Есть ли разница между использованием @import или ссылки в CSS?

Использование @import

<code><style>@import url(Path To stylesheet.css)</style>
</code>

Использование ссылки

<code><link rel="stylesheet" href="Path To stylesheet.css">
</code>

Какой лучший способ сделать это? и почему? Спасибо!

Ваш Ответ

7   ответов
2
Цитата: "Давайте представим, что у нас есть веб-сайт на 1000 страниц, и мы ссылаемся на CSS-файл на каждой странице сайта. Теперь давайте представим, что мы хотим добавить второй CSS-файл ко всем этим страницам. Мы могли бы отредактировать все 1000 HTML-файлов и добавить вторую ссылку CSS, или гораздо лучше было бы импортировать второй CSS-файл из первого файла. Мы сэкономили много часов на работе! & Quot;
1

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

124

@import механизм CSS для включения таблицы стилей и<link> механизм HTML. Однако браузеры обрабатывают их по-разному, давая<link> явное преимущество с точки зрения производительности.

Стив Соудерс написал обширный пост в блоге, сравнивающий влияние обоих<link> а также@import (и всевозможные их комбинации) под названием & quot;не используйте @import& Quot ;. Этот титул говорит сам за себя.

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

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

Спасибо - хорошие гиперссылки - особенно первая.
6

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

1

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

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

5

@import старые браузеры (Netscape 4 и т. д.) неправильно обрабатываются, поэтому@import hack может быть использован, чтобы скрыть правила CSS 2 от этих старых браузеров.

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

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

Указывать медиа можно и для операторов @import.
Вы можете сделать, например, & quot; экран @import url (style.css), print & quot; хотя в IE7 и ранее он не поддерживает типы носителей.
В самом деле? Я полагаю, вы могли бы добавить медиа-тип к вашему стилевому тегу, но мне это кажется хаком.
5

ссылка & gt; Директива может допускать загрузку и интерпретацию нескольких css асинхронно.

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

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

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

Похожие вопросы