Using PostCSS with Media Queries Level 4

Media queries provide developers with a powerful way to deliver an optimal web experience for website visitors, regardless of the type or size of the user’s device. For example, media queries may be used to automatically adjust the style of a document or its elements based on a device’s screen size.

PostCSS JavaScript plugins can be used to efficiently implement media queries. This tool enables developers to write CSS preprocessors or postprocessors. PostCSS can handle a variety of tasks like linting CSS, transpiling future CSS syntax, displaying inline images, and supporting mixins and variables. Development needs can vary greatly by project, but fortunately, there are several PostCSS plugins available.

In this article, we’ll review several features available in Media Queries Level 4. We’ll use PostCSS to demonstrate the implementation of each feature. At the time of writing, Media Queries Level 5 is still being drafted.

We’ll use Codepen throughout the article to demonstrate examples. This online code editor allows us to keep things simple, readily view our output, and avoid using any type of CSS or JavaScript framework.

Let’s get started!

Setting up PostCSS for Codepen

If you don’t have a Codepen account, you can create one here.

To set up PostCSS for the Codepen demonstrations, follow these five steps:

1. Create a new pen by clicking Pen on the sidebar.
   
2. Click the Settings button to open this modal:
   
3. Select CSS from the sidebar to reveal different CSS settings.
4. From the CSS Preprocessor dropdown, choose PostCSS. Under CSS Base, select Normalize. Then, under Vendor Prefixing, select Autoprefixer.
   

Autoprefixer is a PostCSS plugin that uses values from Can I Use, removing the need to write vendor prefixes. This saves time and helps keep the code clean.

Click on the Need an add-on? badge at the top-right of the modal to display a list of available PostCSS plugins. Throughout the tutorial, we’ll add several of these directly into the code:

5. Select Save & Close.

Implementing Media Queries Level 4 features with PostCSS

Now, let’s explore some of the most interesting Media Queries Level 4 features. As we review each feature, we’ll look at sample code written with the PostCSS plugin.

pointer

The pointer media feature is useful for checking for the presence and accuracy of a pointing device, such as a mouse or touchscreen. It can also be used to write media queries based on the type of pointer that is present in the user’s device.

There are three values available for the pointer: none, coarse, and fine.

The following code uses the postcss-custom-media plugin to make radio buttons and checkboxes larger when a coarse (or less precise) pointer type is detected:

@use postcss-custom-media;

@custom-media --pointer-check (pointer: coarse);

@media (--pointer-check) {
    input[type="checkbox"], input[type="radio"] {
    min-width:30px;
    min-height:40px;
    background:transparent;
  }
}

range

The range media feature enables us to adjust the display based on user devices that fall within a specified minimum and maximum value for a particular dimension.

The following code uses the postcss-media-minmax plugin to change the style of a display for user device screens within a specified width range:

@use postcss-media-minmax;

@media screen and (500px <= width <= 1200px) {
  .bar {
    display: block;
  }
}

color

The color media feature enables us to test the number of bits per color component (red, green, and blue) for visual devices. Monochrome devices will have a value of zero.

The following code uses the postcss-media-minmax plugin to display a specified style for user devices of at least 8 bits per color component:

/* This media query expresses that a style sheet applies to color devices with at least 8 bits per color component */

@use postcss-media-minmax;

@media (color >= 8) { … }

resolution

The resolution media feature allows us to examine the pixel density of any output device. This enables us to manage display quality while rendering content to users.

The following code uses the postcss-media-minmax plugin to adjust text resolution based on the pixel density of the user’s output device:

@use postcss-media-minmax;

@custom-media --exact-resolution (resolution: 150dpi);
@custom-media --min-resolution (min-resolution: 72dpi);
@custom-media --max-resolution (max-resolution: 300dpi);

/* Exact resolution */
@media (--exact-resolution) {
  p {
    color: red;
  }
}

/* Minimum resolution */
@media (--min-resolution) {
  p {
    text-decoration: underline;
  }
}

/* Maximum resolution */
@media (--max-resolution) {
  p {
    background: yellow;
  }
}

hover

The hover media query provides us with a native CSS solution for testing touch support on user devices. It checks if the user’s primary input device can hover over HTML elements.

For example, the following code uses the postcss-custom-media plugin to display a hover-activated dropdown menu only when that feature is available on the user’s device.

@use postcss-custom-media;

@custom-media --hover-check (hover);

@media ((--hover-check)) {
  .menu > li        {display:inline-block;}
  .menu ul          {display:none; position:absolute;}
  .menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

Media Queries Level 4 also permits the use of logical operators such as and, not, and only. In the above example, the use of not would negate the media feature. In other words, not(--hover-check) would only match visual devices that lack hover functionality.

update

The CSS update media feature comes to the rescue when we want to evaluate the ability of a user’s output device to modify the appearance of rendered content. This feature is particularly useful for helping to determine the type of functionality needed for web content, based on the user’s output device.

The update media feature accepts three values: none, slow, and fast.

As an example, consider a webpage with links that are underlined on hover. It may be helpful to display those links as underlined if the page is downloaded or printed.

The following code uses the postcss-custom-media plugin to check for links that are underlined on hover and then always display them with an underline:

@use postcss-custom-media;

@custom-media --update-check (update);

@media (--update-check) {
  a { text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
}

/* In non-updating output devices, the links are always underlined. */

Conclusion

in this article, we covered how to use PostCSS with the pointer, range, color, resolution, hover, and update features available in Media Queries Level 4. PostCSS is a useful tool for enhancing CSS workflow. It’s incredibly fast, and its naming syntax is greatly simplified thanks to a large ecosystem of available plugins.

Check out the PostCSS Documentation for additional information to help you harness the power of PostCSS. Details on additional Media Queries Level 4 features may be found in its documentation and on MDN.