Media Queries Level 4

At the time of writing, while CSS Media Queries Level 4 enjoy a draft specification (http://dev.w3.org/csswg/mediaqueries-4/), the features in the draft don't enjoy many browser implementations. This means that while we will take a brief look at the highlights of this specification, it's highly volatile. Ensure you check browser support and double-check for syntax changes before using any of these features.

For now, while there are other features in the level 4 specification, we will concern ourselves only with scripting, pointer and hover, and luminosity.

Scripting media feature

It's a common practice to set a class on the HTML tag to indicate that no JavaScript is present by default and then replace that class with a different class when JavaScript runs. This provides a simple ability to fork code (including CSS) based upon that new HTML class. Specifically, using this practice you can then write rules specific to users that have JavaScript enabled.

That's potentially...