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.saucelabs.com'>Sauce Labs</a>.</p>

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


		<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</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}}' 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><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='http://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'><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 as IE12</h4>
			<p>Currently the <a href='https://github.com/3rd-Eden/useragent'>useragent</a> module identifies Edge as IE12, so we follow that, although Edge's official version number is actually in a different range starting at 20.</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>

	</div>

{{>footer}}