CSS правило @import

Определение и применение

Правило @import импортирует CSS в текущую таблицу. Оно должно предшествовать обычным правилам; перед ним допустимы @charset и объявления порядка слоёв @layer reset, base;, но не блоки слоёв.

С использованием медиазапросов вы можете импортировать CSS стили для опреденных типов устройств, будь-то принтер или телевизор. Браузеры могут избегать загрузки (импорта) тех стилей, которые не поддерживаются на этом типе устройства. Медиазапросы указываются через пробел после URL адреса с которого происходит загрузка CSS стилей. Обращаю Ваше внимание, что необходимо разделять каждый медиазапрос запятой.

Импорт добавляет отдельный запрос CSS-файла и может создать цепочку зависимых загрузок. Для независимых таблиц часто удобнее <link rel="stylesheet"> в HTML: браузер обнаруживает их раньше. @import полезен для организации таблиц, условий и назначения слоя.

Импорт может задерживать обнаружение и загрузку зависимых файлов. Скорость сети не меняет порядок каскада: импортированные правила участвуют в нём на месте @import. Относительный URL во внешнем CSS отсчитывается от адреса CSS-файла.

Современная запись также поддерживает слой и условие: @import url("theme.css") layer(theme) supports(display: grid) (min-width: 40rem);. Условие supports() проверяет поддержку CSS, а медиазапрос — среду отображения.

Поддержка браузерами

Спецификация: CSS cascade-5

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.at-rules.import
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
import✓1✓12✓1✓3.5✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
layer✓99✓99✓97✓85✓15.4✓99✓97✓68✓15.4✓18.0✓99✓15.4
supports✓122✓122✓115✓108✓17.5✓122✓115✓81✓17.5✓26.0✓122✓17.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис

CSS
@import url;
@import url list-of-media-queries (медиазапросы)*;
* - Использование медиазапросов подробно рассмотрено в описании правила @media, которое используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее.

Значения правила

Значение Описание
url Определяет URL адрес ресурса для импорта. URL-адрес может быть как абсолютным, так и относительным.
list-of-media-queries Разделенный запятыми список медиазапросов. Если браузер не поддерживает эти запросы, он не загружает связанный ресурс.

Версия CSS

CSS1

Примеры использования

Здесь показаны отдельные файлы: сохраните их в одной папке и подключите main.css к HTML через link. Импорт должен находиться перед обычными правилами. Листинги оставлены раздельными, чтобы общий редактор не объединил файлы и не скрыл работу импорта.

Файл colors.css

CSS
.notice {
  color: #9b3c00;
}

Файл main.css

CSS
@import url("colors.css");

.notice {
  padding: 16px;
  border: 1px solid currentColor;
}

HTML-документ

HTML
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Импорт CSS</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <p class="notice">Цвет загружается из colors.css.</p>
</body>
</html>

Импорт по условию

Замените первую строку main.css следующим правилом. Цвет из colors.css применяется при ширине окна от 600px; остальные правила main.css работают при любой ширине.

CSS
@import url("colors.css") (min-width: 600px);

Импорт внутри style

Вместо link можно поместить импорт в начало элемента style в head документа.

HTML
<style>
  @import url("colors.css");
  .notice { padding: 16px; }
</style>