Exploring custom media queries in PostCSS

Making the switch to using PostCSS is a cinch, we can use the postcss-custom-media plugin for this purpose, available at https://github.com/postcss/postcss-custom-media.

The plugin is easy to install, it follows the same principles as all of the other plugins we've covered, so without further ado, let's get that out of the way now:

Fire up a Node.js command prompt, then navigate to the working directory.
At the prompt, enter this command, then press Enter:
```
npm install --save-dev postcss-custom-media
```
Keep the command prompt open for now, we will use it in the next few steps.
With the plugin installed, we can now use it, before we get stuck into converting our previous demo, let's work through a simple example, so you can see it in action:

In a new file, add the following code, saving it as style.css within the src folder at the root of our project area:

@custom-media --apple-watch (max-device-width: 42mm) and (min-device-width: 38mm);

@media (--apple-watch) {
  h2 {
    font-size: 0.8rem;
  }
}

Remove the existing gulpfile.js file from the root of the project area.

In a new file, add the following code, this will form a new gulpfile.js file; save this to the root of our project area:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var customMedia = require('postcss-custom-media');

gulp.task('default', function() {
    return gulp.src('src/*.css')
    .pipe(postcss([ customMedia() ]))
    .pipe(gulp.dest('dest/'));
});

var watcher = gulp.watch('src/*.css', ['default']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

Revert back to the command prompt session we had open earlier, then enter gulp at the command prompt, and press Enter.
If all is well, we should see this code if we open up the compiled style.css from within the dest folder of our project area:
```
@media (max-device-width: 42mm) and (min-device-width: 38mm) {
  h2 {
    font-size: 0.8rem;
  }
}
```

Believe it or not, this is all that is required to use the plugin; let's take a moment to consider what we've covered through this demo.

At first glance, you might be forgiven for thinking that this plugin doesn't actually do anything to help us—it's a valid point, but there is one key benefit to using this plugin. We can separate out the media breakpoints into separate variable statements, and store these at the top of our style sheet. This means that if we should ever need to update a particular breakpoint, we only need to do it once. Our code is then updated automatically at the compilation stage.

With that in mind, let's get stuck into a demo; we're going to work through the previous plain CSS version of our parallax scrolling example, and convert it to use PostCSS.

Beginning with plain CSS

Over the next few pages, we're going to use a relatively recent technique as the basis for our demo—parallax scrolling. Just in case you've been under a rock, parallax scrolling is a single page application, which allows us to scroll through content whilst showing a number of fixed images behind our content:

We'll be using a demo created by Nick Salloum, which is available at http://callmenick.com/_development/simple-parallax-effect/ (I've simplified some of the CSS styles used, removed vendor prefixes, and reduced the number of separate files called by the example). We'll start with a plain CSS version of our demo—go ahead and extract a copy of Tutorial11 to our project area. Try running index.html; if all is well, we should see something akin to the screenshot at the head of this section.

It's a great effect when used well, our interest is in the last section of the CSS file, from around line 133; this section contains the media queries we will convert in our next demo.

Altering our demo to use PostCSS

If media queries are used correctly, this can open up a world of possibilities; we can tweak our style sheet for anything from an iPhone through to a printer. In our demo, we've used a couple to adjust how content is displayed on sites where displays are larger than 600px or 960px width; altering these to work in PostCSS is a cinch.

Note

The CSS3 Media Queries site has a large list of different types of queries that are available; if you check out the site on a target PC or device, it will show you if that query is supported on that device. The full list is available at http://www.cssmediaqueries.com.

We only need to make a couple of changes in the style sheet to switch to using PostCSS, so let's make a start:

Let's make a start on the changes:

We'll start by copying the style.css file from Tutorial11 folder to the src folder in our project area.
We need to edit the file, to convert our media queries to use the PostCSS plugin—go ahead and add these two lines at lines 4 and 5:
```
@custom-media --small-viewport all and (min-width: 600px);
@custom-media --medium-viewport all and (min-width: 960px);
```
Further down, replace lines 161 and 182 with this code:
```
@media (--small-viewport) {
```
On line 200, replace that line with this code:
```
@media (--medium-viewport) {
```
Save the file—next, go ahead and replace the current gulpfile.js file with the version from the root of the Tutorial12 folder. It has the same initial PostCSS task, but this has been renamed and extended with additional tasks that we've already used from earlier chapters.
Next, go ahead and save a copy of the package.json file from the same location to the root of our project area—this contains updated links to the plugins used in this demo.
Fire up a Node.js command prompt window, then change the working directory to our project area. At the prompt, enter gulp then press Enter.
If all is well, we should have a compiled CSS file appear in the dest folder—go ahead and copy this into the css folder of the Tutorial12 folder.
Go ahead and run index.html in our project area, to preview the results—if all is well, we should not see anything different, but a quick check in the source code should show that we're using the minified version of our code:

It's worth noting that in our demo, we used a typical format of media query: we could for example extend or alter our style sheet to work on handheld devices such as Galaxy tablets; the same principles apply, but clearly different width values will need to be used! For details on the values to use, take a look at http://cssmediaqueries.com, which has a useful list of queries to use for recent devices.

If we want to push the boundaries of what is possible, there are a couple of options that we can consider:

postcss-media-variables: This plugin (available at https://github.com/WolfgangKluge/postcss-media-variables) works in the same way, but allows us to use variables in media queries. The benefit of using this plugin is that we can hive off width values into a central :root rule; we can potentially use one fixed value, but work out others based on this value:
```
/* input */
:root {
    --min-width: 1000px;
    --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}
/* output */
@media (min-width: 1000px) {}
@media (max-width: 999px) {}
@media (max-width: 480px) {}
```
The downside is that it is considered as non-standard, the plugin must be called twice, and if other plugins are used, be called in a certain order—this means it might only suit a specific set of circumstances!
postcss-quantity-queries: This plugin (available at https://github.com/pascalduez/postcss-quantity-queries) is based on the SASS quantity queries mixins by Daniel Guillan. This allows us to use rules such as this:
```
ul > li:at-least(4) { color: rebeccapurple; }
```
Which will compile to this:
```
ul > li:nth-last-child(n+4),
ul > li:nth-last-child(n+4) ~ li {
  color: rebeccapurple;
}
```

This is one of four pseudo-selector extensions we can use with this plugin, it's a perfect way to style items such as navigation entries, or if we wanted a numbered list of items with different styles for even or odd numbers.

Note

For a useful reference article on using quantity queries in CSS, head over to the post by Heydon Pickering at http://alistapart.com/article/quantity-queries-for-css.

Let's change tack now, and focus on our content. So far, we've concentrated on the page layout, but we can take it further by making images truly responsive; let's dive in and take a look.

Previous Chapter

4. Building Media Queries

Next Chapter

Making images responsive

Table of Contents for Mastering PostCSS for Web Design

Exploring custom media queries in PostCSS

Beginning with plain CSS

Altering our demo to use PostCSS

Note

Note

Table of Contents for
Mastering PostCSS for Web Design