ginalimplementation.AstheMediaQueries,Level 4 specificationexplains,the
originalerror-handlingbehavior:
[W]ouldconsumethecharactersofamediaqueryuptothefirst
non-alphanumericcharacter,andinterpretthatasamediatype,ig-
noringtherest.Forexample,themediaqueryscreen and (color)
wouldbetruncatedtojustscreen.Toavoidthis,wecanusetheonlykeywordtohidemediaqueriesfrombrowsers
thatsupporttheoldersyntax.Theonlykeywordmustprecedeamediaquery,and
affectstheentirequery:
@media only screen and (min-resolution: 1.5dppx) {
/* Styles go here */
}Theonlykeywordtellsthebrowserthatthesestylesshouldbeappliedonlywhen
thefollowingconditionismet.Thegoodnewsisthattheoldererror-handlingbe-
haviorismostlyanedge-caseamongbrowsersinusetoday.Formostcurrent
browsersandcurrentwebusers,usingtheonlykeywordisunnecessary.I'vein-
cludedithereforcompleteness.
Negating Media Queries
Wecanalsonegateamediaqueryusingthenotkeyword.Thenotkeywordmust
comeatthebeginningofthequery,beforeanymediatypesorfeatures.Forexample,
tohidestylesfromprintmedia,wemightusethefollowing:
@media not print {
body {
background: url('paisley.png');
}
}Ifwewantedtospecifylow-resolutioniconsforlower-resolutiondevicesinstead,
wemightusethissnippet:
Applying CSS Conditionally 289