How to determine in js if certain functions and/or attributes are supported by the browser?

Question

JavaScript

If you look at the statistics on browsers in Runet in Li, you can see that the top 5 most popular browsers account for just over 60% of users, and this despite the fact that the version is not taken into account for Chrome.

Chrome is slowly gaining a share from Yandex and Mail, some users are probably hiding or replacing user-agent, old versions of browsers still occupy a certain share in total, etc.

That. It seems to me useless to determine the browser by User-Agent, but I want to create cross-browser js that works for the maximum number of users.

In this regard, the question, or rather, even two:

1. How do you determine if a browser supports a feature (more specifically, does it support it "standardly" without unusual behavior)?
   I understand that the question is incorrect, but if there is something similar to the answer, I will be grateful.
2. How to determine if the browser supports a certain attribute?
   Well, for example, iframes have sandbox : it is clear that all the latest Chromes / Chromiums will be, and the User-Agent is most likely different (or absent).

Answer 1

Try Modernizr .
Habré even has an article on its use.

Answer 2

Modernizr is good, but it takes up a lot of space (yes, it is possible to make your own build). At one time, I dragged a good solution from here to determine the support for individual attributes.

// @url https://gist.github.com/373874
if ($.support.transition) {
  $('html').addClass('csstransitions');
} else {
  // fallback
}