@@ -11,10 +11,10 @@ JavaScript.
11
11
Installation
12
12
------------
13
13
14
- Install via npm
14
+ Install via npm:
15
15
16
- ```
17
- npm install css-mediaquery
16
+ ``` shell
17
+ $ npm install css-mediaquery
18
18
```
19
19
20
20
Usage
@@ -39,25 +39,38 @@ var isMatch = mediaQuery.match('screen and (min-width: 40em)', {
39
39
console .log (isMatch); // => true
40
40
```
41
41
42
+ The values specified to check a media query string against should be thought of
43
+ as if they are the current state of a device/browser. A ` type ` value _ must_ be
44
+ specified, and it can _ not_ be ` "all" ` .
45
+
42
46
### Parsing
43
47
44
48
Existing CSS Parsers don't do a great job at parsing the details of media
45
49
queries. That's where ` css-mediaquery ` shines. You can parse a media query
46
50
expression and get an AST back by using the ` parse() ` method.
47
51
48
52
``` javascript
49
-
50
- var mediaQuery = require (' css-mediaquery' );
51
-
52
- var ast = mediaQuery .parse (' screen and (min-width: 48em)' );
53
+ var mediaQuery = require (' css-mediaquery' ),
54
+ ast = mediaQuery .parse (' screen and (min-width: 48em)' );
53
55
```
54
56
55
57
The ` ast ` variable will have the following payload:
56
58
57
59
``` javascript
58
- [ { inverse: false , type: ' screen' , expressions: [
59
- { modifier: ' min' , feature: ' width' , value: ' 48em' }
60
- ] } ]
60
+ [
61
+ {
62
+ inverse: false ,
63
+ type : ' screen' ,
64
+
65
+ expressions: [
66
+ {
67
+ modifier: ' min' ,
68
+ feature : ' width' ,
69
+ value : ' 48em'
70
+ }
71
+ ]
72
+ }
73
+ ]
61
74
```
62
75
63
76
This package was written with care to following the W3C Recommendations for
@@ -66,11 +79,6 @@ all of the [Media Features][w3c-mq-features] and will properly convert values to
66
79
a common unit before comparing them.
67
80
68
81
69
- The values specified to check a media query string against should be thought of
70
- as if they are the current state of a device/browser. A ` type ` value _ must_ be
71
- specified, and it can _ not_ be ` "all" ` .
72
-
73
-
74
82
[ w3c-mq ] : http://www.w3.org/TR/css3-mediaqueries/
75
83
[ w3c-mq-features ] : http://www.w3.org/TR/css3-mediaqueries/#media1
76
84
[ w3c-vu ] : http://www.w3.org/TR/css3-values/
0 commit comments