1 | # media-feature-name-no-unknown
|
2 |
|
3 | Disallow unknown media feature names.
|
4 |
|
5 |
|
6 | ```css
|
7 | @media (min-width: 700px) {}
|
8 | /** ↑
|
9 | * This media feature name */
|
10 | ```
|
11 |
|
12 | This rule considers media feature names defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
|
13 |
|
14 | This rule ignores vendor-prefixed media feature names.
|
15 |
|
16 | ## Options
|
17 |
|
18 | ### `true`
|
19 |
|
20 | The following patterns are considered violations:
|
21 |
|
22 |
|
23 | ```css
|
24 | @media screen and (unknown) {}
|
25 | ```
|
26 |
|
27 |
|
28 | ```css
|
29 | @media screen and (unknown: 10px) {}
|
30 | ```
|
31 |
|
32 |
|
33 | ```css
|
34 | @media screen and (unknown > 10px) {}
|
35 | ```
|
36 |
|
37 | The following patterns are _not_ considered violations:
|
38 |
|
39 |
|
40 | ```css
|
41 | @media all and (monochrome) {}
|
42 | ```
|
43 |
|
44 |
|
45 | ```css
|
46 | @media (min-width: 700px) {}
|
47 | ```
|
48 |
|
49 |
|
50 | ```css
|
51 | @media (MIN-WIDTH: 700px) {}
|
52 | ```
|
53 |
|
54 |
|
55 | ```css
|
56 | @media (min-width: 700px) and (orientation: landscape) {}
|
57 | ```
|
58 |
|
59 |
|
60 | ```css
|
61 | @media (-webkit-min-device-pixel-ratio: 2) {}
|
62 | ```
|
63 |
|
64 | ## Optional secondary options
|
65 |
|
66 | ### `ignoreMediaFeatureNames: ["/regex/", /regex/, "string"]`
|
67 |
|
68 | Given:
|
69 |
|
70 | ```
|
71 | ["/^my-/", "custom"]
|
72 | ```
|
73 |
|
74 | The following patterns are _not_ considered violations:
|
75 |
|
76 |
|
77 | ```css
|
78 | @media screen and (my-media-feature-name) {}
|
79 | ```
|
80 |
|
81 |
|
82 | ```css
|
83 | @media screen and (custom: 10px) {}
|
84 | ```
|
85 |
|
86 |
|
87 | ```css
|
88 | @media screen and (100px < custom < 700px) {}
|
89 | ```
|
90 |
|
91 |
|
92 | ```css
|
93 | @media (min-width: 700px) and (custom: 10px) {}
|
94 | ```
|