This media query has not yet been implemented and is currently only a proposed spec. I've written this post to raise awareness of it and get general thoughts about it.
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios. One new proposed CSS media query is the pointer media query; the pointer media query provides information about how accurate the device pointer is (if present).
The pointer media query has three values:
none - device has no pointercoarse - pointer has limited accuracyfine - pointer has high level of accuracyA fine pointer would be a mouse or a stylus-based touch screen, while a coarse pointer would be a finger-based touch screen, like an iPad, iPhone, or other tablet. The example provided within the spec shows enlarging checkboxes and radio buttons on coarse-pointered devices:
/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}
I envision this API being used to enlarge navigation items and other prominent links when the pointer is coarse. What would you do with the pointer media query?
Recent FeaturesI remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
Theming has become a big part of the Web 2.0 revolution. Luckily, so too has a higher regard for semantics and CSS standards. If you build your pages using good XHTML code, changing a CSS file can make your website look completely different.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4