CSS приклад: @import

Інтернет Експлорер		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	2.0+	4.0+	2.0+	1.0+	1.0+	1.0+

Коротка інформація

Значення за замовчуванням	все
Посилання на специфікацію	http://www.w3.org/TR/CSS21/cascade.html#at-import

Версії CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Опис

Правило @import дозволяє імпортувати вміст CSS-файлу в поточну таблицю стилів. @import не можна вставляти після будь-яких оголошень, окрім @charset або іншого @import.

Синтаксис

@import url("ім'я файлу") [типи носіїв];
@import "ім'я файлу" [типи носіїв];

Типи носіїв - різні пристрої, наприклад, принтер, КПК, монітор тощо. Деякі з них перераховані в табл. 1.

Табл. 1. Типи носіїв та їх опис
Тип	Опис
всі	Всі типи. Це значення використовується за замовчуванням.
аудіо	Аудіосинтезатори, а також програми для відтворення тексту вслух. Сюди, наприклад, можна віднести аудіобраузери.
шрифт Брайля	Пристрої, засновані на системі Брайля, які призначені для сліпих осіб.
пристрої для носіння	Налаштовані комп'ютери та подібні апарати.
друк	Друкарські пристрої, наприклад, принтер.
проектор	Проектор.
екран	Екран монітора.
телевізор	Телевізор.

Використання типів носіїв разом із імпортом файлу дозволяє вказувати стиль лише для певних пристроїв.

Значення

Як значення використовується шлях до файлу стилю, який вказується всередині необов'язкової конструкції url(). Шлях до файлу при цьому можна писати як в лапках (подвійних або одинарних), так і без них.

Приклад

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Імпорт стилю</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для виведення результату на монітор */
    @import "/style/palm.css" handheld, print; /* Стиль для друку */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Браузери

Браузер Internet Explorer до версії 7.0 включно не підтримує типи носіїв при імпорті стилевого файлу. Більше того, при додаванні типу носія стилевий файл взагалі не завантажується.

@-правила

Часті запитання

Q: Як використовувати @import в CSS?

A: Наприклад: @import url('styles.css');
Q: Чи можна використовувати @import у середині CSS файлу?

A: Так, @import можна використовувати у середині CSS файлу.
Q: Де краще використовувати @import в CSS - в початку чи в кінці файлу?

A: Краще використовувати @import в початку CSS файлу.
Q: Чому краще уникати використання багатьох @import в CSS?

A: Уникайте багатьох @import, оскільки вони можуть уповільнити завантаження сторінки.
Q: Чи є альтернативи використанню @import в CSS?

A: Так, зазвичай рекомендується використовувати інструменти збирання CSS, такі як Webpack або Gulp, для управління залежностями та об'єднання CSS файлів.