← Back to at-rules

CSS At-rule

@custom-media

Responsive

Defines named media query aliases for reuse across stylesheets.

Syntax

@custom-media --name (condition);

Example

@custom-media --mobile (max-width: 768px);

Common use cases

  • Reusable named breakpoints
  • Consistent media queries across large codebases
  • Reducing repetition in responsive styles

Practical developer insight

@custom-media is a CSS Draft spec — widely used via PostCSS in production with postcss-custom-media, but not yet natively supported in browsers without it.

Related

@media@container@supports