A melhor maneira de verificar o suporte -moz-border-radius
-
09-06-2019 - |
Pergunta
Eu queria alguns desses cantos arredondados para um projeto web no qual estou trabalhando atualmente.
Pensei em tentar fazer isso usando javascript e não CSS em um esforço para manter as solicitações de arquivos de imagem no mínimo (sim, eu sei que é possível combinar todas as formas de cantos arredondados necessárias em uma imagem) e também queria para poder alterar a cor de fundo rapidamente.
Eu já utilizo jQuery, então olhei o excelente plugin de cantos arredondados e funcionou perfeitamente em todos os navegadores que experimentei.Porém, como desenvolvedor, percebi a oportunidade de torná-lo um pouco mais eficiente.O script já inclui código para detectar se o navegador atual suporta cantos arredondados do webkit (navegadores baseados em Safari).Nesse caso, ele usa CSS bruto em vez de criar camadas de divs.
Eu pensei que seria incrível se o mesmo tipo de verificação pudesse ser realizada para ver se o navegador suporta a versão específica do Gecko. -moz-border-radius-*
propriedades e, se assim for, utilizá-las.
A verificação de suporte ao webkit é semelhante a esta:
var webkitAvailable = false;
try {
webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
}
catch(err) {}
Isso, no entanto, não funcionou para -moz-border-radius
então comecei a procurar alternativas.
Minha solução substituta é, obviamente, usar a detecção do navegador, mas isso está longe de ser uma prática recomendada, é claro.
Minha melhor solução ainda é a seguinte.
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) {}
É baseado na teoria de que Gecko "expande" o composto -moz-border-radius para as quatro subpropriedades
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright
Existe algum guru de javascript/CSS que tenha uma solução melhor?
(A solicitação de recurso para esta página está em http://plugins.jquery.com/node/3619)
Solução
Que tal agora?
var mozborderAvailable = false;
try {
if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
mozborderAvailable = true;
}
} catch(err) {}
Testei no Firefox 3 (verdadeiro) e falso em:Safari, IE7 e Ópera.
(Editar:melhor teste indefinido)
Outras dicas
Eu sei que esta é uma pergunta mais antiga, mas ela aparece no topo das pesquisas para testar o suporte ao raio da borda, então pensei em colocar esta pepita aqui.
Rob Glazebrook tem um pequeno trecho que estende o objeto de suporte do jQuery para fazer uma verificação rápida e agradável do suporte ao raio da borda (também moz e 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);
}); });
Dessa forma, se não houver suporte para isso, você poderá voltar atrás e usar o jQuery para implementar um controle deslizante bidirecional para que outros navegadores ainda tenham uma experiência visual semelhante.
Por que não usar -moz-border-radius
e -webkit-border-radius
na folha de estilo?É CSS válido e lançar um atributo não utilizado prejudicaria menos do que fazer com que o javascript fizesse o trabalho braçal de descobrir se deveria aplicá-lo ou não.
Então, no javascript, você apenas verificaria se o navegador é IE (ou Opera?) - se for, ele ignorará as tags proprietárias e seu javascript poderá fazer isso.
Talvez eu esteja faltando alguma coisa aqui ...
Aplique CSS incondicionalmente e verifique element.style.MozBorderRadius
no roteiro?
Como você já está usando jQuery você poderia usar jQuery.browser utilitário para fazer algumas buscas no navegador e, em seguida, direcionar seu CSS/JavaScript de acordo.
O problema com isso é que o Firefox 2 não usa anti-aliasing para as bordas.O script precisaria ser detectado para o Firefox 3 antes de usar cantos arredondados nativos, pois o FF3 usa anti-aliasing.
Desenvolvi o seguinte método para detectar se o navegador suporta bordas arredondadas ou não.Ainda não testei no IE (estou em uma máquina Linux), mas funciona corretamente nos navegadores Webkit e Gecko (ou seja,Safari/Chrome e Firefox), bem como no 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;
};
Se você quiser testar o Firefox 2 ou 3, você deve verificar o mecanismo de renderização Gecko, não o navegador real.Não consigo encontrar a data de lançamento precisa do Gecko 1.9 (que é a versão que suporta cantos arredondados com suavização de serrilhado), mas o wiki da Mozilla diz que foi lançado no primeiro trimestre de 2007, então assumiremos que maio é apenas para ser claro.
if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )
Resumindo, a função combinada é esta:
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;
};
};