javascript - color - La mejor forma de verificar el soporte de-moz-border-radius

style javascript

Question

Quería algunas de esas esquinas redondeadas para un proyecto web en el que estoy trabajando actualmente.

Pensé que trataría de lograrlo utilizando javascript y no CSS en un esfuerzo por mantener las solicitudes de archivos de imagen al mínimo (sí, sé que es posible combinar todas las formas de esquina redondeadas requeridas en una imagen) y también quería para poder cambiar el color de fondo prácticamente sobre la marcha.

Ya utilicé jQuery, así que miré el excelente complemento de esquinas redondeadas y funcionó como un amuleto en cada navegador que probé. Sin embargo, al ser un desarrollador noté la oportunidad de hacerlo un poco más eficiente. El script ya incluye código para detectar si el navegador actual admite esquinas redondeadas de webkit (navegadores basados ​​en Safari). Si es así, usa CSS sin procesar en lugar de crear capas de div.

Pensé que sería increíble si se pudiera realizar el mismo tipo de comprobación para ver si el navegador admite las -moz-border-radius-* específicas de Gecko -moz-border-radius-* y, si es así, -moz-border-radius-* .

El control de soporte de webkit se ve así:

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

Eso, sin embargo, no funcionó para -moz-border-radius así que comencé a buscar alternativas.

Mi solución alternativa es, por supuesto, usar la detección del navegador, pero eso está lejos de ser una 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 Gecko "expande" el radio compuesto -moz-border-a las cuatro sub-propiedades

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

¿Hay algún gurú javascript / CSS que tenga una mejor solución?

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

Answer 1

¿Aplicar CSS incondicionalmente y verificar element.style.MozBorderRadius en el script?

Answer 2

Como ya está usando jQuery, puede usar la utilidad jQuery.browser para hacer un poco de búsqueda en el navegador y luego segmentar su CSS / JavaScript según corresponda.

Answer 3

El problema con esto es que Firefox 2 no usa anti-aliasing para las fronteras. El script debería detectar Firefox 3 antes, ya que usa esquinas redondeadas nativas, ya que FF3 usa anti-aliasing.

Answer 4

Desarrollé el siguiente método para detectar si el navegador admite bordes redondeados o no. Todavía tengo que probarlo en IE (estoy en una máquina Linux), pero funciona correctamente en los navegadores Webkit y Gecko (es decir, Safari / Chrome y Firefox), así como en 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;
};

Si desea probar Firefox 2 o 3, debe verificar el motor de renderizado Gecko, no el navegador real. No puedo encontrar la fecha de lanzamiento precisa para Gecko 1.9 (que es la versión que admite esquinas redondeadas antialias), pero el wiki de Mozilla dice que fue lanzado en el primer trimestre de 2007, así que asumiremos que solo será Por supuesto.

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

En general, la función combinada es 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;
  };
};

Answer 5

Sé que esta es una pregunta más antigua, pero muestra un alto nivel en las búsquedas para probar el soporte del radio de borde, así que pensé en arrojar esta pepita aquí.

Rob Glazebrook tiene un pequeño fragmento que amplía el objeto de soporte de jQuery para hacer una buena comprobación rápida del soporte de radio de borde (también moz y kit web).

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 esta forma, si no hay soporte, puedes recurrir a jQuery para implementar un control deslizante bidireccional para que otros navegadores tengan una experiencia visual similar.

Answer 6

¿Qué tal esto?

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

Lo probé en Firefox 3 (verdadero) y falso en: Safari, IE7 y Opera.

(Editar: mejor prueba indefinida)

Answer 7

¿Por qué no usar -moz-border-radius y -webkit-border-radius en la hoja de estilo? Es un CSS válido y arrojar un atributo que de otra forma no se utilizaría haría menos daño que tener javascript que haga la tarea de averiguar si debería aplicarlo o no.

Luego, en el javascript, simplemente verificaría si el navegador es IE (u Opera?); Si lo es, ignorará las etiquetas propietarias, y su javascript podría hacerlo.

Tal vez me estoy perdiendo algo aquí ...