A melhor maneira de verificar o suporte -moz-border-radius

Question

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)

Answer 1

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)

Answer 2

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);
}); });

Atribuição

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.

Answer 3

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

Answer 4

Aplique CSS incondicionalmente e verifique element.style.MozBorderRadius no roteiro?

Answer 5

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.

Answer 6

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.

Answer 7

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;
  };
};