1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
---
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>
|
