@media not print and (min-resolution: 1.5dppx) {
.external {
background: url('arrow-lowres.png');
}
}
Noticeherethatnotcomesbeforeandnegatestheentiremediaquery.Youcan't
insertnotafteranandclause.Argumentssuchas@media not print and not
(min-resolution: 2dppx)or@media screen and not (min-resolution: 2dppx)
violatetherulesofmediaquerygrammar;however,youcanusenotatthebeginning
ofeachqueryinamediaquerylist:
@media not (hover: hover), not (pointer: coarse) {
/* Styles go here */
}
Styleswithinthisgroupingrulewouldbeappliedwhenthedeviceiswithouta
hoverstateorwhenthepointingdevicehaslowaccuracy.
Other Ways to Use Media Queries
Thusfar,we'vetalkedabout@mediablockswithinstylesheets,butthisisn'ttheonly
waytousemediatypesandqueries.Wecanalsousethemwith@import,orthe
mediaattribute.
SinceCSS2.1becamewidelysupported,we'vebeenabletousemediatypeswith
@importrules.Forexample,toimportastylesheettypography.csswhenthedocument
isviewedonscreenorprintedtoapage,wecouldusethefollowingCSS:
@import url(typography.css) screen, print;
Wecanalso,however,[email protected]
example,we'reservingthehi-res-icons.cssstylesheetonlywhenthedevicehas
aminimumresolutionof1.5dppxor96dpi:
290 CSS Master