One of those small pet hates when working with media queries is that the query itself isn't really semantic; most queries will show something like max-width: 1024px, when we really mean …less than… or …greater than….

Thankfully, with the upcoming changes to CSS in what most people call CSS4, we will be able to use >, <, or = symbols to express what we really mean in our code. The beauty about PostCSS is that we can emulate that functionality now, with the postcss-media-minmax plugin (available at https://github.com/postcss/postcss-media-minmax); the plugin will convert these to the more familiar min- or max- statements that we already know.

It's a really easy plugin to use—we're going to break with convention here though, and use CodePen to demonstrate the plugin in action. CodePen will support a limited number of plugins, of which this is one of them—it's a perfect opportunity to see the effect of our query in action. For our demo, we're going to use the Font Awesome library to create some social media icons—our demo is loosely based on a version by Amey Raut:

You can see the demo at http://codepen.io/alibby251/pen/wKNMGL—the code that is of interest to us is from lines 70 to 79—notice the use of <= and >= in line 71:

When compiled, it shows this valid CSS:

The use of operators such as < or > in media queries is just a small part of what is coming in CSS4; for more details, take a look at the W3C editorial draft at http://dev.w3.org/csswg/—note, it makes for dry reading!