@import
При помощи директивы @import можно импортировать один файл со стилями в другой файл со стилями.
Пример
Предположим, в проекте для удобства стили разделены на несколько файлов:
- fonts.css — файл с подключением шрифтов и стилями.
- buttons.css — файл со стилями для кнопок.
- main.css — основной файл стилей с остальным CSS-кодом.
Нам нужно, чтобы все стили загружались при открытии страницы. Для этого импортируем отдельные файлы в наш основной файл main.css:
Как пишется
Начнём с важного: все директивы импорта должны быть в самом верху CSS-файла, до всего остального кода. Иначе не сработает.
Равнозначные варианты импорта:
Технической разницы между этими двумя вариантами нет. Файлы будут импортироваться одинаково в обоих случаях. Путь до файла может быть как абсолютным, так и относительным.
Можно указать, для каких типов устройств должны применяться стили из импортируемого файла:
В этом примере стили из файла, импортируемого в первой строке, будут применяться только при печати. А стили из файла, импортируемого во второй строке, будут применяться для отображения на экране.
Допустимо указывать несколько медиавыражений после пути:
Можно проверить, поддерживается ли какое-то конкретное правило или выражение в браузере пользователя, и загрузить для него конкретные стили. Для этого используется правило supports :
В этом примере для браузеров, которые не поддерживают флексбоксы, будет загружена запасная таблица стилей. Для всех остальных будут использованы стили, написанные ниже правила импорта.
Как это понять
Во время загрузки страницы браузер пройдёт по всем указанным в импортах путям и загрузит таблицы стилей. Затем прочитает правила ниже импортов и отрисует страницу на основании комбинации всего CSS.
Подсказки
�� Желательно не злоупотреблять импортами. Потенциально это может замедлить загрузку страницы.
�� Все импорты всегда должны быть в начале CSS-файла.
�� Поскольку браузер читает медиавыражения, указанные после пути до файла в импорте в последнюю очередь, то он в любом случае сходит по ссылке почитать стили и только потом определит, нужно ли их применять. Эту особенность стоит держать в голове.
На практике
Алёна Батицкая
�� Кроме импорта файлов внутри проекта можно встретить использование этой директивы для импорта шрифтов с сайта Google Fonts. Это один из предложенных на их сайте вариантов подключения.
После этого в коде ниже можно использовать подключённый шрифт. Минимум усилий — максимум результата.
Хотя это быстрый способ подключить шрифт, его использование нежелательно. Браузеру потребуется больше времени для отрисовки страницы. Особенно это будет заметно, если скорость интернета не очень высокая.
Из двух предложенных на сайте Google Fonts вариантов подключения шрифта выбирайте тот, что через <link> .
�� Если проект большой, то удобно разделять стили на разные файлы. Отдельно стили для разметки, отдельно для типографики, отдельно для форм и кнопок. В этом случае в основном файле стилей — назовём его style.css — будут только импорты. Так удобнее содержать код в чистоте. И всегда точно знаешь, в какой файл залезть, чтобы что-нибудь поправить.
Так организуют проекты, в которых есть так называемый сборщик: он собирает код из всех импортируемых файлов в один файл, чем сильно облегчает жизнь браузеру. Если вы не используете сборщик, то постарайтесь избежать обилия импортов.
@import
Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .
Синтаксис
В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| aural | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для слепых людей. |
| handheld | Наладонные компьютеры и аналогичные им аппараты. |
| Печатающие устройства вроде принтера. | |
| projection | Проектор. |
| screen | Экран монитора. |
| tv | Телевизор. |
Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.
Значения
В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
HTML5 CSS2.1 IE Cr Op Sa Fx
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.
@import
Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import .
Синтаксис
В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| Печатающие устройства вроде принтера. | |
| screen | Экран монитора. |
Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | <радиус> | |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
Пример
Примечание
Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.
Спецификация
| Спецификация | Статус |
|---|---|
| Media Queries | Рекомендация |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 5.5 | 12 | 1 | 5 | 1 | 1 |
| 1 | 1 | 5 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.