Weird Browsers

A presentation at TechDays NL in October 2016 in Amsterdam, Netherlands by Niels Leenheer

460 Edge 14 383 499 Safari 10 Chrome 53 555 0 463 Firefox 49 desktop browsers results on html5test.com

Edge Internet Explorer 433 460 360 312 265 113 33 19 2006 2008 2010 2012 desktop browsers results on html5test.com 2014 2016

ES6: Promises Full Screen Pointerlock Adaptive streaming JSON encoding and decoding File API’s Mutation Observer Canvas 2D graphics ObjectRTC Geolocation Media source extensions Page Visibility Streams WebAuthentication Drag and drop Pointer events SVG graphics Fetch Responsive images IndexedDB Form validation HTML5 parser Color input type App-cache offline support Typed Arrays CSS border image Audio Video Blend modes Video subtitles Device Orientation Semantic elements URL API Internationalisation Speech synthesis Beacons Web Crypto

CSS 3D transforms DOM3 events TLS 1.2 WOFF fonts Native XMLHTTP Sandboxed iframes Screen orientation CSS Selectors Navigation Timing PNG transparency support Data URLs HSTS Image sourceset CSS transforms ARIA WebDriver CSS Grid Layout SVG External content Selection API CSS calc XPath ES6: WeakMap CSS transitions Content security policy CSS Gradients CSS Snap Points Regions CSS animations High Resolution Timing CSS opacity VP9 video codec Touch events

ES6: Generators IME API ES6: Subclassing HTTP/2 server push Canvas 2D Path ES6 Classes Date input types Access the webcam CSS Multicolumn ECMAScript 5 Message Channels Session history Gamepad Session storage HTTP/2 Async script execution ASM.js Media Queries Level 4 Web Sockets CSS unset Cross-origin Resource Sharing WebAudio Notifications WebGL Web Workers Local storage Exclusions Cross-document messaging CSS Filters WebRTC ES6: Template strings Device Motion CSS Flexbox ES6: Arrow functions Encrypted Media Extensions Console logging

no, this talk is not about internet explorer 6

television browsers are pretty good the last generation of television sets use operating systems that originate on mobile

218 Google TV 427 LG WebOS 371 199 Panasonic Firefox OS LG Netcast 555 0 261 Panasonic Viera 352 Samsung 2014 490 Samsung Tizen 478 Opera Devices smart tv results on html5test.com

57 258 Playstation 3 Playstation TV 108 289 Xbox 360 Playstation 4 555 0 65 Wii 256 Wii U console results on html5test.com 428 Xbox One with Edge

the biggest challenge of of big screen browsers

navigation (without mouse or touchscreen)

many manufacturers also create apps for controlling the smart tv, console or set-top box

gesture control (throw your hands up in the air, and wave ’em like you just don’t care)

can we control these input methods directly from javascript?

