aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Leyendo el título del artículo debes pensar “¿Solo 7?”. Y es que Internet Explorer y Firefox se parecen en que los dos son navegadores y … poco más

En ImpressiveWeb hacen esta corta recopilación de 7 diferencias Javascript que debemos tener presentes para nuestros scripts.

1) La propiedad “float” de CSS

Generalmente cuando accedemos a una propiedad relacionada al estilo de un elemento solemos usar element.style.propiedad, pero para la propiedad float usar el sistema element.style.float no nos va a ser posible.

// IE
document.getElementById("elem").style.styleFloat = "left"; // right

// FF
document.getElementById("elem").style.cssFloat = "left"; // right

2) Estilos computados de un elemento

Si queremos acceder a los estilos procesados ya por el navegador nos encontramos con una diferencia significante en el sintaxis para ambos navegadores.

// IE
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;

// FF
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;  

// MIX
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle ?
		myObject.currentStyle.backgroundColor :
   	        document.defaultView.getComputedStyle(myObject, null).backgroundColor;

3) Accediendo al “class” de un elemento

Debido a la especificación de Internet Explorer, cuando queremos acceder al class de un elemento usando getAttribute() debemos modificar el nombre que solicitamos.

// IE
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");  

// FF
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

4) Accediendo al atributo “for” de las etiquetas <label />

Exactamente lo mismo ocurre con el atributo for de las etiquetas <label /> que en Internet Explorer para solicitar esta información, debemos reemplazar el nombre que pedimos.

// IE
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");  

// FF
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

5) Obtener la posición del puntero del ratón

Otra diferencia y que mucho nos hace agrandar nuestro código es la localización del puntero.

// IE
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;  

// FF
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.page;
myCursorPosition[1] = event.pageY;   

// MIX
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX || event.page;
myCursorPosition[1] = event.clientY ||event.pageY;

6) Obtener el tamaño del navegador o del área visible

Al obtener el tamaño de la pantalla y del area visible nos encontramos con el mismo problema. Parece que no se ponen de acuerdo en que nombre ponerle a las propiedades comunes.

// IE
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;  

// FF
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

Joseanpg nos amplia el motivo de dicha diferencia en el comentario #1 y en este enlace

7) Transparencias

Si las transparencias en CSS ya eran un desastre donde nos veíamos obligados a usar hacks dependiendo del navegador en javascript, nos encontramos el mismo problema.

// CSS
#myElement {
   filter: alpha(opacity=50);  // IE
   opacity: 0.5;  // FF
}  

// IE
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";  

// FF
var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";

A ver si alguien puede decirme, que hay de diferente entre estas imagenes:

Imagen A

Imagen B

Imagen C

Imagen D

Es dificil, ¿verdad? Es normal que sea complicado ya que la gente de Firebug ha conseguido algo realmente sorprendente. Si nos fijamos bien, la imagen A es Firebug 1.2 desde Firefox 3 en MacOs, las demás son Firebug Lite 1.2 sobre Internet Explorer 7 (B), Opera (C), Safari (D).

El resultado es soprendente y es que esta nueva versión de Firebug Lite ha revolucionado el concepto de debug de aplicaciones web. Da igual en que navegador estes desarrollando o teniendo problemas, con Firebug Lite creerás que estás en Firefox, con la confianza y seguridad que eso conlleva.

Recordemos como instalarlo en nuestra aplicación:

• Añadimos entre nuestros tags <head></head> el siguiente código.

    <script type='text/javascript'
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

o podemos tener un acceso directo en nuestro navegador para poder añadir la funcionalidad a cualquier página.

Firebug Lite 1.2

Gracias a edusanver descubro Web Development Helper es un plugin para Internet Explorer que nos permite, entre otras cosas, monitorizar las peticiones Ajax como si de Firebug en Firefox se tratara.

Características

Entre las características más interesantes de este plugin se encuetran:

• Inspector DOM de todos los elementos.
• Capturas de imagenes de la página en la que estás.
• Log de las peticiones HTTP (o HTTPS) solicitadas por el navegador o peticiones Ajax.
• Ver las peticiones y respuestas en detalle.
• Habilidad de filtrar por tipos de URL’s en los logs.
• Traza de errores en detalle de las peticiones Javascript.
• Consola con posibilidad de interacción Javascript usando (window.debugService).

Requerimientos

• Internet Explorer 6 (o superior)
• .NET Framework 2.0 (o superior)

Descargar

Descargar

Edusanver, nos deleita con una noticia sobre IETester, una aplicación que nos permite integrar dentro de una misma aplicación los diferentes motores de renderizado de páginas web de las diferentes versiones de Internet Explorer, IE8 beta 1, IE7, IE5 y IE5.5.

Requiere Windows XP o Vista, y se trata de una versión alpha así que puede dar algún que otro error. No he podido probarlo ya que no tengo un Windows a mano, agradecería impresiones y/o opiniones.  Creo que es una herramienta que tendremos que seguir muy aténtamente.