Frontender Magazine

Директивы CSS

Директивы — это конструкции, которая позволяет создавать в CSS инструкции для изменения отображения либо поведения элементов страницы. Директива начинается со знака @, за которым следует одно из служебных слов. Это общий синтаксис, которому следуют все директивы.

Обычные правила

Такие директивы следуют стандартному синтаксису:

@[КЛЮЧЕВОЕ СЛОВО] (ПРАВИЛО);

@charset

Эта директива определяет кодировку, используемую браузером. Это очень удобно, если таблица стилей содержит символы, не входящие в ASCII (например UTF-8). Обратите внимание, что кодировка указанная в HTTP-заголовке переопределяет любые @charset, заданные в вашей таблице стилей.

@charset "UTF-8";

@import

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

@import 'global.css';

Учитывая популярность CSS-препроцессоров поддерживающих @import, нужно помнить о том, что препроцессоры трактуют правило иначе, чем это делает обычный CSS. Препроцессор запрашивает все импортируемые файлы, обрабатывает их и отдаёт на выходе один CSS-файл. Обычный CSS обрабатывает каждый @import как отдельный HTTP-запрос для каждого отдельного файла.

@namespace

Эта директива особенно полезна для применения CSS к XML HTML (XHTML), с его помощью XHTML-элементы могут быть использованы как CSS-селекторы.

/* Пространство имён для XHTML */
@namespace url(http://www.w3.org/1999/xhtml);

/* Пространство имён для SVG встроенного в XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

Вложенные правила

Вложенные директивы содержат подмножество дополнительных объявлений, которые могут служить условиями для конкретных ситуаций.

@[KEYWORD] {
  /* Вложенные утверждения */
}

@document

Эта директива определяет условия для стилей, которые применяются к конкретной странице. Например, можно задать URL страницы и затем настроить стили именно для неё. На других страницах эти стили будут проигнорированы.

@document
  /* Устанавливает правила для конкретной страницы */
  url(http://css-tricks.com/),

  /* Устанавливает правила для страниц, чей URL начинается с … */
  url-prefix(http://css-tricks.com/snippets/),

  /* Устанавливает правила для всех страниц, принадлежащих домену */
  domain(css-tricks.com),

  /* Правила для всех страниц с протоколом шифрования */
  regexp("https:.*")
{

  /* Описание стилей */
  body { font-family: Comic Sans; }

}

На момент написания статьи поддержка @document была довольно скудной:

Chrome Safari Firefox Opera IE Android iOS
Нет Нет -moz Нет Нет Нет Нет

@font-face

Эта директива позволяет загружать пользовательские шрифты для использования на странице. Такие шрифты по-разному поддерживаются браузерами, однако директива поддерживает разные условия, которые позволяют подключать и использовать эти шрифты.

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

@keyframes

Эта директива является базовым для создания покадровой анимации, позволяя задавать начальные, конечные и промежуточные шаги CSS-анимации.

@keyframes pulse {
  0% {
    background-color: #001f3f;
  }
  100% {
    background-color: #ff4136;
  }
}

@media

В этой директиве находятся условные выражения, применяющие определённые стили в зависимости от характеристик экрана. Эти выражения могут содержать, например, размеры экрана, что может пригодиться для создания адаптивных стилей для различных устройств:

/* iPhone в портретной и альбомной ориентации */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .module { width: 100%; }

}

Эта же директива позволит добавлять стили только при печати документа:

@media print {

}

@page

Эта директива определяет стили для отдельных страниц при выводе на печать. Например, она содержит специальные псевдоэлементы для обращения к первой (:first), а также к левой (:left) и правой (:right) страницам при печати двух страниц на листе.

@page :first {
  margin: 1in;
}

@supports

Эта директива определяет поддерживает ли браузер те или иные возможности, и, если поддерживает, применяет к элементам заданные стили. Как Modernizr, но заточенный на проверку CSS-свойств.

/* Проверка одного условия */
@supports (display: flex) {
  .module { display: flex; }
}

/* Проверка нескольких условий */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}

К сожалению, @supports не очень хорошо поддерживается браузерами:

Chrome Safari Firefox Opera IE Android iOS
28+ Нет 31+ 12.1+ Edge 4.4+ Нет

Подводя итоги

Директивы позволяют делать с помощью CSS классные и безумные вещи. И хотя представленные здесь примеры демонстрируют некоторые базовые возможности, мы можем видеть как их можно использовать для создания стилей для самых разных условий, позволяя разрабатывать удобные интерфейсы и варианты взаимодействия в зависимости от разных сценариев.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Geoff Graham
Автор:
Geoff Graham
Сaйт:
http://geoffgraham.me/
GitHub:
geoffgraham
Twitter:
@geoffreygraham
Виктория Зарипова
Переводчик:
Виктория Зарипова
LinkedIn:
viktoriya-zaripova

Комментарии (2 комментария, если быть точным)

Автар пользователя
Capoeirista

А можно ли сделать такое: Есть ссылка на изображение -

И если src содержит в себе day.jpg, то к примеру оформить определённую кнопку на сайте с белым фоном, а если night.jpg, то с чёрным фоном?

Автар пользователя
jekyenin

Capoeirista, http://codepen.io/jekyenin/pen/ONWpZZ

Здесь выбирается img, который содержит в src "Day.jpg" и кнопке, рядом с этой картинкой задается белый фон. Тоже самое можно сделать и с другим содержимым src.

img[src*="Day.jpg"]+button{}