1 keyboard events window.addEventListener("keypress", function(e) { e.preventDefault(); // no navigation ... });

1 the gamepad api var gamepads = navigator.getGamepads(); for (var i = 0; i < gamepads.length; i++) { ... }

1 the getusermedia api navigator.getUserMedia( { audio: true, video: { width: 1280, height: 720 } }, function(stream) { ... }, function(error) { ... } );

2 the difference between a television and a monitor

overscan (let’s make it a bit more complicated)

due to historical reasons televisions will not show the borders of the image

1920 pixels the television enlarges all images from the hdmi input by 5%

the image is then cropped to 1920 by 1080 pixels

1920 pixels the browser does not use the edges of the image

1920 pixels the television will enlarge the image by 5%

and the content is now fully visible, the unused border is cropped out of the final image

but not every television set enlarges the image by exactly 5%, this can vary between manufacturers and models

configure the correct overscan correction in the system preferences

the playstation 4 will always show the browser without overscan correction in full screen mode

it is possible to disable overscan on many television sets ‘screen fit’, ‘pixel perfect’ or ‘just scan’

the playstation 3 always shows the browser with overscan correction

the viewport (i really need some aspirin!)

the visual viewport the visual viewport determines which part of the website will be visible measured in device pixels

the layout viewport the layout viewport determines the width in css pixels on which the site will be rendered

the default layout viewport is different on every smart tv, console or set-top box between 800 and 1920 css pixels

1200 of 1236 pixels microsoft xbox one (with edge)

Nintendo Wii 800 LG WebOS 960 Nintendo Wii U 980 Philips 2014 series 980 Google TV 1024 Playstation TV 1024 Samsung Tizen 1024 Xbox 360 1051 Xbox One 1200 LG Netcast 1226 Panasonic Viera 1256 Opera Devices 1280 Samsung 2014 series 1280 Panasonic Firefox OS 1536 Playstation 3 1824 Playstation 4 1920

device pixels != device pixels (of course not)

sometimes devices pixels are not physical devices pixels, but virtual device pixels the browser renders in a lower resolution which is upscaled to the resolution of the display

“Make fonts and graphics on the site larger to account for viewing distance. People sit proportionally farther from a TV than from a computer monitor of the same size.” – Internet Explorer for Xbox One Developer Guide https://msdn.microsoft.com/en-us/library/dn532261(v=vs.85).aspx

Make your text and images two to three times bigger

identifying smart tv’s (css for televisions)

1 × css media types @media tv { body { font-size: 300%; } }

1 css media types all television browsers use the css media type ‘screen’

2 × screen size if (screen.width == 1920 && screen.height == 1080) { document.body.className += " television"; }

2 screen size monitors and phones often use hd resolutions, television browsers often use other resolutions

3 × useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) { document.body.className += " television"; }

3 useragent sniffing not all smart tv’s are recognisable Mozilla/5.0 (X11; Linux; ko-KR) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+

4 couch mode the only reliable way to optimise a website for television is to make two different websites… or give the user the ability to switch on couch mode

“Basically every feature that talks to the operating system or hardware, is suspect.” – Me, just now http://blog.html5test.com/2015/08/the-problems-with-feature-detection/

if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( success, failure ); } else { // alternative }

if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( success, failure ); } 1 failure is called with a “permission denied” error code 2 no callback at all to success or failure

if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( success, failure ); } 3 success is called with longitude = 0 and latitude = 0 4 success is called with the coordinates of Mountain View, USA

152 280 Kindle Touch Kobo 147 Sony Reader 555 0 154 Pocketbook e-reader results on html5test.com

mouse events down/up move amazon kindle touch yes pocketbook basic touch yes kobo glow yes yes sony reader yes yes touch events 1 finger

maybe css animations and transitions weren’t such a great idea after all

two completely different colors can look exactly the same in black and white

identifying e-readers (css for e-ink screens)

1 × css monochrome mediaquery @media (monochrome) { ... }

1 css monochrome mediaquery all tested e-readers act like they have a color screen

2 useragent sniffing there is no universal marker in the useragent string, but we can recognise individual manufacturers and models

head tracking and camera geometry project the 3d scene to two different eyes

or or Chrome Firefox Samsung Internet Edge experimental build nightly builds behind a flag soon

“We cannot predict future behavior from a current experience that sucks” – Jason Grigsby http://blog.cloudfour.com/on-the-device-context-continuum/

browsers browsers browsers wsers! browsers browsers browsers! browsers browsers! browsers browsers browsers browse

Niels Leenheer
@nielsleenheer

1 / 169

Ever since the web has conquered the desktop, people have been trying to bring it to other devices. Everything from microwaves and fridges to cars. Sometimes these experiments were a success and other times they were complete failures. What are the current frontiers for the web? Are there still any weird browsers left?

The latest generation of Smart TV's run on the same operating systems as our mobile devices. How weird can these browsers be? Perhaps Smart TV's aren't as smart as we all would like to think. But there are more weird browsers. How do game consoles like the Xbox One handle your websites and are e-readers really capable of browsing the web? And are the browsers in VR-headsets like the Hololens any good? I will try to give an overview of all the problems you are going to face when you want to make your site work on these weird browsers.

Weird Browsers

Link for this presentation:

HTML code for embedding:

Share on social media:

Video