At-Rules

CSS At-Rules

CSS At-Rules are special CSS statements that start with:

[code theme="dark"] @ [/code]

symbol.

They are used to define special behaviors, conditions, imports, animations, responsive rules, layers, fonts, and many advanced CSS features.

Why At-Rules Are Important

At-rules help developers create:

Responsive layouts
Animations
Custom fonts
Theme layers
Conditional styling
Modern CSS architectures

[grid] CSS Media Query Example CSS Animation Example Container Query Layout Modern CSS Architecture [/grid]

Common CSS At-Rules

At-Rule	Purpose
@media	Responsive design
@keyframes	CSS animations
@import	Import CSS files
@font-face	Custom fonts
@supports	Feature detection
@container	Container queries
@layer	CSS layering system

@media Rule

Used for responsive design.

[code theme="dark"] @media (max-width:768px){ .menu{ display:none; } } [/code]

Applies styles only on smaller screens.

@keyframes Rule

Used for CSS animations.

[code theme="dark"] @keyframes fade{ from{ opacity:0; } to{ opacity:1; } } [/code]

@import Rule

Imports external CSS files.

[code theme="dark"] @import url("style.css"); [/code]

@font-face Rule

Used to load custom fonts.

[code theme="dark"] @font-face{ font-family:"MyFont"; src:url("font.woff2"); } [/code]

@supports Rule

Applies styles only if a browser supports a feature.

[code theme="dark"] @supports (display:grid){ .layout{ display:grid; } } [/code]

@container Rule

Creates responsive components based on container size.

[code theme="dark"] @container (min-width:500px){ .card{ display:flex; } } [/code]

@layer Rule

Organizes CSS into layers with controlled priority.

[code theme="dark"] @layer components{ .btn{ padding:12px; } } [/code]

Types of At-Rules

Type	Example
Conditional Rules	@media, @supports
Resource Rules	@import, @font-face
Animation Rules	@keyframes
Architecture Rules	@layer, @container

Advantages of At-Rules

Enable advanced CSS features
Create responsive layouts
Improve CSS architecture
Support animations and fonts
Allow conditional styling
Improve maintainability

Disadvantages of At-Rules

Some modern rules need newer browsers
Can become complex in large projects
Overuse may reduce readability

Best Use Cases

Responsive websites
Modern frontend systems
CSS animations
Design systems
Component libraries
Performance optimization

Cross Browser Compatibility

Most common at-rules are supported across all modern browsers.

@media → Excellent support
@keyframes → Excellent support
@font-face → Excellent support
@supports → Good support
@container → Modern browser support
@layer → Modern browser support

Older browsers may not support newer at-rules like:

[code theme="dark"] @container @layer [/code]

Browser Support Summary