Using Custom Properties and Media Queries Together

Custom properties and media queries are both incredibly useful CSS features in their own right. Using them together is a one-two power punch that lets us get the most out of both.

Custom properties, also known as CSS variables, make it easy to keep colors, margins, or font styles consistent. We can set a value once, then reuse it throughout our code. Add a media query, and we can make these values easy to maintain and change across viewport sizes and media types.

Defining and using custom properties

The syntax to declare a custom property is simple: two dashes, followed by a name, like so:

--primary-brand: #369;

Custom property names can contain just about any kind of character. Alphanumeric characters, hyphens, and underscores are all permitted. So are emoji, although, for the sake of readability, you shouldn't use them. Unlike other CSS properties, custom properties are case-sensitive; --typesize and --typeSize are considered two separate properties.

Because they are properties, they need to be defined as part of a rule set, within a declaration block. Adding --primary-brand: #369; to the beginning of your style sheet won't work, just like using background-color outside of a rule set won't.

:root {/* The document's root element. */

    --primary-brand: #369;

}

Here we've used the :root pseudo-class as a selector. The :root pseudo-class refers to the document element — html for HTML documents, and svg for SVG documents. We could just as easily have used html or body. Using an element such as `p` or `section` also works. Defining properties using a "top-level" selector just ensures that the value is available for every descendent.

Using a custom property

To use a custom property, pass it as an argument to the var() CSS function.

h1 {

    color: var(--primary-brand);

}

The var() function also accepts fallback value arguments.

h1 {

    color: var(--primary-brand, #222); /* #222 is the fall back argument */

}

If the custom property isn't defined, the fall back value will apply. But there's a catch: if the custom property value is _invalid_ for the standard property value, the entire declaration will fail. Instead, the used value will be the property's inherited or initial value.

:root {

    --primary-brand: #ffg /* Invalid CSS color value */

}

body {

    color: #333;

}

h1 {

    color: var(--primary-brand, #f30); /* Parsers will ignore this rule */

}

Because the value of --primary-brand is not a valid CSS color value, the color declaration for h1 will fail. Instead, h1 elements will inherit the color value of the body element.

Setting media-specific margins and font sizes

One way to take advantage of custom properties and media queries: set media-specific values. Here, we've set different max-width, font-size and margin values for screen and print.

:root {

    --max-content-area: 30rem;

    --content-type-size: 16px;

    --content-margin: 2rem;

}

@media print {

    /* Assumes an A4 paper size */

    :root {

        --max-content-area: 16cm;

        --content-type-size: 12pt;

        --vert-margin: 2.54cm;

        }

}

article {

    max-width: var(--max-content-area);

    font-size: var(--content-type-size);

    margin: var(--vert-margin) auto;

}

Using fallback values, we could also write the preceding CSS as follows.

@media print { /* Assumes an A4 paper size */

    :root {

        --max-content-area: 16cm;

        --content-type-size: 12pt;

        --vert-margin: 2.54cm;

        }

}

article {

    max-width: var(--max-content-area, 30rem);

    font-size: var(--content-type-size, 16px);

    margin: var(--vert-margin, 2rem) auto;

}

The latter version saves several bytes, but arguably compromises readability.

Supporting users' preferred color schemes

With the introduction of the prefers-color-scheme media query, web users can set a system-wide preference for a light or dark colors. Custom properties make supporting prefers-color-scheme a breeze.

@media screen and (prefers-color-scheme: dark) {

    :root {

        --bg-color: #222;

        --text-primary: #f5f5f5;

        --button-bg: hsl(304, 78%, 27%);

        }

}

body {

    background: var(--bg-color, #fff);

    color: var(--text-primary, #000);

}

button {

    background: var(--button-bg, hsl(304, 78%, 87%));

}

In this example, our fall back color scheme is a white background with black text and pink buttons. If the user prefers a dark color scheme, the background will instead be a deep, dark gray with cool white text, and reddish-purple buttons. Other ideas for combining custom properties and media queries? You might adjust the `stroke-width` value of an SVG element based on its viewport width. Or maybe you'd increase the padding for click targets when `pointer: coarse` is true. Using custom properties in combination with media queries can help us write leaner, more maintainable CSS.

Until next time,
James at SitePoint