At-rules
========

**At-rules** are CSS statements that instruct CSS how to behave. They begin with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and includes everything up to the next semicolon, '`;`' (`U+003B SEMICOLON`), or the next CSS block, whichever comes first.

Syntax
------

### Regular


```css
/\* General structure \*/
@identifier (RULE);

/\* Example: tells browser to use UTF-8 character set \*/
@charset "utf-8";
```


There are several regular at-rules, designated by their identifiers, each with a different syntax:

* `@charset` — Defines the character set used by the style sheet.
* `@import` — Tells the CSS engine to include an external style sheet.
* `@namespace` — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.
### Nested


```css
@identifier (RULE) {
}
```


A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

* `@media` — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a *media query*.
* `@scope` - A conditional group rule that will apply its content if the device meets the criteria of the given condition.
* `@starting-style` - A conditional group rule that will apply starting transition if the browser meets the criteria of the given condition.
* `@supports` — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
* `@document` 
Deprecated
 — A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition.
* `@page` — Describes the aspect of layout changes that will be applied when printing the document.
* `@font-face` — Describes the aspect of an external font to be downloaded.
* `@keyframes` — Describes the aspect of intermediate steps in a CSS animation sequence.
* `@counter-style` — Defines specific counter styles that are not part of the predefined set of styles.
* `@font-feature-values` (plus `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` and `@character-variant`) — Define common names in `font-variant-alternates` for feature activated differently in OpenType.
* `@property` — Describes the aspect of custom properties and variables.
* `@layer` – Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.
Conditional group rules
-----------------------

Much like the values of properties, each at-rule has a different syntax. Nevertheless, several of them can be grouped into a special category named **conditional group rules**. These statements share a common syntax and each of them can include *nested statements*—either *rulesets* or *nested at-rules*. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either **true** or **false**. If the condition evaluates to **true**, then all of the statements within the group will be applied.

Conditional group rules are:

* `@media`,
* `@scope`,
* `@starting-style`,
* `@supports`,
* `@document`. *(deferred to Level 4 of CSS Spec)*

Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.

Nesting @layer with CSS nesting
-------------------------------

Cascade layers can be nested to create nested layers. These are joined with a `.`(dot). This can also be achieved using CSS nesting.

Index
-----

* `@charset`
* `@color-profile`
* `@container`
* `@counter-style`
* `@document` 
Deprecated
* `@font-face`
* `@font-feature-values`
* `@font-palette-values`
* `@import`
* `@keyframes`
* `@layer`
* `@media`
* `@namespace`
* `@page`
* `@property`
* `@scope`
* `@starting-style`
* `@supports`
Specifications
--------------

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

See also
--------

* CSS key concepts:
    + CSS syntax
    + Comments
    + Specificity
    + Inheritance
    + Box model
    + Layout modes
    + Visual formatting models
    + Margin collapsing
    + Values
        - Initial values
        - Computed values
        - Used values
        - Actual values
    + Value definition syntax
    + Shorthand properties
    + Replaced elements
    + CSS nesting module