@import url(hi-res-icons.css) (min-resolution: 1.5dppx), (min-
➥resolution: 96dpi);Use @import with Caution
@importhasitsdrawbacks.ForbrowsersandserversusingHTTP/1.1,itaddsan
additionalHTTPrequestandblocksotherassetsfromdownloading.Usewith
care.Wecanalsousemediaquerieswiththemediaattribute.Infact,thismaybeoneof
theinstanceswheremediaqueriesaremostpowerful.Themediaattribute,asyou
mayalreadyknow,canbeusedwithafewHTMLelements:style,link,video,
andthesourceelement.Butwecanalsosetthevalueofthemediaattributetoa
mediaquery.Theexamplethatfollowswillonlyapplylinkedstylesifthedevice
widthis 480 pixelswideorless:
<link rel="stylesheet" href="styles.css" type="text/css" media="
➥screen and (max-width: 480px)">The Stylesheet Will Still Be Downloaded
Ineverybrowsertested,thestylesheetwillberequestedanddownloaded,even
thoughthemediaquerydoesn'tapply;however,linkedassetswithinthatstylesheet
(forexample,backgroundimagesdefinedwithurl())won'tbe.Media Queries in the Linked Stylesheet Take Precedence
Ifyourlinkedstylesheetsalsocontainmediaqueries,thesewilltakeprecedence
overthevalueofthemediaattribute.It'salsopossibletousemediaquerieswiththemediaattributeofthestyleelement:
<style type="text/css" media="screen and (max-width: 480px)">
M
</style>Aswithlinkedstylesheets,mediaqueriesbetweenwillstill
apply.
Applying CSS Conditionally 291