Weird Browsers

#weirdbrowsers Weird Browsers Niels Leenheer @html5test

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

new since internet explorer 6

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

weird browsers

no, this talk is not about internet explorer 6

the web is weird by definition

the web is not a single platform

?weird browsers?

game consoles

portable game consoles

smart tvs

e-readers

smartwatches

photo cameras

fridges

cars

vr headsets

smart tvs and game consoles

“big screen browsers”

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

1 controlling the browser

the biggest challenge of of big screen browsers

navigation (without mouse or touchscreen)

d-pad

alternatives

analog controllers

remotes with trackpad

remotes with airmouse

second screen

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

text input (without keyboard)

d-pads

text input with the d-pad

alternatives

remotes with keyboards

wireless keyboards

and apps

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

navigation with gesture control

can we control these input methods directly from javascript?

the d-pad maybe

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

the gamepad maybe

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

the webcam maybe

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

overscan causes blurry output +5%

solution 1 overscan correction

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

solution 2 no overscan

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

800 pixels nintendo wii

980 pixels nintendo wii u

960 pixels lg webos

1041 of 1050 pixels microsoft xbox 360

1200 of 1236 pixels microsoft xbox one

1200 of 1236 pixels microsoft xbox one (with edge)

1824 pixels sony playstation 3

1920 pixels sony playstation 4

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

3 distance to the screen

20 inch

10 foot

“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

youtube on the big screen

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

4 be careful with feature detection

“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

e-readers

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

infrared touch screen

led’s sensors

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

e-ink screens (slow, slower, slowest)

microscopic electrostatic charged balls

microscopic electrostatic charged balls + – – +

microscopic electrostatic charged balls

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

vr vr headsets headsets

oculus rift

htc vive

microsoft hololens

very expensive

but…

google cardboard

google daydream

samsung gear vr

webvr (webgl on steroids)

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

https://iswebvrready.org

?weird browsers!

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

but wait…

weird browsers!

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

thank you niels leenheer @html5test