Weird Browsers @ TechDays NL 2016

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.

Transcript

1. #weirdbrowsers
   Weird Browsers
   Niels Leenheer
   @html5test
   

   View Slide

2. View Slide

3. 383

   Safari 10
   499

   Chrome 53
   463

   Firefox 49
   555
   0
   desktop browsers results on html5test.com
   460

   Edge 14
   

   View Slide

4. 383

   Safari 10
   555
   0
   desktop browsers results on html5test.com
   463

   Firefox 49
   460

   Edge 14
   499

   Chrome 53
   

   View Slide

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

   View Slide

6. new since internet explorer 6
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

11. weird browsers
    

    View Slide

12. no, this talk is not about internet explorer 6
    

    View Slide

13. the web is weird by definition
    

    View Slide

14. the web is not a single platform
    

    View Slide

15. View Slide

16. ?weird browsers?
    

    View Slide

17. ?weird browsers?
    

    View Slide

18. game consoles
    

    View Slide

19. portable

    game consoles
    

    View Slide

20. smart tvs
    

    View Slide

21. e-readers
    

    View Slide

22. smartwatches
    

    View Slide

23. photo cameras
    

    View Slide

24. fridges
    

    View Slide

25. cars
    

    View Slide

26. vr headsets
    

    View Slide

27. View Slide

28. smart tvs and 

    game consoles
    

    View Slide

29. “big screen browsers”
    

    View Slide

30. View Slide

31. television browsers are pretty good
    the last generation of television sets use 

    operating systems that originate on mobile
    

    View Slide

32. 427

    LG WebOS
    218

    Google TV
    199

    LG Netcast
    490

    Samsung Tizen
    478

    Opera Devices
    261

    Panasonic

    Viera
    smart tv results on html5test.com
    555
    0
    371

    Panasonic

    Firefox OS
    352

    Samsung

    2014
    

    View Slide

33. 289

    Playstation 4
    57

    Playstation 3
    258

    Playstation TV
    108

    Xbox 360
    256

    Wii U
    65

    Wii
    555
    0
    console results on html5test.com
    428

    Xbox One with Edge
    

    View Slide

34. controlling the browser
    1
    

    View Slide

35. the biggest challenge of 

    of big screen browsers
    

    View Slide

36. navigation
    (without mouse or touchscreen)
    

    View Slide

37. d-pad
    

    View Slide

38. d-pad
    

    View Slide

39. alternatives
    

    View Slide

40. analog controllers
    

    View Slide

41. remotes 

    with trackpad
    

    View Slide

42. remotes 

    with airmouse
    

    View Slide

43. second screen
    

    View Slide

44. many manufacturers also create apps for 

    controlling the smart tv, console or set-top box
    

    View Slide

45. View Slide

46. text input
    (without keyboard)
    

    View Slide

47. d-pads
    

    View Slide

48. text input with the d-pad
    

    View Slide

49. alternatives
    

    View Slide

50. remotes

    with keyboards
    

    View Slide

51. wireless keyboards
    

    View Slide

52. and apps
    

    View Slide

53. View Slide

54. gesture control
    (throw your hands up in the air,

    and wave ’em like you just don’t care)
    

    View Slide

55. navigation with gesture control
    

    View Slide

56. can we control these input methods 

    directly from javascript?
    

    View Slide

57. the d-pad
    maybe
    

    View Slide

58. 1 keyboard events
    window.addEventListener("keypress", function(e) {

    e.preventDefault(); // no navigation

    ...
    });
    

    View Slide

59. the gamepad
    maybe
    

    View Slide

60. the gamepad api
    var gamepads = navigator.getGamepads();

    for (var i = 0; i < gamepads.length; i++) {

    ...

    }
    1
    

    View Slide

61. the webcam
    maybe
    

    View Slide

62. the getusermedia api
    navigator.getUserMedia(

    { audio: true, video: { width: 1280, height: 720 } },

    function(stream) { ... },

    function(error) { ... }

    );
    1
    

    View Slide

63. the difference between 

    a television and a monitor
    2
    

    View Slide

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

    View Slide

65. due to historical reasons televisions will 

    not show the borders of the image
    

    View Slide

66. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels
    

    View Slide

67. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels
    

    View Slide

68. the image is then cropped to 

    1920 by 1080 pixels
    

    View Slide

69. the image is then cropped to 

    1920 by 1080 pixels
    

    View Slide

70. overscan causes blurry output
    +5%
    

    View Slide

71. solution 1
    overscan correction
    

    View Slide

72. the browser does not use

    the edges of the image
    1920 pixels
    

    View Slide

73. the television will enlarge 

    the image by 5%
    1920 pixels
    

    View Slide

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

    View Slide

75. but not every television set enlarges the 

    image by exactly 5%, this can vary between
    manufacturers and models
    

    View Slide

76. configure the correct overscan correction 

    in the system preferences
    

    View Slide

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

    View Slide

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

    View Slide

79. solution 2
    no overscan
    

    View Slide

80. it is possible to disable overscan 

    on many television sets
    ‘screen fit’, ‘pixel perfect’ or ‘just scan’
    

    View Slide

81. the playstation 3 always shows the 

    browser with overscan correction
    

    View Slide

82. the viewport
    (i really need some aspirin!)
    

    View Slide

83. the visual viewport
    determines which
    part of the website
    will be visible
    measured in 

    device pixels
    the visual viewport
    

    View Slide

