css-mediaquery

Parses and determines if a given CSS Media Query matches a set of values.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
css-mediaquery
111160.1.210 years ago10 years agoMinified + gzip package size for css-mediaquery in KB

Readme

CSS Media Query
Build Status Dependency Status npm Version
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 Queriesw3c-mq and CSS3 Values and Unitsw3c-vu. It supports all of the Media Featuresw3c-mq-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.