Skip to content


Suggestion: Feature detect then load the polyfills needed #11

Daniel-Hug opened this Issue · 13 comments

6 participants


My suggestion (migrated from this comment) is to have users of be able to include a script on their page that would make a list of features not supported:

var arrayOfUnsupportedFeatures = [

Then it would load the polyfills for just those features:

var scriptEl = document.createElement('script');
scriptEl.src = "//" + arrayOfUnsupportedFeatures.join(',');

Like this:

<script src="//,querySelectorAll">

^5, looks good.


:+1: This would make it possible to use in a way that doesn’t involve UA sniffing!


This would rock :+1:


I should have this in today.


The following URL returns the Array.prototype.forEach polyfil regardless if it is needed by the user agent:

<script src="//"></script>

The following URL returns the Array.prototype.forEach polyfill only if it is needed by the user agent:

<script src="//"></script>

Get Array.prototype.forEach and Array.prototype.reduceRight JavaScript regardless:

<script src="//*forEach,Array.*forEach)"></script>

Get section and template CSS conditionally:

<script src="//,template).css"></script>

Now, on to testing. This area might still need some improvement. Based on @Daniel-Hug's demonstration, you hit a

<script src="//"></script>

The test script creates an object with a list of features, with each feature property name returning whether that feature exists. We take all the features that return false and push them into an array, and inject a script tag that returns those specific features' polyfills.


@jonathantneal Your link in your last comment is dead.


@Daniel-Hug, thanks, let me know what you all think of it. I updated the link, it was just a github markdown goof on my part.


test.js isn't working. It creates a new script tag of the form shown below, but then the below script only returns the scripts that it determines your user agent wants, not the ones you asked for:

<script src="//,,Element..mutation"></script>

If you include the Array..forEach script, shown below, on your page, and visit the page in chrome you'll still only get the Element.prototype.matches, Element.prototype.webkitMatchesSelector, etc., not Array.prototype.forEach.

<script src="//"></script>

I can use the "gimme" keyword, and that returns Array..forEach, but it also includes the user agent scripts as well. I want to be able to load just the scripts I want:

<script src="//"></script>

Yes, the middle-ware needs to be rewritten, and new tests need to reflect that functionality. As the service (apparently) gains traction, this is increasingly necessary.

@jdalton jdalton referenced this issue in Financial-Times/polyfill-service

Use live feature detection instead of being based on User-Agent #84


Discussion continues in Financial-Times#84

@triblondon triblondon closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.