css-mediaquery

WebJar for css-mediaquery

License	BSD
GroupId	org.webjars.npm
ArtifactId	css-mediaquery
Last Version	0.1.2
Release Date	Feb 24, 2018
Type	jar
Description	css-mediaquery WebJar for css-mediaquery
Project URL	http://webjars.org
Source Code Management	https://github.com/ericf/css-mediaquery

Download css-mediaquery

Filename	Size
css-mediaquery-0.1.2.pom
css-mediaquery-0.1.2.jar	7 KB
css-mediaquery-0.1.2-sources.jar	22 bytes
css-mediaquery-0.1.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/css-mediaquery/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>css-mediaquery</artifactId>
    <version>0.1.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/css-mediaquery/
implementation 'org.webjars.npm:css-mediaquery:0.1.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/css-mediaquery/
implementation ("org.webjars.npm:css-mediaquery:0.1.2")

Apache Buildr

'org.webjars.npm:css-mediaquery:jar:0.1.2'

Apache Ivy

<dependency org="org.webjars.npm" name="css-mediaquery" rev="0.1.2">
  <artifact name="css-mediaquery" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='css-mediaquery', version='0.1.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "css-mediaquery" % "0.1.2"

Leiningen

[org.webjars.npm/css-mediaquery "0.1.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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.

Versions

Version
0.1.2 Feb 24, 2018