Tag Archives: css features

What is CSS 4 Media Queries?

CSS4 What is it going to be like?

Well, the next generation of Media Queries, CSS 4 Media Queries, was officially made public last year with the last edit in December 2012. Here is the editor’s draft. As I stated, CSS3 Media Queries was mainly focused on the ability to change the format of content for different screen sizes and resolutions. CSS 4 Media Queries, on the other hand, is set to handle a variety of input methods and other capabilities of different devices, and allow for differing presentation depending upon the device capabilities. So far, there are several new media features and others that are basically more descriptive features of previous versions of CSS. Below is a list and link to all of them thus far:

Media Features:

Hover
A feature I found useful and interesting is the ‘hover’ media feature. The ‘hover’ media feature can be used to query whether or not the primary pointing system used on an output device is capable of hovering. If it is capable, the value will be designated ‘1’ if not the value will be ‘0’.
If a device has multiple pointing devices, some of which support hovering and some of which do not, the specification recommends that the UA reports the hovering ability of the least capable of the primary pointing devices. For example, on a touch screen device the value of the ‘hover’ media query should be 0, even if an optional mouse (which is capable of hovering) is attached.
I think it’s great that they’re working on this feature simply because there have been many times when I have gone to a mobile website and they have hover drop-downs that don’t work correctly with touch screens. Resolving this will make a much better user experience especially as our experiences online become more touchscreen oriented.
More information on the ‘hover’ media feature can be found in the editors working draft here.

Luminosity
Another feature that can be useful for mobile devices is the luminosity feature. Here is an excerpt from W3.org:

The ‘luminosity’ media feature is used to query about the ambient luminosity in which the device is used, to allow the author to adjust style of the document in response. The following values are valid:

dim
The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.
normal
The device is used in a environment with a level of luminosity in the ideal range for the screen, and which does not necessitate any particular adjustment.
washed
The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.

Although there are no browsers that support the new CSS4 features, usually Chrome is the first to adopt the latest CSS features. Either way I’ll let you know when browsers get up to speed.

Last updated by at .