My<cod/>.net
Лучший способ проверить наличие поддержки -moz-border-radius
Я хотел, чтобы некоторые из этих изящных закругленных углов были использованы для веб-проекта, над которым я сейчас работаю.
Я думал, что попытаюсь сделать это с помощью javascript, а не CSS, чтобы свести запросы к файлам изображений к минимуму (да, я знаю, что можно объединить все необходимые закругленные угловые формы в одно изображение), и я также хотел иметь возможность изменять цвет фона практически на лету.
Я уже использую jQuery, поэтому я посмотрел на отличный плагин с закругленными углами , и он работал как шарм в каждом браузере, который я пробовал. Будучи разработчиком, однако, я заметил возможность сделать его немного более эффективным. Скрипт уже содержит код для определения того, поддерживает ли текущий браузер webkit скругленных угла (браузеры на основе safari). Если это так, то он использует raw 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) {}
Он основан на теории, что геккон "expands" композит -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 )
Я знаю, что это более старый вопрос, но он появляется высоко в поисках поддержки пограничного радиуса тестирования, поэтому я решил бросить этот самородок сюда.
У Роба Глейзбрука есть небольшой фрагмент, который расширяет объект поддержки 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 для реализации 2-стороннего слайдера, чтобы другие браузеры все еще имели подобный визуальный опыт.
Почему бы не использовать -moz-border-radius и -webkit-border-radius в таблице стилей? Это действительно CSS, и выбрасывание в противном случае неиспользуемого атрибута повредит меньше, чем если бы javascript проделал всю работу по выяснению, следует ли его применять или нет.
Затем в javascript вы просто проверите, является ли браузер IE (или Opera?)- если это так, он будет игнорировать проприетарные теги, и ваш javascript может сделать это.
Может быть, я чего-то не понимаю...
Я разработал следующий метод для определения того, поддерживает ли браузер округленные границы или нет. Я еще не тестировал его на IE (am на машине 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 rendering engine, а не фактический браузер. Я не могу найти точную дату выпуска 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;
};
};
Поскольку вы уже используете jQuery, вы можете использовать утилиту jQuery.browser , чтобы сделать некоторые обнюхивания браузера, а затем нацелить ваш CSS / JavaScript соответственно.