CSS: Unrecognized at-rule “@media screen”

The @media screen rule without a condition after the media type is invalid CSS syntax and will be flagged by the W3C validator.

A @media rule requires either a complete media query or a media type combined with a media feature expression. Writing @media screen alone followed by a block is actually valid CSS, so this error typically appears when the syntax inside the rule is malformed, the rule is missing curly braces, or extra characters appear between screen and the opening brace.

Common causes include:

• A missing opening or closing curly brace {} around the media block.
• Stray characters or typos between the media type and the brace.
• Placing @media rules inside a style attribute (inline styles do not support at-rules).
• The CSS appears inside an HTML context where the validator cannot parse it correctly, such as a malformed <style> element.

If the intent is to target screens of a specific size, a media feature expression is required, like @media screen and (min-width: 768px). If the intent is to target all screen devices with no further conditions, @media screen is valid CSS on its own, and the real problem is likely a syntax error nearby.

Example with the issue

<style>
  @media screen
    .container {
      width: 80%;
    }
</style>

The opening curly brace for the @media block is missing, so the validator cannot recognize the rule.

Fixed example

<style>
  @media screen {
    .container {
      width: 80%;
    }
  }
</style>

If the goal is to restrict styles to a specific viewport width, add a media feature:

<style>
  @media screen and (min-width: 768px) {
    .container {
      width: 80%;
    }
  }
</style>

Both examples use properly matched curly braces and valid @media syntax, which resolves the validator error.

Learn more:

MDN Reference

CSS @media rule

→

MDN Reference

Using media queries

→