blob: 4c346229e2304905534d223db5dee75e58f51178 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
CSS Media Query
===============
[](https://travis-ci.org/ericf/css-mediaquery)
[](https://gemnasium.com/ericf/css-mediaquery)
[](https://npmjs.org/package/css-mediaquery)
Parses and determines if a given CSS Media Query matches a set of values via
JavaScript.
Installation
------------
Install via npm:
```shell
$ npm install css-mediaquery
```
Usage
-----
This package has two exports: `parse()`, and `match()` which can parse CSS Media
Queries and determine if a media query matches a given set of values.
### Matching
The `match()` method lets you compare a media query expression with a JavaScript
object and determine if a media query matches a given set of values.
```javascript
var mediaQuery = require('css-mediaquery');
var isMatch = mediaQuery.match('screen and (min-width: 40em)', {
type : 'screen',
width: '1024px'
});
console.log(isMatch); // => true
```
The values specified to check a media query string against should be thought of
as if they are the current state of a device/browser. A `type` value _must_ be
specified, and it can _not_ be `"all"`.
### Parsing
Existing CSS Parsers don't do a great job at parsing the details of media
queries. That's where `css-mediaquery` shines. You can parse a media query
expression and get an AST back by using the `parse()` method.
```javascript
var mediaQuery = require('css-mediaquery'),
ast = mediaQuery.parse('screen and (min-width: 48em)');
```
The `ast` variable will have the following payload:
```javascript
[
{
inverse: false,
type : 'screen',
expressions: [
{
modifier: 'min',
feature : 'width',
value : '48em'
}
]
}
]
```
This package was written with care to following the W3C Recommendations for
[CSS3 Media Queries][w3c-mq] and [CSS3 Values and Units][w3c-vu]. It supports
all of the [Media Features][w3c-mq-features] and will properly convert values to
a common unit before comparing them.
[w3c-mq]: http://www.w3.org/TR/css3-mediaqueries/
[w3c-mq-features]: http://www.w3.org/TR/css3-mediaqueries/#media1
[w3c-vu]: http://www.w3.org/TR/css3-values/
License
-------
This software is free to use under the Yahoo! Inc. BSD license.
See the [LICENSE file][] for license text and copyright information.
[LICENSE file]: https://github.com/ericf/css-mediaquery/blob/master/LICENSE
|
