Skip to content

Instantly share code, notes, and snippets.

@bjankord
Created April 27, 2012 14:00
Show Gist options
  • Save bjankord/2509519 to your computer and use it in GitHub Desktop.
Save bjankord/2509519 to your computer and use it in GitHub Desktop.
Picture element markup with polyfill markup for older browsers
<picture alt="Alt tag describing the image represented">
<!--<source src="photo-s.jpg"/>-->
<source src="photo-s.jpg"/>
<!--<source src="photo-m.jpg" media="min-width:321px"/>-->
<source src="photo-m.jpg" media="min-width:321px"/>
<!--<source src="photo-l.jpg" media="min-width:641px"/>-->
<source src="photo-l.jpg" media="min-width:641px"/>
<!--<source src="photo-xl.jpg" media="min-width:1281px"/>-->
<source src="photo-xl.jpg" media="min-width:1281px"/>
<noscript><img src="photo-s.jpg"/></noscript>
</picture>
//Notes
//--------------------------------------------------
Markup based off of Scott Jehl's picturefill example.
Added commented source elements (needed for IE9, Android 2.1-2.3 and iOS 4.3 Safari)
to demonstrate how a real life cross-browser implementation might look like.
11 lines of code for "1" image :(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment