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

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

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

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

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

Проверка поддержки 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 )

20.08.2008 14:18:33
Прекращает ли выполнение JavaScript, если вы пытаетесь применить неопределенные атрибуты CSS к элементам?
Ben Shelock 3.01.2010 21:30:35
Я пришел к этому вопросу только сейчас, когда ему 2 года. Поэтому для записи я бы добавил, что сегодня лучший способ (IMO) проверить возможности браузера - это использовать библиотеку Modernizr
jira 12.09.2010 19:27:55
Как использовать функцию обнаружения, чтобы узнать, поддерживает ли браузер border-radius? stackoverflow.com/questions/5277288/…
Tom 14.09.2011 15:20:46
7 ОТВЕТОВ
РЕШЕНИЕ

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

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

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

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

11
2.03.2011 16:09:45
Если посмотреть еще раз, это не лучший способ проверить неопределенность в js, я
travis 2.03.2011 16:07:40

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

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

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

4
8.02.2016 13:19:21

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

1
21.08.2008 01:46:12

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

1
21.08.2008 09:03:12

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

1
21.10.2008 17:40:31

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

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

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

4
11.08.2010 13:37:30