From 01b211193cdb02c716c85e910847d2aa35def2f0 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Fri, 9 Sep 2016 22:21:40 -0400 Subject: [PATCH] docs(browser-support): edits (#2299) --- .../docs/_examples/quickstart/ts/index.html | 4 +- public/docs/dart/latest/guide/_data.json | 5 + public/docs/js/latest/guide/_data.json | 5 + .../docs/ts/latest/guide/browser-support.jade | 137 ++++++++++-------- 4 files changed, 87 insertions(+), 64 deletions(-) diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html index a0a64d1122..fef30ef98b 100644 --- a/public/docs/_examples/quickstart/ts/index.html +++ b/public/docs/_examples/quickstart/ts/index.html @@ -9,10 +9,10 @@ - + - + diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index 162d328233..8b9f230bd6 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/latest/guide/_data.json @@ -87,6 +87,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/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 42eede99f8..d687f38e3a 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -74,6 +74,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 index 0b8d9bcb7a..461aecc93c 100644 --- a/public/docs/ts/latest/guide/browser-support.jade +++ b/public/docs/ts/latest/guide/browser-support.jade @@ -1,3 +1,7 @@ +block includes + include ../_util-fns + - var _at_angular = '@angular' + :marked # Browser support # Angular supports most recent browsers. This includes the following specific versions: @@ -50,88 +54,105 @@ table td +.l-sub-section + :marked + Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, + using SauceLabs and + Browserstack. + :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. + Targeting such a wide range of browsers is challenging because they do not support all 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. + You compensate by loading polyfill scripts ("polyfills") on the host web page (`index.html`) + that implement missing features in JavaScript. ++makeExample('quickstart/ts/index.html', 'polyfills')(format='.') +:marked + A particular browser may require at least one polyfill to run _any_ Angular application. + You may need additional polyfills for specific features. -.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. + The tables below will help you determine which polyfills to load, depending on the browsers you target and the features you use. -.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. +.alert.is-important + :marked + The suggested polyfills are the ones we know will run full Angular applications. + You may need additional polyfills to support features not covered by this list. + Note that polyfills cannot magically transform an old, slow browser into a modern, fast one. :marked ## Mandatory polyfills ## - For each supported browser, these are the polyfills which are required to run an application: + These are the polyfills required to run an Angular application on each supported browser: table - tr + tr(style="vertical-align: top") th Browsers (desktop & mobile) th Polyfills required - tr + tr(style="vertical-align: top") td Chrome, Firefox, Edge, Safari 9+ td None - tr + tr(style="vertical-align: top") td Safari 7 & 8, IE10 & 11, Android 4.1+ - td ES6 - tr + td + :marked + [ES6](#core-es6) + tr(style="vertical-align: top") td IE9 - td ES6
classList - - + td + :marked + [ES6
classList](#classlist) + :marked ## Optional browser features to polyfill ## - In addition to the mandatory polyfills, some features of Angular may require some extra polyfills. + Some features of Angular may require additional 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. + For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today. + You'll need a polyfill to use animations in other browsers. Here are the features which may require additional polyfills: table - tr + tr(style="vertical-align: top") th Feature th Polyfill - th Browsers (desktop & mobile) - tr + th(style="width: 50%") Browsers (desktop & mobile) + + tr(style="vertical-align: top") td a(href="./animations.html") Animations - td Web Animations + td + :marked + [Web Animations](#web-animations) td All but Chrome and Firefox
Not supported in IE9 - tr - td - a(href="../api/common/index/DatePipe-class.html") Date + tr(style="vertical-align: top") + td + a(href="../api/common/index/DatePipe-class.html" target="_blank") Date span , - a(href="../api/common/index/CurrencyPipe-class.html") currency + a(href="../api/common/index/CurrencyPipe-class.html" target="_blank") currency span , - a(href="../api/common/index/DecimalPipe-class.html") decimal + a(href="../api/common/index/DecimalPipe-class.html" target="_blank") decimal span and - a(href="../api/common/index/PercentPipe-class.html") percent + a(href="../api/common/index/PercentPipe-class.html" target="_blank") percent span pipes - td Intl API + td + :marked + [Intl API](#intl) td All but Chrome, Firefox, Edge and IE11 - tr + tr(style="vertical-align: top") td - a(href="../api/common/index/NgClass-directive.html") NgClass + a(href="../api/common/index/NgClass-directive.html" target="_blank") NgClass span on SVG elements - td classList + td + :marked + [classList](#classlist) td IE10, IE11 - tr + tr(style="vertical-align: top") td a(href="./server-communication.html") Http span when sending and receiving binary data - td Typed Arrays
Blob
FormData + td + :marked + [Typed Array](#typedarray)
[Blob](#blob)
[FormData](#formdata) td IE 9 :marked @@ -141,51 +162,43 @@ table 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 + a#core-es6(href="https://github.com/zloirock/core-js" target="_blank") ES6 td MIT td 27.4KB tr - td classList td - a(href="https://github.com/eligrey/classList.js") https://github.com/eligrey/classList.js + a#classlist(href="https://github.com/eligrey/classList.js" target="_blank") classList td Public domain td 1KB tr - td Intl td - a(href="https://github.com/andyearnshaw/Intl.js ") https://github.com/andyearnshaw/Intl.js + a#intl(href="https://github.com/andyearnshaw/Intl.js" target="_blank") Intl 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 + a#web-animations(href="https://github.com/web-animations/web-animations-js" target="_blank") Web Animations 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 + a#typedarray(href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js" target="_blank") Typed Array td MIT td 4KB tr - td Blob - td - a(href="https://github.com/eligrey/Blob.js") https://github.com/eligrey/Blob.js + td + a#blob(href="https://github.com/eligrey/Blob.js" target="_blank") Blob td MIT td 1.3KB tr - td FormData - td - a(href="https://github.com/francois2metz/html5-formdata") https://github.com/francois2metz/html5-formdata + td + a#formdata(href="https://github.com/francois2metz/html5-formdata" target="_blank") 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) + * Figures are for minified and gzipped code, computed with the closure compiler