Skip to main content

media-feature-range-notation

Specify context or prefix notation for media feature ranges.

@media (width >= 600px) and (min-width: 600px) {}
/** ↑ ↑
* These media feature notations */

Media features of the range type can be written using prefixes or the more modern context notation.

Because min- and max- both equate to range comparisons that include the value, they may be limiting in certain situations.

Options

string: "context"|"prefix"

"context"

Media feature ranges must always use context notation.

The following patterns are considered problems:

@media (min-width: 1px) {}
@media (min-width: 1px) and (max-width: 2px) {}

The following patterns are not considered problems:

@media (width >= 1px) {}
@media (1px <= width <= 2px) {}

"prefix"

Media feature ranges must always use prefix notation.

The following patterns are considered problems:

@media (width >= 1px) {}
@media (1px <= width <= 2px) {}

The following patterns are not considered problems:

@media (min-width: 1px) {}
@media (min-width: 1px) and (max-width: 2px) {}