aarongustafson

<picture>
  <source type="image/webp" srcset="/i/j/r.webp">
  <img src="/i/j/r.jpg" alt="">
</picture>

aarongustafson

<li class="gallery__item h-card"
    data-img="/i/j/r.jpg||y"  
    >
  <a href="https://twitter.com/rachelandrew">
    <b>Rachel Andrew</b>
  </a>
</li>

aarongustafson

var foo = document.querySelectorAll('.foo');

aarongustafson

$('.foo').click(function(){
  alert('Thanks for clicking me!');
});

aarongustafson

<!--[if gt IE 8]><!-->
  IE 9+ and all non-IE browsers see this text.
<!--<![endif]-->

aarongustafson

<!--[if gte IE 7]>
	Howdy friend, you’re in IE version 7–9!
<![endif]-->

aarongustafson

if ( window.localStorageAvailable )
{
  window.localStorage.removeItem( 'FORM URL GOES HERE' );
}

aarongustafson

// Lazy Load Images
// Assumes WebP versions exist for all images
//
// data-img="A|B|C|D|E"
// A = source url
// B = alt
// C = prepend? (y/n)
// D = insert into (descendent selector)
// E = svg?
//

aarongustafson

@media (-ms-high-contrast: white-on-black) {
  /* rule sets for white on black */
}
@media (-ms-high-contrast: black-on-white) {
  /* rule sets for black on white */
}

aarongustafson

@media (-ms-high-contrast: active) {
  /* rule sets for high contrast mode */
}