CSS Master

Finally,wecanusethemediaattributewiththesourceelementtoservedifferent

filesfordifferentwindowwidthsanddeviceresolutions.Whatfollowsisanexample

usingthesourceelementandmediaattributewiththepictureelement:

<picture>

<source srcset="image-wide.jpg" media="(min-width: 1024px)">

<source srcset="image-med.jpg" media="(min-width: 680px)">

<img src="image-narrow.jpg" alt="Adequate description of the

➥ image contents.">

</picture>

picture Element Has Patchy Support

Thepictureelementisyettobesupportedineverybrowser.Asofpublication,

onlyFirefoxandChromeversions38+andOperaversions25+supportit.Toadd

supportforotherbrowsers,useScottJehl'sPicturefill.^11

Content-driven Media Queries

Acurrentcommonpracticewhenusingmediaqueriesistosetmin-widthandmax-

widthbreakpointsbasedonpopulardevicesizes.Abreakpoint,forthoseunfamil-

iar,isthewidthorheightthattriggersamediaqueryanditsresultinglayoutchanges.

Raiseyourhandifyou'veeverwrittenCSSthatresemblesthis:

@media screen and (max-width: 320px) {

M

}

@media screen (min-width: 320px) and (max-width: 480px) {

M

}

@media screen (min-width: 481px) and (max-width: 768px) {

M

}

(^11) https://github.com/scottjehl/picturefill
292 CSS Master