docs(browser-support): document browser support and polyfills (#2244)

Author: marclaval

public/docs/dart/latest/guide/browser-support.jade

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")

public/docs/js/latest/guide/browser-support.jade

@@ -0,0 +1 @@
+!= partial("../../../_includes/_ts-temp")

public/docs/ts/latest/guide/_data.json

@@ -86,6 +86,11 @@
     "intro": "Attribute directives attach behavior to elements."
   },
 
+  "browser-support": {
+    "title": "Browser support",
+    "intro": "Browser support and polyfills guide."
+  },
+
   "component-styles": {
     "title": "Component Styles",
     "intro": "Learn how to apply CSS styles to components."

public/docs/ts/latest/guide/browser-support.jade

@@ -0,0 +1,191 @@
+:marked
+  # Browser support #  
+  Angular supports most recent browsers. This includes the following specific versions:
+
+table
+  tr
+    th Chrome
+    th Firefox
+    th Edge
+    th IE
+    th Safari
+    th iOS
+    th Android
+    th IE mobile
+  tr
+    td latest
+    td latest
+    td 14
+    td 11
+    td 9
+    td 9
+    td Marshmallow (6.0)
+    td 11
+  tr
+    td
+    td
+    td 13
+    td 10
+    td 8
+    td 8
+    td Lollipop<br>(5.0, 5.1)
+    td
+  tr
+    td
+    td
+    td
+    td 9
+    td 7
+    td 7
+    td KitKat<br>(4.4)
+    td
+  tr
+    td
+    td
+    td
+    td
+    td
+    td
+    td Jelly Bean<br>(4.1, 4.2, 4.3)
+    td
+    
+    
+:marked
+  To ensure this compatibility, the unit tests of the framework are run on all of them for every pull request. 
+  This is done as part of the continuous integration setup of the project, using [SauceLabs](https://saucelabs.com/) and [Browserstack](https://www.browserstack.com).
+  
+  # Polyfills #
+  Angular is built on the latest standards of the web platform.
+  Targeting such a wide range of browsers can be challenging as they may not support all the features of modern browsers.
+  
+  
+  To fill the gaps, the best solution is to use polyfills which "upgrade" old browsers by adding missing features.
+  For each browser, some polyfill may be required to run any application, and some may be needed only when some features are used.
+
+.alert.is-helpful 
+  span As a developer, depending on the browsers you target and on the features you use, you'll need to load a set of polyfills.
+  span  The tables below will help you making the right choices.
+  
+.alert.is-important 
+  span The polyfills documented here are the ones which were identified to run full Angular application.
+  span  Others may be needed if you decide to use extra features which are not supported everywhere.
+  span  On top of that, they will not magically transform an old and slow browser into a modern and fast one.
+  
+:marked
+  ## Mandatory polyfills ##
+  For each supported browser, these are the polyfills which are required to run an application:
+  
+table
+  tr
+    th Browsers (desktop & mobile)
+    th Polyfills required
+  tr
+    td Chrome, Firefox, Edge, Safari 9+
+    td None
+  tr
+    td Safari 7 & 8, IE10 & 11, Android 4.1+
+    td ES6
+  tr
+    td IE9
+    td ES6<br>classList
+    
+    
+:marked
+  ## Optional browser features to polyfill ##
+  In addition to the mandatory polyfills, some features of Angular may require some extra polyfills.
+  
+  For example, the animations use the standard web animation API, which is only available in Chrome and Firefox today.
+  In order to use this feature in other browsers, the correct polyfill is needed.
+  
+  Here are the features which may require additional polyfills:
+
+table
+  tr
+    th Feature
+    th Polyfill
+    th Browsers (desktop & mobile)
+  tr
+    td
+      a(href="./animations.html") Animations
+    td Web Animations
+    td All but Chrome and Firefox<br>Not supported in IE9
+  tr
+    td 
+      a(href="../api/common/index/DatePipe-class.html") Date
+      span ,  
+      a(href="../api/common/index/CurrencyPipe-class.html") currency
+      span , 
+      a(href="../api/common/index/DecimalPipe-class.html") decimal
+      span  and 
+      a(href="../api/common/index/PercentPipe-class.html") percent
+      span  pipes
+    td Intl API
+    td All but Chrome, Firefox, Edge and IE11
+  tr
+    td 
+      a(href="../api/common/index/NgClass-directive.html") NgClass
+      span  on SVG elements
+    td classList
+    td IE10, IE11
+  tr
+    td
+      a(href="./server-communication.html") Http
+      span  when sending and receiving binary data
+    td Typed Arrays<br>Blob<br>FormData
+    td IE 9
+
+:marked
+  ## Suggested polyfills ##
+  Below are the polyfills which are used to test the framework itself. They are a good starting point for an application. 
+
+table
+  tr
+    th Polyfill
+    th Library
+    th Licence
+    th Size*
+  tr
+    td ES6
+    td 
+      a(href="https://github.com/zloirock/core-js") https://github.com/zloirock/core-js
+    td MIT
+    td 27.4KB
+  tr
+    td classList
+    td
+      a(href="https://github.com/eligrey/classList.js") https://github.com/eligrey/classList.js
+    td Public domain
+    td 1KB
+  tr
+    td Intl
+    td
+      a(href="https://github.com/andyearnshaw/Intl.js ") https://github.com/andyearnshaw/Intl.js 
+    td MIT / Unicode licence
+    td 13.5KB
+  tr
+    td Web Animations
+    td
+      a(href="https://github.com/web-animations/web-animations-js") https://github.com/web-animations/web-animations-js
+    td Apache
+    td 14.8KB
+  tr
+    td Typed Arrays
+    td
+      a(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js") https://github.com/inexorabletash/polyfill/blob/master/typedarray.js
+    td MIT
+    td 4KB
+  tr
+    td Blob
+    td
+      a(href="https://github.com/eligrey/Blob.js") https://github.com/eligrey/Blob.js
+    td MIT
+    td 1.3KB
+  tr
+    td FormData
+    td
+      a(href="https://github.com/francois2metz/html5-formdata") https://github.com/francois2metz/html5-formdata
+    td MIT
+    td 0.4KB
+
+:marked
+  *Figures are for minified and gzipped code, computed with [http://closure-compiler.appspot.com/home](http://closure-compiler.appspot.com/home)