CSS Media Query
Parses and determines if a given CSS Media Query matches a set of values via JavaScript.
Installation
Install via npm:
$ 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.
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.
var mediaQuery = require('css-mediaquery'),
ast = mediaQuery.parse('screen and (min-width: 48em)');
The ast
variable will have the following payload:
[
{
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 and CSS3 Values and Units. It supports all of the Media Features and will properly convert values to a common unit before comparing them.
License
This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.