Warning Malformed @media query
Why an @media rule with an empty or unbalanced condition gets ignored entirely by the browser, along with everything inside it.
The validator flags an @media rule whose condition (the part between @media and the opening {) is either empty or has unbalanced parentheses.
Example
/* Wrong: missing closing paren */
@media (min-width: 768px { .sidebar { display: block; } }
/* Wrong: no condition at all */
@media { .sidebar { display: block; } }
/* Right */
@media (min-width: 768px) { .sidebar { display: block; } }Why it matters
CSS parsers don't partially apply a malformed at-rule — an @media block with a condition that fails to parse is discarded in its entirety, including every rule nested inside it. That's a much quieter failure than a normal typo elsewhere in a stylesheet: there's no invalid property or bad selector to spot, just a chunk of otherwise-correct CSS that never takes effect at all, because the condition wrapping it doesn't parse. A missing parenthesis from editing a media query by hand is the most common cause.
Frequently asked questions
Does @media with no condition ever make sense?
No — @media always needs at least one media feature or type. If you want a rule to apply unconditionally, don't wrap it in @media at all.
Does this check validate the actual media features (like min-width) are spelled correctly?
No — it only checks that the parentheses in the condition balance and that a condition is present. A misspelled feature name (min-widht) would still pass this specific check, though it would similarly fail to match and silently do nothing.