La mejor manera de comprobar -moz-border-radius apoyo

Question

Yo quería que algunos de esos spiffy esquinas redondeadas para un proyecto web que estoy trabajando actualmente.

Pensé que iba a tratar de lograr el uso de javascript y CSS no en un esfuerzo para mantener a las solicitudes de los archivos de imagen a un mínimo (sí, sé que es posible combinar todas las esquinas redondeadas formas en una sola imagen) y yo también quería ser capaz de cambiar el color de fondo bastante sobre la marcha.

Yo ya utilizan jQuery, así que miré en el excelente las esquinas redondeadas plugin y trabajó como un encanto en todos los navegadores que he intentado.Ser un desarrollador sin embargo me di cuenta de la oportunidad para hacer un poco más eficiente.El script ya incluye código para detectar si el navegador soporta webkit esquinas redondeadas (safari en base de los navegadores).Si es así, se utiliza raw CSS en lugar de la creación de capas de divs.

Pensé que sería increíble si el mismo tipo de verificación podrían llevarse a cabo para ver si el navegador soporta el Gecko específicos -moz-border-radius-* propiedades y si lo utilizan.

La verificación de webkit apoyo se parece a esto:

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

Que, sin embargo, no trabajo para -moz-border-radius así que me puse a revisar alternativas.

Mi solución alternativa es, por supuesto, el uso de la detección del navegador, pero que está lejos de la práctica recomendada por supuesto.

Mi mejor solución es la siguiente.

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

Se basa en la teoría de que el Gecko se "expande" el composite-moz-border-radius para los cuatro sub-propiedades

• -moz-border-radius-topleft
• -moz-border-radius-topright
• -moz-border-radius-bottomleft
• -moz-border-radius-bottomright

¿Hay algún javascript/CSS gurú por ahí que tiene una solución mejor?

(La función de solicitud de esta página se encuentra en http://plugins.jquery.com/node/3619)

Answer 1

¿Qué hay de esto?

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

He probado en Firefox 3 (verdadero) y false en:Safari, IE7, y la Ópera.

(Edición:mejor indefinido de prueba)

Answer 2

Sé que esta es una antigua pregunta, pero se muestra más arriba en busca de pruebas de border-radius apoyo, así que pensé en tirar esta pepita de aquí.

Rob Glazebrook tiene un pequeño fragmento de código que se extiende el objeto de jQuery para hacer un buen comprobación rápida para border-radius de apoyo (también moz y 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);
}); });

Atribución

De esa manera, si no hay apoyo para que usted puede caer de nuevo y el uso de jQuery para implementar una 2-forma de control deslizante de manera que otros navegadores todavía tienen una experiencia visual similar.

Answer 3

¿Por qué no usar -moz-border-radius y -webkit-border-radius en la hoja de estilos?Es válido CSS y lanzar un no utilizado atributo duele menos que tener javascript hacer el trabajo de campo de averiguar si se debe aplicar o no.

A continuación, en el javascript que acababa de comprobar si el navegador es IE (o la Ópera?) - si lo es, lo voy a ignorar la propiedad de las etiquetas, y su javascript podría hacer lo que tiene que hacer.

Tal vez me estoy perdiendo algo aquí...

Answer 4

Aplicar CSS incondicionalmente y verificación element.style.MozBorderRadius en el script?

Answer 5

Como usted ya está usando jQuery usted podría utilizar jQuery.navegador utilidad para hacer algunas browser sniffing y, a continuación, dirigirse a su CSS / JavaScript en consecuencia.

Answer 6

El problema con esto es que Firefox 2 no utilizar suavizado de los bordes.La secuencia de comandos sería necesario detectar para Firefox 3 antes de que se utiliza nativo esquinas redondeadas como FF3 hace uso de anti-aliasing.

Answer 7

He desarrollado el siguiente método para detectar si el navegador es compatible con contornos redondeados o no.Todavía tengo que probarlo en IE (estoy en un equipo Linux), pero funciona correctamente en los navegadores Webkit y Gecko (es decir,Safari/Chrome y Firefox), así como en la Ópera:

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

Si usted quería para probar Firefox 2 o 3, usted debe comprobar el motor de renderizado Gecko, no el navegador.No puedo encontrar la exacta fecha de lanzamiento para el Gecko 1.9 (que es la versión que soporta suavizado de esquinas redondeadas), pero el Mozilla wiki dice que fue lanzado en el primer trimestre de 2007, así que vamos a suponer que sólo Puede ser seguro.

if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )

Con todo, la función combinada es este:

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