Лучший способ проверить поддержку -moz-border-radius

Почему бы не использовать -moz-border-radius и -webkit-border-radius в таблице стилей? Это действительный CSS, и добавление неиспользуемого в противном случае атрибута повредило бы меньше, чем если бы javascript выполнял беготню по выяснению, следует ли его применять или нет.

Затем в javascript вы должны просто проверить, является ли браузер IE (или Opera?) - если это так, он проигнорирует проприетарные теги, и ваш javascript может это сделать.

Может я что-то здесь упускаю ...

Безоговорочно применить CSS и проверить element.style.MozBorderRadius в скрипте?

Как насчет этого?

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

Я тестировал его в Firefox 3 (true) и false в Safari, IE7 и Opera.

(Edit: лучший неопределенный тест)

Поскольку вы уже используете jQuery, вы можете использовать утилиту jQuery.browser для анализа браузера, а затем соответствующим образом настроить таргетинг на свой CSS / JavaScript.

Проблема в том, что Firefox 2 не использует сглаживание границ. Сценарий должен будет обнаружить Firefox 3, прежде чем он будет использовать собственные закругленные углы, поскольку FF3 действительно использует сглаживание.

Я разработал следующий метод определения, поддерживает ли браузер закругленные границы или нет. Мне еще предстоит протестировать его в IE (я на машине Linux), но он правильно работает в браузерах Webkit и Gecko (например, Safari / Chrome и Firefox), а также в Opera:

function checkBorders() {
  var div = document.createElement('div');
  div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
  for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
    if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
      return true;
    };
  return false;
};

Если вы хотите протестировать Firefox 2 или 3, вам следует проверить движок рендеринга Gecko, а не фактический браузер. Я не могу найти точную дату выпуска Gecko 1.9 (это версия, которая поддерживает сглаженные закругленные углы), но в вики Mozilla говорится, что она была выпущена в первом квартале 2007 года, поэтому мы предполагаем, что май просто Конечно.

if ( /Gecko/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko/\d*/)[0].split('/')[1]) > 20070501 )

В общем, комбинированная функция такова:

function checkBorders() {
  if ( /Gecko/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko/\d*/)[0].split('/')[1]) > 20070501 ) {
    return true;
  } else {
    var div = document.createElement('div');
    div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
    for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
      if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
        return true;
      };
    return false;
  };
};

Я знаю, что это более старый вопрос, но он часто встречается в поисках по тестированию поддержки радиуса границы, поэтому я подумал, что брошу сюда этот самородок.

У Роба Глейзбрука есть небольшой фрагмент, который расширяет объект поддержки jQuery, чтобы быстро проверить поддержку радиуса границы (также moz и web-kit).

jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
    if (document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
    return (!jQuery.support.borderRadius);
}); });

Атрибуция

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