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 confusing so let's consider some example code. By default, this would be the tag as authored in the HTML:
<html class="no-js">
When JavaScript was run on the page, one of its first tasks would be to replace that no-js class:
<html class="js">
Once this is done, we can then write specific CSS rules that will only apply when JavaScript is present. For example, .js .header { display: block; }.
However, the scripting media feature of CSS Media Queries Level 4 aims to provide a more standardized manner to do this directly in the CSS:
@media (scripting: none) {
/* styles for when JavaScript not working */
}
And when JavaScript is present:
@media (scripting: enabled) {
/* styles for when JavaScript is working */
}
Finally, it also aims to provide the ability to ascertain when JavaScript is present but only initially. One example given in the W3C specification is that of a printed page that could be laid out initially but does not have JavaScript available after that. In such an eventuality, you should be able to do this:
@media (scripting: initial-only) {
/* styles for when JavaScript works initially */
}
The current Editor's draft of this feature can be read here: http://dev.w3.org/csswg/mediaqueries-4/#mf-scripting
Interaction media features
Here is the W3C introduction to the pointer media feature:
"The pointer media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, the pointer media feature must reflect the characteristics of the "primary" input mechanism, as determined by the user agent."
There are three possible states for the pointer features: none, coarse, and fine.
A coarse pointer device would be a finger on a touch screen device. However, it could equally be a cursor from a games console that doesn't have the fine grained control of something like a mouse.
@media (pointer: coarse) {
/* styles for when coarse pointer is present */
}
A fine pointer device would be a mouse but could also be a stylus pen or any future fine grained pointer mechanism.
@media (pointer: fine) {
/* styles for when fine pointer is present */
}
As far as I'm concerned, the sooner browsers implement these pointer features, the better. At present it's notoriously difficult to know whether or not a user has mouse, touch input, or both. And which one they are using at any one time.
Tip
The safest bet is always to assume users are using touch-based input and size user interface elements accordingly. That way, even if they are using a mouse they will have no difficulty using the interface with ease. If however you assume mouse input, and can't reliably detect touch to amend the interface, it might make for a difficult experience.
For a great overview of the challenges of developing for both touch and pointer, I recommend this set of slides called Getting touchy from Patrick H. Lauke: https://patrickhlauke.github.io/getting-touchy-presentation/
Read the Editor's draft of this feature here: http://dev.w3.org/csswg/mediaqueries-4/#mf-interaction
The hover media feature
As you might imagine, the hover media feature tests the users' ability to hover over elements on the screen. If the user has multiple inputs at their disposal (touch and mouse for example), characteristics of the primary input are used. Here are the possible values and example code:
For users that have no ability to hover, we can target styles for them with a value of none.
@media (hover: none) {
/* styles for when the user cannot hover */
}
For users that can hover but have to perform a significant action to initiate it, on-demand can be used.
@media (hover: on-demand) {
/* styles for when the user can hover but doing so requires significant effort */
}
For users that can hover, hover alone can be used.
@media (hover) {
/* styles for when the user can hover */
}
Be aware that there are also any-pointer or any-hover media features. They are like the preceding hover and pointer but test the capabilities of any of the possible input devices.
Environment media features
Wouldn't it be nice if we had the ability to alter our designs based upon environmental features such as ambient light level? That way if a user was in a darker room, we could dim the lightness of the colors used. Or conversely, increase contrast in brighter sunlight. The environment media features aim to solve these very problems. Consider these examples:
@media (light-level: normal) {
/* styles for standard light conditions */
}
@media (light-level: dim) {
/* styles for dim light conditions */
}
@media (light-level: washed) {
/* styles for bright light conditions */
}
Remember there are few implementations of these Level 4 Media Queries in the wild. It's also probable that the specifications will change before we can safely use them. It is however useful to have some feel for what new capabilities are on the way for us in the next few years.
Read the Editor's draft of this feature here: http://dev.w3.org/csswg/mediaqueries-4/#mf-environment