bjankord
/ dry-picture-element-media-queries
Created
February 23, 2012 14:42
DRY Picture element media queries
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Define picture element media query values here | |
| $m_mqs = 'min-width:321px'; | |
| $l_mqs = 'min-width:641px'; | |
| $xl_mqs = 'min-width:1281px'; | |
| ?> | |
| <picture alt="Alt tag describing the image represented"> | |
| <source src="photo-s.jpg"/> | |
| <source src="photo-m.jpg" media="<?php ehco $m_mqs; ?>"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function debug(text) { | |
| ((window.console && console.log) || (window.opera && opera.postError) || window.alert).call(this, text); | |
| } | |
| var test = "This is a test"; | |
| debug(test); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ----------------------------------------------- | |
| * Accurate Cross-Browser Viewport Width | |
| * https://gist.github.com/2399828 | |
| * ----------------------------------------------- | |
| * Copyright 2012, Brett Jankord. | |
| * http://www.brettjankord.com/ | |
| * | |
| * Licensed under the MIT license: | |
| * http://www.opensource.org/licenses/MIT | |
| * ------------------------------------------------*/ |
bjankord
/ gist:2509519
Created
April 27, 2012 14:00
Picture element markup with polyfill markup for older browsers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
bjankord
/ gist:2509534
Created
April 27, 2012 14:02
Picture element markup for high-resolution devices with polyfill markup for older browsers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <picture alt="Alt tag describing the image represented"> | |
| <!--<source src="photo-s.jpg"/>--> | |
| <source src="photo-s.jpg"/> | |
| <source src="photo-s@2x.jpg" media="-webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/> | |
| <!--<source src="photo-m.jpg" media="min-width:321px"/>--> | |
| <source src="photo-m.jpg" media="min-width:321px"/> | |
| <source src="photo-m@2x.jpg" media="min-width:321px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/> | |
| <!--<source src="photo-l.jpg" media="min-width:641px"/>--> | |
| <source src="photo-l.jpg" media="min-width:641px"/> | |
| <source src="photo-l@2x.jpg" media="min-width:641px and -webkit-min-device-pixel-ratio:2, min-resolution:192dpi"/> |
bjankord
/ gist:2509672
Created
April 27, 2012 14:23
Picture element with HTML media query variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <picture alt="Alt tag describing the image represented"> | |
| <source src="photo.webp" type="image/webp"/> | |
| <source src="photo.mng" type="image/mng"/> | |
| <source src="photo.svg" type="image/svg+xml"/> | |
| <img src="photo-s.jpg" /> | |
| </picture> | |
| // Notes | |
| //---------------------------------------------------------------- | |
| If browser supported the webp image format it would use that image, |
bjankord
/ gist:2572749
Created
May 2, 2012 00:57
Picture Source src modification through CSS image-set and URI Templates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <style type="text/css"> | |
| picture source { | |
| src: image-set(url({filename}@2x.{ext} 2x high-bandwidth)); | |
| } | |
| @media screen and (min-width:321px){ | |
| picture source { | |
| src: image-set(url({filename}-m.{ext}), url({filename}-m@2x.{ext} 2x high-bandwidth)); | |
| } | |
| } |
bjankord
/ css-responsive-images.html
Created
May 2, 2012 01:12
— forked from necolas/css-responsive-images.html
Idea for CSS-only responsive images using CSS3 generated content and attr() function. Added media query for high-resolution devices. No browser implementation as of May 2011
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>CSS responsive images</title> | |
| <style> | |
| /* Doesn't stop original source image being | |
| downloaded too */ | |
| @media (min-device-width:600px) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <meta name='media' var='small' media='min-width:320px' /> | |
| <meta name='media' var='small-2x' media='min-width:320px and min-device-pixel-ratio:2;' /> | |
| <meta name='media' var='medium' media='min-width:600px' /> | |
| <meta name='media' var='medium-2x' media='min-width:600px and min-device-pixel-ratio:2;' /> | |
| <meta name='media' var='large' media='min-width:1000px' /> | |
| </head> | |
| <body> | |
| <picture alt=""> |
OlderNewer