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

CSS Animations

@keyframes

Defines the name of an animation and which properties are animated.

CSS Cascading and Inheritance

@import

Importing a style sheet.

@layer

Defines cascade layers to help manage priorities between CSS rules.

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 Namespaces Module Level 3

@namespace

Allows defining namespaces in CSS.

CSS Paged Media Module

@page

Page characteristics, when printed.

CSS View Transitions Module

Media Queries

⚠

@custom-media

Defines a custom media query.

@media

Assignment of CSS rules depending on the device (smartphone, desktop screen, etc...).