At-rules in CSS.

What are CSS at-rules?

CSS at-rules all start with the @ sign. These are the instructions of highest level in CSS. Most often, their use is to define an element that will then be reused in classic CSS rules. But they have other uses:

• Guidelines for processing the rest of the style sheet. This is the case, for example, with @charset.
• Import another style sheet: @import.
• At-rules can introduce a bit of algorithms in CSS, as with @supports, @when ... @else, @media, etc.
• Define reusable elements: @keyframes, @counter-style, @font-face, etc.
• Finally, a directive behaves like a selector: @page.

At-rules in CSS.

Cascading Style Sheets Level 2 - Revision 1 Specification

@charset

Indicates the character set used in the style sheet.

CSS @apply Rule

✗

@apply

Applies a group of previously defined properties.

CSS Anchor Positioning

⚠

@position-try

Defines a set of rules for each anchor position and gives them a name (anchoring positioning).

CSS Animations

CSS Cascading and Inheritance

@import

Importing a stylesheet, with the possibility of choosing a cascade layer.

@layer

Defines cascade layers to help manage priorities between CSS rules.

⚠

@scope

Limit the scope of the instructions encompassed by this directive.

CSS Color Module

@color-profile

Specifies a color profile that can then be used by the color() function.

CSS Conditional Rules Module

⚠

@else

Completes the @when directive. Defines CSS rules that will only be processed under certain conditions.

@supports

Tests browser compatibility with the specified syntax.

⚠

@when

Defines conditional CSS rules, which will only be processed under certain conditions.

CSS Containment Module

@container

Allows you to write conditional CSS rules based on the characteristics of the container.

CSS Counter Styles

@counter-style

Creation of a custom counter that can be used in numbered lists.

CSS Device Adaptation Module

✗

@viewport

Defines the characteristics of the display window. This directive is an alternative to the HTML meta tag of the same name.

CSS Fonts Module

@font-face

Defines all settings for a downloadable font.

⚠

@font-feature-values

Defines the typographic variations to use.

@font-palette-values

Defines a color palette that can then be applied to a font.

CSS Functions and Mixins Module.

CSS Namespaces Module Level 3

@namespace

Allows defining namespaces in CSS.

CSS Paged Media Module

@page

This at-rule is a selector that targets printed pages.

CSS Properties and Values API

@property

Defines a custom property, with its initial value, its syntax, and an indication of inheritance.

CSS Transitions

CSS View Transitions Module

Media Queries

⚠

@custom-media

Defines a custom media query.

@media

Applying CSS rules based on device characteristics (screen size, presence of a mouse, etc.).