CSS At-Rules

CSS At-Rules — Master CSS at-rules: @media, @keyframes, @font-face, @supports, @layer, @import, and more. The guide walks through What are At-rules?, Conditional At-rules, Definition At-rules, Structural At-rules, Practical At-rule Patterns. At-rules are CSS statements that tell CSS how to behave. They start with the @ symbol followed by an identifier. Categories of at-rules: - Conditional: @media, @supports, @container, @scope - Definitions: @keyframes, @font-face, @counter-style, @property - Structural: @import, @layer, @charset, @namespace Syntax variations: /* Block at-rules */ @media (min-width: 768px) { /* rules */ } @supports (display: grid) { /*… @media - Apply styles based on media features: @media (min-width: 768px) and (prefers-color-scheme: dark) { /* rules */ } @supports - Apply styles based on feature support: @supports (display: grid) { .layout { display: grid; } } @supports not (display: flex) { .layout { display: block; } } @supports selector(:has(p)) { .card:has(.btn) { border-color: #6366f1; } } @container - Apply…