@media screen and (hover: on-demand) {
input[type=checkbox] + label {
padding: .5em;
}
}Theothermediafeaturethat'smakingitswayintobrowsersisthepointermedia
feature(andany-pointer).Withpointer,wecanquerythepresenceandaccuracy
ofapointingdevicefortheprimaryinputmechanism.Theany-pointerproperty,
ofcourse,teststhepresenceandaccuracyofanypointeravailableasaninput
mechanism.Bothpropertiesacceptoneofthefollowingvalues:
■ none:device'sprimaryinputmechanismisnotapointingdevice
■ coarse:theprimaryinputmechanismisapointingdevicewithlimitedaccuracy
■ fine:device'sprimaryinputmechanismincludesanaccuratepointingdevice
Deviceswithpointinginputsincludestylus-basedscreensorpads,touchscreens,
mice,andtrackpads.Ofthose,touchscreensaregenerallylessaccurate.Stylusin-
puts,ontheotherhand,areveryaccurate;butliketouchscreens,theylackahover
state.Withthatinmind,wemightupdateourhoverqueryfromearliersothatwe
onlyaddpaddingwhenthepointeriscoarse:
@media screen and (hover: none) and (pointer: coarse) {
input[type=checkbox] + label {
padding: .5em;
}
}Sofar,thelatestversionsofChromeandOperasupportthehoverandpointer
mediafeaturequeries.MicrosoftEdgedoesaswell.Expectsupporttobecomemore
commonasnewbrowserversionsarereleased.
Nesting @media Rules
It'[email protected]'resyntacticallyvalid,browser
supportisadifferentmatter.Fortunately,thelatestversionsofmostbrowsershandle
nestedqueriesjustfine,withInternetExplorer 11 beingtheexception.
Applying CSS Conditionally 287