the things browsers can do! sae alumni convention 2014
DESCRIPTION
A talk about allowing HTML5 to graduate from a toy language of web enthusiasts to something used in every day web products. Shows how far browsers have come in support and how to use the standards without resorting to lots of abstraction librariesTRANSCRIPT
![Page 1: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/1.jpg)
The things browsers can do! Go play with the web
Chris Heilmann, SAE Alumni Convention, Berlin, Germany, 23/10/2014
![Page 3: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/3.jpg)
![Page 4: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/4.jpg)
![Page 5: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/5.jpg)
![Page 6: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/6.jpg)
?
![Page 7: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/7.jpg)
Libraries, Polyfills, Frameworks!
![Page 8: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/8.jpg)
It’s a mobile game!
![Page 9: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/9.jpg)
Of course, we moved on…
![Page 10: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/10.jpg)
![Page 11: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/11.jpg)
CSS Stuff
![Page 12: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/12.jpg)
<div id="#really" class="no idea how i do" data-foo="thismarkupthing"> […]</div>
![Page 13: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/13.jpg)
p {}p.oop {}p#tag {}p[class] {}p[title="hi there"]{}p[title^="hi"]{}p[title$="hi"]{}p[title~="hi"]{}
![Page 14: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/14.jpg)
p + p {}p > span {}p ~ div {}
![Page 15: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/15.jpg)
http://www.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
![Page 16: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/16.jpg)
![Page 17: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/17.jpg)
[href$=".zip"]:before,[href$=".gz"]:before { content: 'E004'; /* unicode for the zip folder icon */}
![Page 18: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/18.jpg)
<a href="http://twitter.com/heydonworks" target="_blank" class="new-window-icon twitter-icon">@heydonworks</a>
![Page 19: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/19.jpg)
<a href="http://twitter.com/heydonworks" target="_blank">@heydonworks</a>
![Page 20: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/20.jpg)
<ul> <li class="list-item-first"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item-last"></li></ul>
💩
![Page 21: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/21.jpg)
!
:link :visited :active :hover :focus
:first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :checked :enabled :disabled :not()
![Page 22: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/22.jpg)
https://medium.com/@mjtweaver/the-css-that-you-dont-know-about-d5945cea1c94
![Page 23: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/23.jpg)
<ul> <li></li> <li></li> <li></li> <li></li> ul > li:first-child {} <li></li> <li></li> <li></li></ul>
![Page 24: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/24.jpg)
<ul> <li></li> <li></li> <li></li> <li></li> ul > li:last-child {} <li></li> <li></li> <li></li></ul>
![Page 25: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/25.jpg)
<ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(odd) {} <li></li> <li></li> <li></li></ul>
![Page 26: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/26.jpg)
<ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(even) {} <li></li> <li></li> <li></li></ul>
![Page 27: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/27.jpg)
<ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n) {} <li></li> <li></li> <li></li></ul>
![Page 28: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/28.jpg)
<ul> <li></li> <li></li> <li></li> <li></li> ul > li:nth-child(3n+1) {} <li></li> <li></li> <li></li></ul>
![Page 29: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/29.jpg)
Support = epic
![Page 31: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/31.jpg)
http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
![Page 32: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/32.jpg)
CSS calc()
padding: 40px; width: calc(100% - 80px);
![Page 33: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/33.jpg)
Support = now
![Page 34: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/34.jpg)
DOM manipulation
![Page 35: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/35.jpg)
querySelector();querySelectorAll();!
…and that is all.
![Page 36: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/36.jpg)
classList (add, remove, toggle, contains)
![Page 37: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/37.jpg)
<p class="bovine" data-sound="moo">cow</p>!
p.dataset.sound => "moo"
![Page 38: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/38.jpg)
http://christianheilmann.com/2012/10/10/data-attributes-rock-as-both-css-and-javascript-know-them/
![Page 39: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/39.jpg)
<div id="dataplayer" data-name="Joe" data-score="100"></div>
var player = document.querySelector('#dataplayer');alert('Score:' + player.dataset.score);alert('Name:' + player.dataset.name);player.dataset.score = 10;alert('Score:' + player.dataset.score);
![Page 40: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/40.jpg)
<div id="dataplayer" data-name="Joe" data-score="100"></div>
#dataplayer[data-score='10'] { color: #c00;}
![Page 41: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/41.jpg)
<div id="dataplayer" data-name="Joe" data-score="100"></div>
#dataplayer::after { content: attr(data-name); position: absolute; left: -50px;}#dataplayer::before { opacity: 0; content: attr(data-score); position: absolute; left: 100px;}
![Page 42: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/42.jpg)
MediaQueries
![Page 43: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/43.jpg)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ …}
![Page 44: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/44.jpg)
Support = epic
![Page 45: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/45.jpg)
No support = opportunity!
@media all and (min-width:0) { …}@media only { …}
![Page 46: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/46.jpg)
http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
![Page 47: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/47.jpg)
Inline media queries?<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css"> <title>CSS files with media queries</title></head><body></body></html>
![Page 48: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/48.jpg)
Gotta load them all! <link rel="stylesheet" media="screen and (min-width: 600px)" href="small.css"> <link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">
![Page 49: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/49.jpg)
matchMedia = the JS brother
if (window.matchMedia('screen and (min-width: 600px)')){ document.write('<link rel="stylesheet" href="small.css">');}
![Page 50: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/50.jpg)
Support = meh IE?
![Page 51: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/51.jpg)
document.yougottobekiddin?
<link rel="stylesheet" class="mediaquerydependent" data-media="screen and (min-width: 600px)" data-href="green.css"><link rel="stylesheet" class="mediaquerydependent" data-media="screen and (min-width: 4000px)" data-href="blue.css">
![Page 52: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/52.jpg)
mediaQuery all the things!
<img data-src="http://placekitten.com/500/500" data-alt="kitten" class="mediaquerydependent" data-media="screen and (min-width: 600px)">
![Page 53: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/53.jpg)
match and apply… var qs = document. querySelectorAll('.mediaquerydependent'), all = qs, cur = null, attr = null; while (all--) { cur = qs[all]; if (cur.dataset.media && window.matchMedia(cur.dataset.media).matches) { for (attr in cur.dataset) { if (attr !== 'media') { cur.setAttribute(attr, cur.dataset[attr]); } } } }
![Page 54: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/54.jpg)
but JS is bad!
<link rel="stylesheet" class="mediaquerydependent" href="standard.css" data-media="screen and (min-width: 600px)" data-href="green.css">
![Page 55: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/55.jpg)
Video
![Page 56: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/56.jpg)
![Page 57: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/57.jpg)
<img src="meh.jpg" alt="cute kitten photo">
Fallbacks are good!
![Page 58: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/58.jpg)
var img = document.querySelector('img');img.addEventListener('error', function(ev) { if (this.naturalWidth === 0 && this.naturalHeight === 0) { console.log('Image ' + this.src + ' not loaded'); }}, false);
Testable fallbacks!
![Page 59: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/59.jpg)
<video controls> <source src="dynamicsearch.mp4" type="video/mp4"> </source> <a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> </a> <p>Click image to play a video demo of dynamic app search</p></video>
Bullet proof video?
![Page 60: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/60.jpg)
Fallback for an extinct case
How about writing a JavaScript that tests for the video support?!I mean, there is !canPlayType(type),right?
![Page 61: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/61.jpg)
The canPlayType(type) method must return the empty string if type is a type that the user agent knows it cannot render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident that the type represents a media resource that it can render if used in with this audio or video element; and it must return "maybe" otherwise.!!
W3C media elements spec
Codecs are hard ;)
![Page 62: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/62.jpg)
![Page 63: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/63.jpg)
Bullet proof video!
var v = document.querySelector('video'), sources = v.querySelectorAll('source'), lastsource = sources[sources.length-1];lastsource.addEventListener('error', function(ev) { var d = document.createElement('div'); d.innerHTML = v.innerHTML; v.parentNode.replaceChild(d, v);}, false);
![Page 64: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/64.jpg)
Canvas
![Page 68: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/68.jpg)
A very basic painting API…
![Page 69: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/69.jpg)
A collection of pixels!
![Page 70: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/70.jpg)
http://thewebrocks.com/demos/zoom-and-pick/
Zoom and pick…
![Page 72: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/72.jpg)
Canvas + FileReader =
![Page 73: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/73.jpg)
https://www.youtube.com/watch?v=gnbLLQwZxeA
![Page 75: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/75.jpg)
https://github.com/jseidelin/exif-js/
Make: LGE! Model: Nexus 5! XResolution: 72! YResolution: 72! ResolutionUnit: 2! YCbCrPositioning: 1! ExifIFDPointer: 134! GPSInfoIFDPointer: 462! ExposureTime: 0.009523809523809525! FNumber: 2.4! ISOSpeedRatings: 104! ExifVersion: 0220! DateTimeOriginal: 2014:10:19 17:28:22! DateTimeDigitized: 2014:10:19 17:28:22! ComponentsConfiguration: YCbCr! ShutterSpeedValue: 6.713! ApertureValue: 2.52! ExposureBias: 0! Flash: Flash did not fire! FocalLength: 3.97! FlashpixVersion: 0100! ColorSpace: 1! PixelXDimension: 1944! PixelYDimension: 2592! InteroperabilityIFDPointer: 432
![Page 76: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/76.jpg)
c = document.querySelector('canvas');cx = c.getContext('2d');c.width = w = img.naturalHeight;c.height = h = img.naturalWidth;cx.drawImage(img, 0, 0, w, h);!
<a href="' + c.toDataURL('image/jpeg', 0.9) + '" '+ 'download="' + dlname + '">Download clean image</a>
[EXIF]
![Page 77: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/77.jpg)
https://github.com/eligrey/FileSaver.js
Support = good
![Page 78: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/78.jpg)
https://github.com/eligrey/FileSaver.js
Support = good
![Page 80: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/80.jpg)
http://stuk.github.io/jszip/
http://makethumbnails.com http://stuk.github.io/jszip/
![Page 81: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/81.jpg)
<tag> You’re it!
![Page 82: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/82.jpg)
Share, find, re-use…
![Page 83: The things browsers can do! SAE Alumni Convention 2014](https://reader034.vdocuments.us/reader034/viewer/2022051817/547e4c6fb4af9fea158b55b1/html5/thumbnails/83.jpg)
Share, find, re-use…