- June 21, 2021
- Posted by: team SOUTECH
- Category: Responsive Web Design
Specifications at the W3C go through a ratification process, from Working Draft (WD), to Candidate Recommendation (CR), to Proposed Recommendation (PR), before finally arriving, many years later, at W3C Recommendation (REC). So modules at a greater maturity level than others are generally safer to use. For example, CSS Spatial Navigation Level 1 is in progress as I write this (http://www.w3.org/TR/css-nav-1/) at WD status with no support in browsers. Meanwhile the topic of this chapter, Media Queries Level 3, is implemented in every modern browser.
If you have a spare day, you can knock yourself out reading all about the official explanation of the standards ratification process at http://www.w3.org/2005/10/Process-20051014/tr.
At the time of writing, while CSS Media Queries Level 4 enjoys a draft specification: http://dev.w3.org/csswg/mediaqueries-4/, not all the features it documents enjoy browser implementations. So in this section, we will concentrate on Media Queries Level 4 features that we can make use of—features already implemented in browsers.
Interaction media features
Interaction media queries are concerned with pointing devices and hover capability. Let’s see what each of these can do for us.
The pointer media feature
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 might 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 might 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 */
}
Browsers report whether the value of pointer is fine, coarse, or none, based on the “primary” pointing device. Therefore, consider that just because a device has the capability of a fine pointer, it doesn’t mean that will be the primary pointing device. Think of tablets where the primary pointer is a finger (coarse), but that has an attached stylus—a fine pointing device.
The safest bet is always to assume users are using touch-based input and to 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 don’t provide affordance for coarse pointers, it might make for a difficult user experience.
Read the draft of this feature here: https://www.w3.org/TR/mediaqueries-4/#pointer.
The hover media feature
As you might imagine, the hover media feature tests a device’s 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 at them with a value of none:
@media (hover: none) {
    /* styles for when the user cannot hover */
}
Or, as before, we might choose to make the non-hover scenario the default and then only add hover styles for devices that take advantage of them:
@media (hover) {
    /* styles for when 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.
That way, if you want to apply styles if any input device is capable of hover, regardless of whether that input device is the primary one:
@media (any-hover: hover) {
/* styles if any input device is capable of hover*/
}
If you wanted to style an element a certain way based upon whether any attached pointer device was coarse, you could use any-pointer like this:
@media (any-pointer: coarse) {
/* styles to be applied if any attached pointer is coarse */
}
The prefers-color-scheme media feature
In the last couple of years, popular operating systems for both desktop and mobile computers have given users the option of a “dark mode.” To supplement this, operating systems expose this user preference to the browser by way of the prefers-color-scheme media feature. This media query is actually in Level 5 of the specification, not Level 4. However, it is in the odd situation of being implemented in most common browsers already.
At present there are three possible preferences: light, dark, and no-preference. To demonstrate this feature’s use, we might amend the default colors for a page like this:
body {
background-color: #e4e4e4;
color: #545454;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #ddd;
}
}
In the same vein as I’m recommending you to write your default “mobile” styles in the root of your style sheets, I would recommend writing the default colors in the root too and add one of these queries to cater for an alternative interface if needed or desired.
You can read the draft specification for the prefers-color-scheme media feature here: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme.