• Stars
    star
    112
  • Rank 312,240 (Top 7 %)
  • Language
    JavaScript
  • License
    Other
  • Created almost 11 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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.

More Repositories

1

express-handlebars

A Handlebars view engine for Express which doesn't suck.
JavaScript
2,314
star
2

open-marriage

The open source website for Leslie Verploegen's and Eric Ferraiuolo's wedding
JavaScript
217
star
3

express-slash

Express middleware for people who are anal about trailing slashes.
JavaScript
155
star
4

photosnear.me

Photos Near Me
JavaScript
99
star
5

urljs

[DEPRECATED] An API for working with URLs in JavaScript
JavaScript
75
star
6

timebox

This app helps TC39 stay on agenda during meetings.
JavaScript
20
star
7

grunt-css-selectors

Mutate CSS selectors.
JavaScript
19
star
8

grunt-broccoli-build

Runs a Broccoli build via Grunt.
JavaScript
13
star
9

rework-mutate-selectors

Mutate CSS selectors via Rework.
JavaScript
6
star
10

button.css

The Holy Grail of CSS buttons
6
star
11

nowww

A simple Node.js server that responds to `www.` requests with a redirect to the same URL without the pointless `www.` subdomain.
JavaScript
6
star
12

square-thing-app

Super simple example app using YUI's Y.App component.
JavaScript
6
star
13

formatjs-express-handlebars

Example Express app using FormatJS and Handlebars
JavaScript
5
star
14

amazon-silk-findings

A collection of findings that pertain to web developers who are supporting the interesting hybrid web browser on the Kindle Fire.
4
star
15

yui3-grids-annotations

A bookmarklet that annotates the grid structure of a web page using YUI 3 CSS Grids.
JavaScript
4
star
16

require-overhead

Test the overhead of the ES6 Module bundle format vs Browserify's and Webpack's CommonJS format.
JavaScript
2
star
17

basecss

A Baseline CSS for starting new projects
2
star
18

189oakstreet.com

2
star
19

ericf.github.com

My GitHub pages
1
star
20

enviroecon.org

Website for the Investing in a Sustainable Future Conference.
HTML
1
star
21

pjax-blacklist

YUI Pjax blacklist example
JavaScript
1
star
22

yapp-react

JavaScript
1
star
23

express-extend

Extend Express apps in the most compatible way
JavaScript
1
star