Специальные правила в CSS

В CSS существует возможность использовать правила, благодаря которым можно управлять отображением элементов в зависимости от определенных условий. Каждое правило начинается с знака @, следом за которым располагается идентификатор.

@[KEYWORD] (RULE);

Базовые правила

Для них применяется единый синтаксис.

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

@charset "UTF-8";

@import
Данное правило следует использовать в самом начале таблицы стилей. Оно дает возможность подключать в одну таблицу стилей другие.

@import 'global.css';

@namespace
Правило полезно использовать для применения стилей к XML, HTML (XHTML), так как XHTML элементы могут быть использованы в качестве селекторов в CSS.

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

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

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

@[KEYWORD] {
  /* Nested Statements */
}

@document
Данное правило позволяет применить стили к определенной странице. Для других страниц оно будет проигнорировано.

@document 
  /* Rules for a specific page */
  url(http://reimax.ru/),
  /* Rules for pages with a URL that begin with... */
  url-prefix(http://reimax.ru/blog/),
  /* Rules for any page hosted on a domain */
  domain(reimax.ru),
  /* Rules for all secure pages */
  regexp("https:.*")
{
  /* Start styling */
  body { font-family: Comic Sans; }
}

@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 in Portrait and Landscape */
@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
Правило позволяет назначать стили для отдельных страниц при печати. Через него можно задавать отступы полей у страниц.

@page :first {
  margin: 1in;
}

@supports
Проверяет поддерживает ли браузер определенную функцию или селектор.

/* Check one supported condition */
@supports (display: flex) {
  .module { display: flex; }
}
/* Check multiple conditions */
@supports (display: flex) and (-webkit-appearance: checkbox) {
  .module { display: flex; }
}