Skip to content
This repository has been archived by the owner on Sep 2, 2021. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

spacebarchat/css-mediaquery

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%