95 lines
2.6 KiB
Markdown
95 lines
2.6 KiB
Markdown
|
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
|