84. the visual viewport
    determines which
    part of the website
    will be visible
    measured in 

    device pixels
    the visual viewport
    

    View Slide

85. the visual viewport
    the visual viewport
    determines which
    part of the website
    will be visible
    measured in 

    device pixels
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. the default layout viewport is different on 

    every smart tv, console or set-top box
    between 800 and 1920 css pixels
    

    View Slide

90. nintendo wii
    800 pixels
    

    View Slide

91. nintendo wii u
    980 pixels
    

    View Slide

92. lg webos
    960 pixels
    

    View Slide

93. microsoft xbox 360
    1041 of 1050 pixels
    

    View Slide

94. microsoft xbox one
    1200 of 1236 pixels
    

    View Slide

95. microsoft xbox one (with edge)
    1200 of 1236 pixels
    

    View Slide

96. sony playstation 3
    1824 pixels
    

    View Slide

97. sony playstation 4
    1920 pixels
    

    View Slide

98. 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
    

    View Slide

99. device pixels != device pixels
    (of course not)
    

    View Slide

100. 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
     

     View Slide

101. distance to the screen
     3
     

     View Slide

102. 20 inch
     

     View Slide

103. 20 inch
     

     View Slide

104. 10 foot
     

     View Slide

105. “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
     

     View Slide

106. Make your text 

     and images two to 

     three times bigger
     

     View Slide

107. Make your text 

     and images two to 

     three times bigger
     

     View Slide

108. Make your text 

     and images two to 

     three times bigger
     

     View Slide

109. youtube on the big screen
     

     View Slide

110. youtube on the big screen
     

     View Slide

111. identifying smart tv’s
     (css for televisions)
     

     View Slide

112. css media types
     @media tv {

     body {

     font-size: 300%;
     }
     }
     ×
     1
     

     View Slide

113. css media types
     all television browsers use the 

     css media type ‘screen’
     1
     

     View Slide

114. screen size
     if (screen.width == 1920 && screen.height == 1080) {

     document.body.className += " television";

     }
     ×
     2
     

     View Slide

115. screen size
     monitors and phones often use 

     hd resolutions, television browsers 

     often use other resolutions
     2
     

     View Slide

116. useragent sniffing
     if (navigator.userAgent.search(/TV/i) >= 0) {

     document.body.className += " television";

     }
     ×
     3
     

     View Slide

117. 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+
     3
     

     View Slide

118. 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
     

     View Slide

119. be careful with

     feature detection
     4
     

     View Slide

120. “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/
     

     View Slide

121. if (!!navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(

     success, failure

     );
     }

     else {

     // alternative

     }
     

     View Slide

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

     success, failure

     );
     }
     

     View Slide

123. success is called with longitude = 0 and latitude = 0
     3
     success is called with the coordinates of 

     Mountain View, USA
     4
     if (!!navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(

     success, failure

     );
     }
     

     View Slide

124. View Slide

125. e-readers
     

     View Slide

126. e-reader results on html5test.com
     555
     0
     154

     Pocketbook
     280

     Kobo
     147

     Sony Reader
     152

     Kindle Touch
     

     View Slide

127. infrared touch screen
     

     View Slide

128. led’s sensors
     

     View Slide

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

     View Slide

130. e-ink screens
     (slow, slower, slowest)
     

     View Slide

131. microscopic electrostatic charged balls
     

     View Slide

132. microscopic electrostatic charged balls
     + –
     – +
     

     View Slide

133. + –
     – +
     microscopic electrostatic charged balls
     

     View Slide

134. microscopic electrostatic charged balls
     

     View Slide

135. View Slide

136. maybe css animations and transitions 

     weren’t such a great idea after all
     

     View Slide

137. two completely different colors can look 

     exactly the same in black and white
     

     View Slide

138. two completely different colors can look 

     exactly the same in black and white
     

     View Slide

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

     View Slide

140. css monochrome mediaquery
     @media (monochrome) {

     ...
     }
     ×
     1
     

     View Slide

141. css monochrome mediaquery
     all tested e-readers act like 

     they have a color screen
     1
     

     View Slide

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

     View Slide

143. View Slide

144. vr headsets
     vr headsets
     vr headsets
     

     View Slide

145. oculus rift
     

     View Slide

146. htc vive
     

     View Slide

147. microsoft hololens
     

     View Slide

148. very expensive
     

     View Slide

149. but…
     

     View Slide

150. google cardboard
     

     View Slide

151. google daydream
     

     View Slide

152. samsung gear vr
     

     View Slide

153. View Slide

154. webvr
     (webgl on steroids)
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

158. https://iswebvrready.org
     

     View Slide

159. View Slide

160. View Slide

161. View Slide

162. ?weird browsers!
     

     View Slide

163. “We cannot predict future behavior

     from a current experience that sucks”
     

     – Jason Grigsby
     http://blog.cloudfour.com/on-the-device-context-continuum/
     

     View Slide

164. but wait…
     

     View Slide

165. browsers!
     weird
     

     View Slide

166. browsers!
     weird
     

     View Slide

167. browsers!
     browsers
     browsers
     browsers
     browsers!
     browsers
     browsers
     browsers
     browsers
     browse
     browsers
     wsers!
     browsers
     

     View Slide

168. View Slide

169. thank you
     niels leenheer

     @html5test
     

     View Slide