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

Question

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

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

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

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

• -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

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

У Роба Глейзбрука есть небольшой фрагмент, который расширяет объект поддержки jQuery, чтобы выполнить приятную быструю проверку поддержки border-radius (также 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 для реализации двухстороннего слайдера, чтобы другие браузеры по-прежнему имели аналогичный визуальный опыт.

Answer 3

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

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

Может быть, я здесь чего-то не понимаю...

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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