container-queries

ContainerQueries

A set of utilities for creating simple, width-based container queries.

Installation

Usage

First, import the ContainerQuery object from this package:

import ContainerQuery from 'container-queries';

Then, create the container queries around a given node using the create method:

let myNode = document.getElementById('MyNode');
let containerQuery = ContainerQuery.create(myNode);

Finally, add your container query conditions using the addQuery method of the returned object. You can specify a min and/ or max width for which the query is considered active. By default, these measures are considered inclusive. If you wish to make one or both exclusive, pass the inclusive option with a value of false (all exclusive), 'min' (max is exclusive), or 'max' (min is exclusive).

In addition, ensure that you pass an identifier; this is the value that must be used in your stylesheets to respond to the query. You can also provide a test method instead of a min/ max, which must take the current width and return a boolean indicating whether the query should match given that width.

containerQuery.addQuery({min: 320}, identifier: 'phone-up');
containerQuery.addQuery({min: 1000, max: 2000}, inclusive: 'min', identifier: 'big');
containerQuery.addQuery({
  test(width) { return (width % 2) === 0 },
  identifier: 'even',
})

These queries will automatically be updated as the parent of the node changes size.

Finally, in your CSS file, add a selector that will inform you of when a given query matches. This plugin uses the data-container-query-matches attribute to provide this information by populating it with a space-separated list of matching queries.

.my-component[data-container-query-matches="phone-up"] {} /* only phone query matches */
.my-component[data-container-query-matches~="big"] {} /* big query (and possibly more) matches */

This plugin includes styling utilities for a variety of pre- and post-processors to make these declarations more friendly.