Skip to content

Instantly share code, notes, and snippets.

@bjankord

bjankord/gist:2509672

Created April 27, 2012 14:23
Show Gist options
  • Save bjankord/2509672 to your computer and use it in GitHub Desktop.
Save bjankord/2509672 to your computer and use it in GitHub Desktop.
Download ZIP
Picture element with HTML media query variables
Raw
gistfile1.html
<head>
<mqs>
<var name=”s@2x” media=”-webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
<var name=”m” media=”min-width:321px” />
<var name=”m@2x” media=”min-width:321px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
<var name=”l” media=”min-width:641px” />
<var name=”l@2x” media=”min-width:641px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
<var name=”xl” media=”min-width:1281px” />
<var name=”xl@2x” media=”min-width:1281px and -webkit-min-device-pixel-ratio:2,-moz-min-device-pixel-ratio:2,-o-min-device-pixel-ratio: 2/1,min-device-pixel-ratio:2” />
</mqs>
</head>
<body>
<picture alt="Alt tag describing the image represented">
<source src="photo-s.jpg"/>
<source src="[email protected]" media="var-s@2x"/>
<source src="photo-m.jpg" media="var-m"/>
<source src="[email protected]" media="var-m@2x"/>
<source src="photo-l.jpg" media="var-l"/>
<source src="[email protected]" media="var-l@2x"/>
<source src="photo-xl.jpg" media="var-l" />
<source src="[email protected]" media="var-l@2x" />
<img src="photo-s.jpg" />
</picture>
</body>
// Notes
//----------------------------------------------------------------
<mqs></mqs> would be a new element that would be used in the <head> of the
document. Developers could write their media queries for picture elements
once and have it be used for each picture element. This would keep picture
elements DRY and also keep the markup clean. The var element would work similar
to the proposed CSS variable syntax. http://dev.w3.org/csswg/css-variables/
Ideally these could be used on the picture element, but could also be used
by Javascript and CSS in separate linked files.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment