Media Queries and Conditional Rules

Intermediate

Media Queries and Conditional Rules let CSS decide whether a group of rules applies. This lesson owns the conditional-processing model: media-query syntax, boolean logic, range comparisons, and feature-support conditions. Detailed media-feature meanings and user-preference policy belong to the Media Features / User Preferences owner.

The key mental model is evaluation before application. A conditional rule creates a gate. If its condition is true, its contained rules participate in the normal cascade; if false, those rules do not participate. The cascade itself still belongs to the Cascade owner.

A conditional rule is a gate

An @media rule asks whether the current environment matches a media query. An @supports rule asks whether the user agent supports a CSS declaration or condition. Neither creates a new cascade; each controls whether its nested rules are considered.

?

Media types

A media query can begin with a media type such as screen or print. A type narrows the target before any media-feature conditions are evaluated. Omitting the type means the query can match across the relevant media types when its feature conditions match.

?

Feature expressions

A media feature tests an aspect of the environment. This lesson uses features to teach query structure, not to build a catalog of every feature. The Media Features / User Preferences lesson owns the meanings, ranges, accessibility implications, and preference guidance for individual features.

?

Boolean logic

Media queries can combine conditions with `and`, invert a query with `not`, and combine alternatives with comma-separated queries. Treat the query as logic first; only then ask what each feature means.

?

Negation

`not` negates a media query. Negation applies to the query as a whole, so parentheses and grouping should be read carefully rather than treating `not` as if it were a property value.

?

Range syntax

Media Queries Level 4 allows range comparisons that read like ordinary mathematical comparisons. They are an alternative syntax for expressing feature ranges; they do not create a new responsive algorithm.

?

Nested conditional rules

Conditional rules can be nested where the applicable specification permits it. The nested condition is evaluated inside the outer condition. This is different from nesting selectors: the conditions control whether the enclosed rules participate.

?

@supports

@supports tests whether a declaration or supported condition is recognized. It is a capability query, not a browser-name test. Use it to conditionally provide CSS that depends on a feature being supported.

?

Declaration conditions

A basic @supports condition can test a property/value declaration. The declaration is parsed as a CSS condition rather than applied to the element being styled.

?

Compound supports conditions

Supports conditions can be combined with `and`, `or`, and `not`. This lets authors express a capability requirement without repeating the entire rule block.

?

Conditional rules and the cascade

Opening a conditional gate does not outrank another rule. Once rules are admitted, normal cascade order, layers, specificity, and source order still determine the winning declaration. The Cascade lesson owns those mechanisms.

?

Media queries and CSS nesting

Selector nesting and conditional-rule nesting solve different problems. A nested selector changes how selectors are represented; a nested @media or @supports changes the condition under which contained rules participate. Keep these mechanisms conceptually separate.

?

Imports and conditional application

Conditional processing can also occur when stylesheets are selected for a target. The exact loading and stylesheet integration model belongs to CSS Conditional Rules and the host integration specifications; this lesson focuses on the author-facing condition that determines whether CSS applies.

?

Writing queries from behavior

Start with the behavior that must change, then choose the smallest condition that describes when that behavior is appropriate. Avoid selecting breakpoints merely because a device category has a familiar name.

?

What this lesson does not own

This lesson does not own the detailed definitions of individual media features, user-preference guidance, color-adjustment behavior, container queries, or responsive layout algorithms. Those are separate Phase 5 ownership areas.

Stable versus developing CSS

Newer conditional control flow remains developing

The current CSS Conditional Rules Level 5 Working Draft also introduces the generalized `@when` conditional rule and chained `@else` conditionals. These are worth recognizing as current specification work, but this lesson keeps them status-only for now rather than adding a runnable baseline until implementation support and syntax stability justify it.

Media Queries Level 4 is a Candidate Standard, while Level 5 is a Draft Standard. Conditional Rules Level 4 is a Candidate Recommendation Draft and Level 5 is a Working Draft. Developing syntax such as newer conditional-rule features is labeled as such rather than taught as universally settled authoring practice.

Quick decision tree

Ask three questions: Is the condition about the output environment? Use a media query. Is it about CSS capability? Use @supports. Is it about the size of a particular component’s containing context? That belongs to Container Queries, not this lesson.

?

Practice: change one condition

When experimenting, change one condition at a time. Keep the HTML and the declarations stable so the visible change can be attributed to the gate rather than to a layout rewrite.

?

Authoring rules to keep

Write conditions around behavior, keep the condition separate from the feature’s detailed semantics, prefer capability queries over browser detection, and remember that admitted rules still enter the normal cascade. When a condition belongs to a component’s container rather than the output environment, move to Container Queries.

?

?

?

?

?

?

When you are ready, test the model with the dedicated Media Queries and Conditional Rules quiz.

• Take the Media Queries and Conditional Rules quiz