Skip to content

Instantly share code, notes, and snippets.

😀
Coding things

Brett Jankord bjankord

😀
Coding things
Block or report user

Report or block bjankord

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@bjankord
bjankord / dry-picture-element-media-queries
Created Feb 23, 2012
DRY Picture element media queries
View dry-picture-element-media-queries
<?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; ?>"/>
@bjankord
bjankord / gist:2384682
Created Apr 14, 2012
Simple cross-browser debug function
View gist:2384682
function debug(text) {
((window.console && console.log) || (window.opera && opera.postError) || window.alert).call(this, text);
}
var test = "This is a test";
debug(test);
@bjankord
bjankord / gist:2399828
Created Apr 16, 2012
Accurate cross-browser viewport width
View gist:2399828
/* -----------------------------------------------
* 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
bjankord / gist:2509519
Created Apr 27, 2012
Picture element markup with polyfill markup for older browsers
View gist:2509519
<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
bjankord / gist:2509534
Created Apr 27, 2012
Picture element markup for high-resolution devices with polyfill markup for older browsers
View gist:2509534
<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
bjankord / gist:2509672
Created Apr 27, 2012
Picture element with HTML media query variables
View gist:2509672
<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>
@bjankord
bjankord / gist:2509735
Created Apr 27, 2012
Picture element with different image formats
View gist:2509735
<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
bjankord / gist:2572749
Created May 2, 2012
Picture Source src modification through CSS image-set and URI Templates
View gist:2572749
<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
bjankord / css-responsive-images.html
Created May 2, 2012 — 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
View css-responsive-images.html
<!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) {
@bjankord
bjankord / gist:2702067
Created May 15, 2012
Picture element with Meta media variables
View gist:2702067
<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="">
You can’t perform that action at this time.