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

Question

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

Я подумал, что попробую сделать это, используя JavaScript, а не CSS, чтобы свести к минимуму запросы на файлы изображений (да, я знаю, что можно объединить все необходимые формы закругленных углов в одно изображение) и Я также хотел иметь возможность изменять цвет фона практически на лету.

Я уже использую jQuery, поэтому я посмотрел на отличный плагин с закругленными углами , и он работал как прелесть в каждом браузере, который я пробовал. Однако, будучи разработчиком, я заметил возможность сделать его немного более эффективным. Сценарий уже содержит код для определения, поддерживает ли текущий браузер закругленные углы webkit (браузеры на основе Safari). Если это так, он использует сырой CSS вместо создания слоев div.

Я подумал, что было бы здорово, если бы можно было выполнить такую ​​же проверку, чтобы увидеть, поддерживает ли браузер специфичные для Gecko свойства -moz-border-radius-* и если да, то использовать их.

Проверка поддержки webkit выглядит следующим образом:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

Это, однако, не сработало для -moz-border-radius, поэтому я начал проверять альтернативы.

Мое запасное решение, конечно, заключается в использовании обнаружения браузера, но это далеко от рекомендуемой практики.

Мое лучшее решение пока следующее:

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

Он основан на теории о том, что Gecko "расширяет" составной -moz-border-radius до четырех подсвойств

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

Есть ли какой-нибудь гуру javascript / CSS, у которого есть лучшее решение?

(Запрос функции для этой страницы на http://plugins.jquery.com/node/3619)

Answer 1

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

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

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

(Изменить: лучший неопределенный тест)

Answer 2

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

У Роба Глэйзбрука есть небольшой фрагмент кода, который расширяет объект поддержки 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);
}); });

Attribution

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

Answer 3

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

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

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

Answer 4

Я разработал следующий метод для определения, поддерживает ли браузер скругленные границы или нет. Мне еще предстоит протестировать его в 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;
  };
};

Answer 5

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

Answer 6

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

Answer 7

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