Specify a list of allowed name and unit pairs within media features.
@media (width: 50em) {}
/** ↑ ↑
* This media feature name and these units */
object
: { "name": ["array", "of", "units"]|"unit" }
If a feature name is surrounded with "/"
(e.g. "/height/"
), it is interpreted as a regular expression. This allows, for example, easy targeting of shorthands: /height/
will match height
, min-height
, max-height
, etc.
Given:
{
"width": "em",
"/height/": ["em", "rem"]
}
The following patterns are considered problems:
@media (width: 50rem) {}
@media (height: 1000px) {}
@media (min-height: 1000px) {}
@media (height <= 1000px) {}
The following patterns are not considered problems:
@media (width: 50em) {}
@media (width <= 50em) {}
@media (height: 50em) {}
@media (min-height: 50rem) {}