Как в js определить, поддерживаются ли браузером определенные функций и/или атрибуты?

Question

[germn]

Если посмотреть в Li статистику по браузерам в рунете, можно увидеть, что на 5-ку самых популярных браузеров приходится всего чуть более 60% пользователей и это при том, что для Хрома не учитывается версия.

Потихоньку набирают долю Хромы от Яндекса и Мэйла, часть пользователей, вероятно, скрывает или подменяет user-agent, старые версии браузеров в сумме ещё занимают определенную долю и т.д.

Т.о. определять браузер по User-Agent мне кажется занятием бесполезным, а создавать кроссбраузерный js, работающий у максимального кол-ва пользователей, хочется.

В связи с этим вопрос, вернее, даже два:

1. Как определять, поддерживает ли браузер функцию (а точнее, поддерживает ли он её «стандартно», без необычного поведения)?
   Понимаю, что вопрос некорректный, но если что-то похожее на ответ есть — буду благодарен.
2. Как определять, поддерживает ли браузер тот или иной атрибут?
   Ну, например, sandbox у iframe'ов: понятно, что все последние Хромы/Хромиумы будут, а User-Agent скорее всего у них разный (или отсутствует).

Answer 1

[twenty]

Попробуйте Modernizr.
На Хабре даже есть статья по его использованию.

Comments

[twenty]

А что касается атрибутов — обычно они дублируются пустыми свойствами в DOM-объекте. В случае с sandbox'ом можно проверить само свойство:

if ( document.getElementById("my-iframe").sandbox != undefined ) {
    // Браузер, поддерживающий атрибут sandbox
}

Answer 2

[avalak]

Modernizr хорош, только очень уж много места занимает (да, есть возможно сделать собственную сборку). В своё время утащил отсюда неплохое решение для определения поддержки отдельных атрибутов.

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