Dublin Library

The Publishing Project

Custom Media Queries

  • 2 min. read

 

When working with media queries is that we can't reuse media queries.

A naive approach is to define the value as a CSS variable in the :root pseudo-class.

:root {
  --width: 20em;
}
CSS

And then use the variable in the media query. Unfortunately, this doesn't work.

/* This will not work */
@media (min-width: var(--width)) {
}
CSS

Instead of using CSS variables, we can use custom media queries. These are aliases for media queries.

This is a two step process. First, we define the media query using @custom-media. The value for the custom media is included in parentheses and is equivalent to the media query.

@custom-media --narrow-window (max-width: 30em);
CSS

You can also use combination of queries in the @custom-media rule declaration.

@custom-media --modern (color), (hover);
CSS

You then reference the custom media query in the @media rule, either indivudually.

@media (--narrow-window) {
  /* narrow window styles */
}

@media (--modern) {
	/* modern styles */
}
CSS

Or in combination with other media queries and logical operators.

@media (--narrow-window) and (script) {
  /* styles for when script is allowed */
}
/* other styles */
CSS

Some considerations #

A @custom-media rule can refer to other custom media queries. However, loops are forbidden, and a custom media query must not be defined in terms of itself or of another custom media query that directly or indirectly refers to it. Any such attempt of defining a custom media query with a circular dependency must cause all the custom media queries in the loop to fail to be defined.

If multiple @custom-media rules declare the same named query, the truth value is based on the last one alone, ignoring all previous declarations of the same name.

Conclusion #

Using custom media queries makes stylesheets easier to read and maintain. You have to be careful when defining custom media queries to avoid circular dependencies and to ensure that the custom media query is defined before it is used.

Edit on Github