At-Rules | CSS-Tricks

This is a work in progress — and we could use your help! Learn about writing for CSS-Tricks and how to contribute to the CSS Almanac.

`@charset`

Sets the stylesheet character encoding. It isn't a proper at-rule, but a byte sequence that says how to decode the stylesheet.

@charset "UTF-8";

`@container`

The CSS @container at-rule lets us apply styles to other elements depending on a container’s size or styles. It works […]

@container (width > 600px) {}

`@counter-style`

The @counter-style at-rule lets you create custom list counters that can be used in the list-style-type property and the counter() […]

@counter-style apple-counter { ... }

`@font-face`

The @font-face at-rule lets us define custom fonts beyond the user’s pre-installed fonts, both from local and remote font services. In other […]

@font-face {
    font-family: "CustomFont"; 
    src:  url("CustomFont.woff2") format("woff2"),  
          url("CustomFont.woff") format("woff"); 
    font-weight: normal;
}

`@font-feature-values`

The @font-feature-values at-rule gives a human-readable name to the font's settings seen in font-feature-settings, such as style sets, ornaments, and swashes.

@font-feature-values Noble Company {
    @stylistic {
        curly: 1; /* Sets ss01 on */
    }
}

`@font-palette-values`

The @font-palette-values at-rule represents a color palette used in a multi-color font. It lets you pick between the font’s preexisting palettes and […]

@font-palette-values --blue {
    font-family: Bungee Spice;
    override-colors: 0 lch(88% 91 144), 1 lch(72% 49 241);
}

`@import`

The @import at-rule merges a CSS file into another one. It’s written at the top of the document, before any other CSS […]

@import url("other.css") screen and (width > 600px);

`@keyframes`

The @keyframes at-rule sets the value of properties at different points during an animation, so instead of defining how each property should behave at each frame of an animation, we set its keyframes, and CSS will figure out (i.e., interpolate) the values between them.

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(720deg);
  }
}

`@layer`

The CSS @layer at-rule enables CSS authors to work within CSS Cascade Layers as a way of controlling how the […]

@layer reset, utilities, components, pages;

`@namespace`

The @namespace at-rule can make a stylesheet target a specific code dialects, such as MathML, SVG, and XML. It works by declaring which dialect to scope using a namespace, which can be prefixed to match specific selectors, or non-prefixed to match every selector in the stylesheet.

@namespace "http://www.w3.org/1998/Math/MathML";

`@page`

The @page at-rule lets us style a site when presented as a paged media, that is, when printed or displayed as a PDF. […]

@page { margin: 3cm; }

`@position-try`

The CSS @position-try at-rule defines a custom position fallback for the position-try-fallbacks property. It takes various properties that can change […]

@position-try --my-position { position-area: top left;  }

`@property`

The CSS @property at-rule lets you register a custom property. It can be used as an everyday CSS variable inside […]

@property --spacing {
  syntax: "";
  initial-value: 20px;
  inherits: true;
}

`@scope`

The @scope at-rule lets you apply styles to a specific area of the page. Think of it like setting a […]

@scope (.container) to (.article) { /* */ }

`@starting-style`

The @starting-style at-rule in CSS allows us to define styles for elements just as they are first rendered in the DOM. The classic situation this solves is trying to animate an element from display: none.

@starting-style {
    opacity: 0;
  }

`@supports`

The @supports at-rule tests whether a browser supports a CSS feature and allows developers to provide fallback styles if it […]

@supports selector(:nth-child(1 of .foo)) { }

`@view-transition`

The @view-transition at-rule allows pages to opt into cross-document view transitions. In other words, it enables animations between pages of the same origin with just CSS.

@view-transition { navigation: auto; }