docs(browser-support): document browser support and polyfills (#2244)
This commit is contained in:
parent
2c9e78c500
commit
d4a641e553
|
@ -0,0 +1 @@
|
|||
!= partial("../../../_includes/_ts-temp")
|
|
@ -0,0 +1 @@
|
|||
!= partial("../../../_includes/_ts-temp")
|
|
@ -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."
|
||||
|
|
|
@ -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)
|
Loading…
Reference in New Issue