You're going the other way. Think about the user first (read: audience) then define the technology.

  

Do you want to deliver software to NGOs in remote places that have precarious equipment, slow internet and little technologically trained personnel?

Do not use advanced features. Think of pure HTML without much freshness.

  

Are you making software to be used by clients of a bank, so security is a concern?

Strictly defines which browsers and which versions can be used and use the features available on them.

  

Are you making a website for the web in general (news, recipes, etc.)?

Review the site user profile.

Google Analytics, for example, provides graphs that show the percentage of users who access your site from each browser, desktop / mobile, etc. You can then focus, for example, on writing code that is compatible with 95% of the browsers in that report.

The other 5%? They will probably have a partial use and will have to have patience.

Filling in the gaps

When defining the list of supported browsers, you can basically adopt three strategies for each feature you need to use:

Option # 1 is interesting because it benefits those who have the newest browser. Who does not, does not see the functionality better, but manages to use the site without problems. They will not be upset, for "what the eyes do not see, the heart does not feel" . : P

Option # 2 provides the same advanced features for everyone, but it involves more work and will probably slow down the site to load, as there are additional scripts to handle the extra work the browser does not do. / p>

Option # 3 is the safest, but it can negatively impact the user experience.

The decision

It's up to you - or the project's architects / leaders, or the person who decides if it's going to pay you more or less for the job. :)

The important thing is to know that all the options, or a mixture of them, are valid for different contexts.

From what I understand of your question, you would like a list of features and which browsers (with version being said) that functionality is implemented. There is a website that does just that, even it says even if a feature is partially implemented.

link

Diego, I know it's important to support the largest possible share of users, while it's difficult to maintain compatibility with legacy browsers.

An example of this dilemma is jQuery itself, which for some time maintained two versions, 1.x and 2.x, the main difference between them being support for versions of IE that are even more maintained by Microsoft .

But keeping this type of compatibility has its price, version 1.x of jQuery is larger and heavier than version 1.x, as a result it requires more time to be downloaded and more processing of the client.

In this case it's really worth penalizing ~ 96% of users because of the remaining ~ 4%, please be aware that neither% nor% of% supports Microsoft and will only support the latest version ( IE 6~8 or Edge , depending on the OS).

So I advise you to draw a line and define the minimum version of each browser you plan to support.

Now let's go to the IE 11 question, so before using features , you should check that it is compatible with the minimum browser version that you have set a little, and if it is not compatible, you should take the decision, give it up or add a feature script.

In my opinion, the best way to implement a polyfill script is to create a Polyfill , at the beginning of it, make a detection of IIFE (Immediately-invoked function expression) , if it is not found, then implement it.

Example, you decided to support feature and found it cool to use IE9 on your site, but found that it does not support it, in which case you will have to give up tag template or use a <template> so that your system understands this Polyfill .

Here is an example of tag for Polyfill tag of HTML5 taken from the following repository .:

(function () {
  if ('content' in document.createElement('template')) {
    return;
  }

  var templates = document.getElementsByTagName('template');
  var plateLen = templates.length;

  for (var x = 0; x < plateLen; ++x) {
    var template = templates[x];
    var content = template.childNodes;
    var fragment = document.createDocumentFragment();

    while (content[0]) {
      fragment.appendChild(content[0]);
    }

    template.content = fragment;
  }  
})();