From d4a641e5534def24967887a3c8cb823c3482c2b1 Mon Sep 17 00:00:00 2001 From: Marc Laval Date: Fri, 9 Sep 2016 19:02:02 +0200 Subject: [PATCH] docs(browser-support): document browser support and polyfills (#2244) --- .../dart/latest/guide/browser-support.jade | 1 + .../docs/js/latest/guide/browser-support.jade | 1 + public/docs/ts/latest/guide/_data.json | 5 + .../docs/ts/latest/guide/browser-support.jade | 191 ++++++++++++++++++ 4 files changed, 198 insertions(+) create mode 100644 public/docs/dart/latest/guide/browser-support.jade create mode 100644 public/docs/js/latest/guide/browser-support.jade create mode 100644 public/docs/ts/latest/guide/browser-support.jade diff --git a/public/docs/dart/latest/guide/browser-support.jade b/public/docs/dart/latest/guide/browser-support.jade new file mode 100644 index 0000000000..6778b6af28 --- /dev/null +++ b/public/docs/dart/latest/guide/browser-support.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") diff --git a/public/docs/js/latest/guide/browser-support.jade b/public/docs/js/latest/guide/browser-support.jade new file mode 100644 index 0000000000..6778b6af28 --- /dev/null +++ b/public/docs/js/latest/guide/browser-support.jade @@ -0,0 +1 @@ +!= partial("../../../_includes/_ts-temp") diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index f1e24dd8aa..ee6a11e51b 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/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." diff --git a/public/docs/ts/latest/guide/browser-support.jade b/public/docs/ts/latest/guide/browser-support.jade new file mode 100644 index 0000000000..0b8d9bcb7a --- /dev/null +++ b/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
(5.0, 5.1) + td + tr + td + td + td + td 9 + td 7 + td 7 + td KitKat
(4.4) + td + tr + td + td + td + td + td + td + td Jelly Bean
(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
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
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
Blob
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)