CSS At-Rules

An at-rule used to define the character encoding of the CSS file. It must be at the very first line of the file and only one is allowed.

Lets you style elements based on the attributes of their parent container (like its width) rather than the entire browser viewport.

An at-rule that lets you create your own custom numbering systems (like using emojis or Roman numerals) for list bullets and counters.

An experimental at-rule that lets you define reusable media queries (like '@custom-media --tablet (max-width: 768px)') for cleaner, more maintainable code.

Allows you to load custom fonts onto a webpage, so you aren't limited to the standard 'web-safe' fonts installed on a user's computer.

An at-rule that lets you define custom aliases for OpenType font features, making your CSS easier to read when working with complex typography.

An at-rule that lets you define your own custom color palettes for a color font (like an icon font or emoji font) by overriding its default colors.

An experimental at-rule that lets you define your own custom CSS functions with logic and return values, very similar to functions in programming languages like JavaScript.

Allows you to import style rules from other style sheets. It must be placed at the very top of your CSS file.

Defines the steps of a CSS animation. You specify exactly which styles should change at specific points (0% to 100%) during the animation sequence.

A powerful way to organize your CSS into 'layers' of priority. It allows you to ensure that certain styles (like a theme) always override others (like a reset), regardless of selector specificity.

Applies styles only when certain conditions are met, such as specific screen widths, resolutions, or user preferences like dark mode.

Used in CSS to handle XML documents that have multiple 'namespaces' (like SVG mixed with XHTML). It tells CSS which namespace a selector should belong to.

An at-rule used to apply styles specifically to printed pages. It lets you set things like page margins, size, and orientation for the whole document.

An at-rule that allows you to define custom named sets of positioning properties. These can then be used as fallbacks in the 'position-try-fallbacks' property.

The @property at-rule allows you to register custom CSS variables with a specific data type and initial value. This is powerful because it allows you to animate things that were previously impossible, like gradients.

The @scope at-rule allows you to limit the reach of your styles to a specific part of the page. This is a native alternative to things like 'CSS Modules' or 'Styled Components', letting you keep styles local without complex naming rules.

Allows you to define the initial styles for an element for its 'entry' animation. This is a game-changer because it lets you animate elements (like modals or dropdowns) as they are added to the DOM without using JavaScript timeouts.

Checks for browser support of specific CSS features and applies styles only if those features are available.

Controls the browser's native view transition feature. It can be used to enable or disable transitions for specific elements or across the entire document during state changes.

A part of container queries that lets you style elements based on the computed value of a CSS property (usually a custom property) on their parent container, rather than just size.