---
title: At-rules
slug: Web/CSS/At-rule
translation_of: Web/CSS/At-rule
---
<div>{{cssref}}</div>

<p><span class="seoSummary"><strong>At-rules</strong> это <a href="/ru/docs/Web/CSS/Синтаксис#CSS_statements">CSS операторы</a>, которые показывают CSS как себя вести. Они начинаются со знака at, '<code>@</code>' (<code>U+0040 КОММЕРЧЕСКОЕ AT</code>), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, '<code>;</code>' (<code>U+003B ТОЧКА С ЗАПЯТОЙ</code>), или до следующего <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Синтаксис#Блоки_объявлений_CSS">CSS блока</a>, в зависимости от того, что наступит раньше.</span></p>

<pre class="brush: css">/* Общая структура */
@ИДЕНТИФИКАТОР (ПРАВИЛО);

/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
@charset "utf-8";</pre>

<p>Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:</p>

<ul>
 <li>{{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.</li>
 <li>{{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.</li>
 <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.</li>
 <li><strong><em>Вложенные at-правила</em></strong> — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
  <ul>
   <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса.</li>
   <li>{{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.</li>
   <li>{{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.</li>
   <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.</li>
   <li>{{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.</li>
   <li>{{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.</li>
   <li>{{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)</li>
   <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.</li>
   <li>{{cssxref("@font-feature-values")}} (плюс <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> и <code>@character-variant</code>)<br>
    — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li>
  </ul>
 </li>
</ul>

<h2 id="Условные_групповые_правила"><span style="letter-spacing: -0.00278rem;">Условные групповые правила</span></h2>

<p><span style="font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> и в:</span></p>

<ul>
 <li>{{cssxref("@media")}},</li>
 <li>{{cssxref("@supports")}},</li>
 <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li>
</ul>

<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.</p>

<h2 id="Характеристики">Характеристики</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td>Начальное определение</td>
  </tr>
  <tr>
   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Стандартизирует <code>@-webkit-keyframes</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="Читайте_также">Читайте также</h2>

<ul>
 <li>{{CSS_key_concepts}}</li>
</ul>