Pointing Device Adaptation
The Interaction Media part of CSS4 specification defines the media queries allowing Web applications to alter its layout and user interface depending on the way the user is supposed to interact with the application. It allows to identify the browser's primary pointer (i.e. mouse, touch, keyboard) and decides whether it is fine or coarse and whether hovering over the element is possible using the "classic" interface (like touch on tablet), so that the interface might be shrunk or enlarged and hover interactions enabled or replaced with an alternative accordingly.
Additionally, the specification defines the similar media queries for cases when all the pointing methods (not only the primary one) should be considered - i.e. to answer the question is hovering possible at all, using any method available.
API glimpse
@media (pointer: fine)- The media query that limits the enclosed CSS rules to be used only when the primary pointing device allows accurate pointing.
@media (pointer: coarse)- The media query that limits the enclosed CSS rules to be used only when the primary pointing device does not allow accurate pointing.
@media (pointer: none)- The media query that limits the enclosed CSS rules to be used only when the primary interacting device is not capable of pointing (i.e. keyboard).
@media (hover)- The media query that limits the enclosed CSS rules to be used only when the primary pointing device allows hovering over elements.
@media (any-pointer: fine)- The media query that limits the enclosed CSS rules to be used only when any of the pointing devices available allows accurate pointing.
@media (any-pointer: coarse)- The media query that limits the enclosed CSS rules to be used only when any of the pointing devices does not allow accurate pointing.
@media (any-hover)- The media query that limits the enclosed CSS rules to be used only when any of the pointing devices allows hovering over elements.
Live Demo
The button is larger when the primary pointer is coarse. The tooltip is visible on hover when the pointer allows hovering.
-
<p>The button is larger when the primary pointer is coarse. The tooltip is visible on hover when the pointer allows hovering.</p> <div class="text-center"> <button id="button">The button</button> <div id="tooltip" class="tooltip bottom" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Tooltip visible on hover when pointer allows hover </div> </div> </div> -
@media (hover: hover) { #tooltip { display: none; } #button:hover ~ #tooltip { display: block; } } @media (pointer: fine) { #button { font-size: x-small; } } @media (pointer: coarse) { #button { font-size: x-large; } }