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.

The fix option can automatically fix some of the problems reported by this rule.

Options​

"context"​

Media feature ranges must always use context notation.

{
  "media-feature-range-notation": "context"
}

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.

{
  "media-feature-range-notation": "prefix"
}

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) {}