if(matchMedia("(max-width: 480px) and (max-resolution: 1dppx)") {
document.querySelector('video').src = 'smallvideo.mp4';
}Iftheconditiondoesn'tmatch—orthebrowserdoesn'tsupporttheresolution
featurequery—thevalueforsrcwon'tbeupdated.
Error Checking with not all
Typically,thevalueofthemediapropertywillbethemediaquerywe'vetested.
Butmaybeyouforgottoincludetheparenthesesaroundyourfeaturequery(asyntax
error).Orperhapsthequeryusesapointerfeaturequery,butthebrowserisyetto
supportit.Inbothofthosecases,thebrowserwillreturnanot allvalue.Thisis
mediaquery-speakfor“thisdoesnotapplytoanymediacondition.”
Incaseswherethemediaqueryisalist—thatis,whenitcontainsmultiplecondi-
tions—thevalueofmatchMedia().mediawillalsocontainmultiplevalues.Should
partofthatquerylistbeinvalidorunsupported,itsvaluewillbenot all.Here's
anexample:
var mq = matchMedia("(hover: none), (max-width: 25em)");Inbrowserslackingsupportforthehover: nonemediafeaturequery,thevalueof
mq.mediawillbenot all, (max-width: 25em).Inbrowsersthatdosupportit,the
valueofmq.mediawillbe(hover: none), (max-width: 25em).Let'slookatanother
example:
var mq = matchMedia("min-resolution: 1.5dppx, (max-width: 25em)");Inthisexample,thevalueofmq.mediawillalsobenot all, (max-width: 25em).
Inthiscase,however,it'sbecauseourfirstfeaturequeryusesthewrongsyntax.
Rememberthatmediafeaturequeriesneedtobeenclosedinparentheses.Theargu-
mentshouldbematchMedia("(min-resolution: 1.5dppx), (max-width: 25em)");
instead.
Listening for Media Changes
Theconditionsofourmediamaynotbestatic.Theconditioncanchangewhenthe
userresizesthebrowser,orentersandexitslandscapemode.Thegoodnewsisthat
Applying CSS Conditionally 297