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

Question

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

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

Я уже использую jQuery, поэтому я посмотрел на отличный rounded corners plugin, и он работал как шарм в каждом браузере, который я пробовал. Однако, будучи разработчиком, я заметил возможность сделать его более эффективным. Скрипт уже содержит код для определения того, поддерживает ли текущий браузер сторонние углы webkit (браузеры, основанные на сафари). Если это так, он использует raw 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-границы радиуса к четырем подсвойств

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

Как вы уже используете JQuery, вы можете использовать утилиту jQuery.browser сделать некоторые браузер нюхают, а затем ориентировать CSS/JavaScript соответственно.

Answer 5

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

Answer 6

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

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 7

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

Rob Glazebrook имеет небольшой фрагмент, который расширяет опорный объект 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 для реализации 2-полосная слайдер так, что другие браузеры все еще имеют аналогичный визуальный опыт.