polyfill-service/docs/features.html

A polyfill combinator

{{>header}}

{{>nav}}

	<div class="o-techdocs-main o-techdocs-content">

		<h1>Features and browsers supported</h1>

		<p>We test browser support with a test suite for each feature.  A browser is considered compliant only if it passes all the tests, so this is a reasonably comprehensive test rather than a naive feature-detect.  To view the test suite for a feature in the browser you're using right now, click the Tests link in the feature list.  The results below are generated using browsers hosted by <a href='https://www.browserstack.com'>BrowserStack</a>.</p>

		<h2 id='feature-list'>Feature list</h2>

		<div class="o-forms o--if-js">
			<label for="filter-features" class="o-forms-label">Filter features</label>
			<input id="filter-features" type="text" class="o-forms-text o-forms-text--small" value="" placeholder="Type to filter by name"/>
		</div>

		<table class='compatibility compatibility--data'>
			<caption>
				<p style='text-align:right'>Key: <span class='status-missing'>Feature missing</span>, <span class='status-polyfilled'>Feature supported with Polyfill service</span>, <span class='status-native'>Feature supported natively</span>, <i title='Part of the default set' class="fa fa-star"></i> Included by default</p>
			</caption>
			<thead>
				<tr>
					<th>
						<input type="radio" name="compatMode" value="data" class="compatMode o-forms-radio o-forms-radio--small" id="compatMode_data" checked="checked">
						<label for="compatMode_data" class="o-forms-label">Data</label>
						<input type="radio" name="compatMode" value="live" class="compatMode o-forms-radio o-forms-radio--small" id="compatMode_live">
						<label for="compatMode_live" class="o-forms-label">Live test</label>
					</th>
					<th class='compatibility__data'><span class='compat_name'>IE &amp; Edge</span><span class='compat_icon'><i class='fa fa-internet-explorer'></i></span></th>
					<th class='compatibility__data'><span class='compat_name'>Firefox</span><span class='compat_icon'><i class='fa fa-chrome'></i></span></th>
					<th class='compatibility__data'><span class='compat_name'>Chrome</span><span class='compat_icon'><i class='fa fa-firefox'></i></span></th>
					<th class='compatibility__data'><span class='compat_name'>Safari</span><span class='compat_icon'><i class='fa fa-safari'></i></span></th>
					<th class='compatibility__live'>Your browser</th>
					<th class='compatibility__menu'></th>
				</tr>
			</thead>
			<tbody>
			{{#compat}}
				<tr id='{{slug}}' data-feature-name='{{feature}}' class='feature{{#if notes}} has-notes{{/if}}'>
					<td class='compatibility__label'>
						<h3>{{feature}}<a class='o-techdocs__permalink' href='#{{slug}}'>¶</a></h3>
						<ul class='feature-meta'>
							<li title="Maximum size, minifed, before gzip">{{dispBytes size}}</li>
							{{#if isDefault}}<li><i title='Part of the default set' class="fa fa-star"></i></li>{{/if}}
							{{#if notes}}<li class='o--if-js'><i title='Show/hide notes' class="fa fa-info-circle notes-toggle"></i></li>{{/if}}
						</ul>
						<script type="text/template" id="overlay-src-{{slug}}">
							<ul class='hover-menu o-techdocs-content'>
								{{#if license}}
									{{#if licenseIsUrl }}
									<li class='license license-proprietary'><a title='This polyfill has a specific licence' href='{{license}}'><i class='fa fa-warning'></i> Proprietary license</a></li>
									{{else}}
									<li class='license'><a title='This polyfill has a specific licence' href='https://choosealicense.com/licenses/{{lower license}}'>License: {{license}}</a></li>
									{{/if}}
								{{/if}}
								{{#if hasTests}}<li><a href='/test/tests?feature={{feature}}'>Run tests</a></li>{{/if}}
								{{#if spec}}<li><a href='{{spec}}'>Specification</a></li>{{/if}}
								{{#if docs}}<li><a href='{{docs}}'>Documentation</a></li>{{/if}}
								<li><a href='https://github.com/Financial-Times/polyfill-service/tree/master/polyfills/{{baseDir}}'>Polyfill source</a></li>
							</ul>
						</script>
					</td>
					<td class='compatibility__data'>{{#ie}}<span class='status-{{status}}' title='{{statusMsg}}'>{{version}}</span>{{/ie}}</td>
					<td class='compatibility__data'>{{#firefox}}<span class='status-{{status}}' title='{{statusMsg}}'>{{version}}</span>{{/firefox}}</td>
					<td class='compatibility__data'>{{#chrome}}<span class='status-{{status}}' title='{{statusMsg}}'>{{version}}</span>{{/chrome}}</td>
					<td class='compatibility__data'>{{#safari}}<span class='status-{{status}}' title='{{statusMsg}}'>{{version}}</span>{{/safari}}</td>
					<td class='compatibility__live'></td>
					<td class='compatibility__menu o--if-js'><i class="o-overlay-trigger fa fa-bars" data-o-overlay-src="#overlay-src-{{slug}}" data-o-overlay-id="overlay-{{slug}}" data-o-overlay-compact="true" data-o-overlay-arrow-position="right" title='Links'></i></td>
				</tr>
				{{#if notes}}
					<tr class='notes'><td colspan='7'>
						<ul>
						{{#notes}}
						<li>{{{.}}}</li>
						{{/notes}}
						</ul>
					</td></tr>
				{{/if}}
			{{/compat}}
			</tbody>
		</table>

		<aside>
			<h4>Microsoft: Edge vs IE</h4>
			<p>Since the version ranges of Internet Explorer and Edge form a continuous sequence, we refer to them as the same family, which for compatibility reasons is <code>ie</code> and <code>ie_mob</code>.</p>
		</aside>

		<h2 id='understanding-polyfill-sizes'>Bundle sizes</h2>

		<p>The table above lists a data size for each polyfill, which is the size of the polyfill including a feature detect, after minification, and before gzip.  Two very important things to remember about these sizes are:</p>

		<ul>
			<li>Gzip gets more effective the larger the data is, so the more polyfills you include in the bundle you request, the smaller each individual polyfill is likely to be, once the bundle is gzipped.</li>
			<li>Some polyfills have multiple variants.  In these cases, the size of the largest variant is shown.</li>
		</ul>

		<p>The following table shows the total size of the polyfill bundle for the <strong>default</strong> set, in all our test browsers:</p>

		<table>
			<thead>
				<tr><th>Browser</th><th>Version</th><th>Size (raw)</th><th>Size (min)</th><th>Size (gzip)</th></tr>
			</thead>
			<tbody>
				{{#sizes}}
				<tr><td>{{family}}</td><td>{{ver}}</td><td>{{dispBytes rawbytes}}</td><td>{{dispBytes minbytes}}</td><td>{{dispBytes gzipbytes}}</td></tr>
				{{/sizes}}
			</tbody>
		</table>

		<h2 id='default-sets'>Default sets</h2>

		<p>The alias <code>default</code> includes a set of polyfills that comprise features with high demands, small polyfill sizes, good performance and at least one good native implementation in a stable browser.  The set evolves over time to include new features as they become a more stable part of the web platform.</p>

		<p>Although you cannot request an immutable version of a polyfill, you can reduce the risk of future releases of the polyfill service breaking compatibility with your code by using an immutable default set.  Each time we make a release, if we have changed the features included in the default set we will issue a new immutable alias for the set, which won't change when the default set changes again.  The components of these sets are shown below:</p>

		<table>
			<thead>
				<tr><th>Alias</th><th>Constituents</th></tr>
			</thead>
			<tbody>
				<tr><td><code style='white-space: nowrap'>default-3.3</code></td><td>Array.isArray, Array.prototype.every, Array.prototype.filter, Array.prototype.forEach, Array.prototype.indexOf, Array.prototype.lastIndexOf, Array.prototype.map, Array.prototype.reduce, Array.prototype.reduceRight, Array.prototype.some, atob, CustomEvent, Date.now, Date.prototype.toISOString, Document, document.querySelector, document.visibilityState, DOMTokenList, Element, Element.prototype.classList, Element.prototype.cloneNode, Element.prototype.closest, Element.prototype.matches, Event, Event.DOMContentLoaded, Event.focusin, Event.hashchange, Function.prototype.bind, JSON, Object.assign, Object.create, Object.defineProperties, Object.defineProperty, Object.getOwnPropertyNames, Object.getPrototypeOf, Object.keys, requestAnimationFrame, String.prototype.includes, String.prototype.trim, Window, XMLHttpRequest, ~html5-elements</td></tr>
				<tr><td><code style='white-space: nowrap'>default-3.4</code></td><td><strong>Added</strong> Array.from, Array.of, Array.prototype.fill, Element.prototype.after, Element.prototype.append, Element.prototype.before, Element.prototype.prepend, Element.prototype.remove, Element.prototype.replaceWith, Node.prototype.contains, Number.isNaN, Promise, String.prototype.endsWith, String.prototype.startsWith, URL, location.origin</td></tr>
				<tr><td><code style='white-space: nowrap'>default-3.5</code></td><td><strong>Added</strong> Object.getOwnPropertyDescriptor</td></tr>
				<tr><td><code style='white-space: nowrap'>default-3.6</code></td><td><strong>Added</strong> Map, Set</td></tr>
			</tbody>
		</table>
	</div>

{{>footer}}