Muchos de ustedes habrán participado en las campañas que se organizaron en la red en los últimos dos años, “Dejad morir IE6″ “Yo ya no doy soporte a ie6 actualizate” y un sin fin de slogans para estas campañas, incluso hubo una a favor “Save IE6” (como si se tratara de un animal en extinción, vaya que así es.)

No estoy a favor ni en contra de dejar morir a IE6. (Lo dejo en claro).

Pero aquí van unas razones por las cuales seguir soportando a este viejo y moribundo navegador:

• Un muy buen porcentaje de usuarios que visitan sitios web populares sigue usando IE6
• Las empresas que piden nuestros servicios web (maquetación, diseño, desarrollo) apuntan a un mercado que no es de “expertos” (léase tú, yo)
• El segundo punto de arriba significa que la masa popular de usuarios, continúa usando IE6
• Como maquetadores web no podemos darnos el lujo de decir “yo cumplí, que se las arreglen los usuarios” ó ¿tú quisieras comprar un auto que viene sin llantas? y en la agencia te dijeran:”arregleselas usted”
• NO TODOS SOMOS GEEKS y NO TODOS CONOCEMOS FIREFOX.
• A las empresas que les trabajamos les importa llegar a un gran numero de usuarios para vender sus productos mediante la web y si su sitio no funciona para IE6 estaríamos haciéndoles perder una gran cuota de usuarios.

Muchas personas mantienen IE6 no porque quieran, se hayan acostumbrado o simplemente se resistan al cambio, la realidad a veces va más allá.

En la mayoría de los países tercermundistas (léase donde yo vivo), muchos pero muchos tienen copias piratas, lo cual significa que sus serial numbers son inválidos y no permiten realizar actualizaciones hacia IE7 por lo menos…

Este es tan solo mi punto de vista.
¿Tú qué piensas?

PD: si escribo esta reflexión es porque ahora mismo estoy dándome un break, he pasado las ultimas 2 horas con hacks para IE6 para un diseño de un sitio web muy importante. (Si no, no me pagan).

Basándome en la triste realidad de que Internet Explorer 6 aún sigue vivo, no importa cuánto me esfuerce en ignorarlo, y que mantiene una cuota de mercado superior al 15% entre la comunidad “geek” ^{1, 2} he decidido crear una pequeña recopilación de los problemas más comunes que Internet Explorer presenta a la hora de crear una página HTML.

Esta no pretende ser una “lista definitiva” de todos los bugs en IE6 sino más bien es un mini resumen, ya que como todos sabemos Internet Explorer 6 contiene hasta la fecha 32.642.321 bugs reportados y todos los dias se siguen reportando más

1. Transparencia PNG

El problema: Internet Explorer 6 y anteriores, muestran en color gris las transparencias de los archivos PNG.
Solución: Hay varias soluciones para este problema, la primera de ellas es usar el filtro de Microsoft:

img
{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Otra opción es usar el iepngfix.htc aunque personalmente no me dio buenos resultados, funciona bastante bien para construcciones sencillas.

Una alternativa con buenos resultados es el script DD_belatedPNG que teóricamente nos permite usar PNGs en backgrounds y en eventos hover.

2. Double Margin Bug

Problema: El margen izquierdo/derecho de un elemento flotante es duplicado.
Solución: Agregar display:inline a todos los elementos flotantes. Indispensable que esto se haga costumbre!

selector
{
  float:left;
  margin-left:10px;

  /* fix the double margin error */
  display:inline;
}

3. Bicubic Image Scaling

Problema: En Internet Explorer 7 las imágenes que intentemos achicar se verán pixeladas. Esto es debido a que la propiedad de escalado por el método bicubic está deshabilitada por defecto.
Solución: Debemos activarla nosotros desde nuestro CSS indicando que los elementos recibirán ese estilo:

img
{
  -ms-interpolation-mode: bicubic;
}

4. Image Border in links

Esto no es un bug, pero hace doler la cabeza como si lo fuera. El problema es que las imagenes que están dentro de un enlace, se muestran con un borde azul feo. Con esto se lo quitamos:

a img
{
  border: none;
}

5. Empty element height bug

Problema: Elementos vacíos que tienen hasLayout obtienen altura mágicamente.
Solución: Agregar overflow:hidden al elemento.

selector
{
  background: blue;
  width: 100%;
  overflow: hidden;
  height: 0; /* For IE7 */
}

6. Sub-Hover Bug

Problema: No se aplican estilos a los elementos hijos cuando se los llama desde un :hover del padre.
Solución: Agregar zoom:1 al :hover

span
{
  display: none;
}

a:hover span
{
  display: inline;
  zoom:1;
}

7. Min-Height for IE

Problema: No se reconoce la propiedad min-height.
Solución: Aplicar height sólo a IE6.

selector
{
  min-height:500px;
  _height:500px;
}

Algunos consejos

• Siempre usa un css reset
• Todos los elementos flotantes deben tener display:inline y overflow:hidden
• Cuando veas que algo desaparece mágicamente o no se posiciona como corresponde usa zoom:1 esto soluciona muchas cosas
• La cuchara mágica siempre es un buen lugar para probar tu diseño

Continuará…

Si te quedaste con hambre, puedes consultar esta lista de bugs para Internet Explorer.

Personalmente sigo dando un mínimo soporte a IE, de tal manera en que el estilo del sitio se muestre bien y se pueda leer correctamente. Sin embargo efectos como border-radius, opacity, text-shadows, etc, no se ven bien en Internet Explorer pero eso no me quita el sueño.

PD: Pueden dejar un comentario acerca de lo que piensan sobre IE6. Las malas palabras son bienvenidas

Algo muy útil y muy usado en el diseño web es usar menús despegables o más conocidos como “dropdowns”, que si bien su funcionalidad es básica su construcción puede tornarse un poco difícil. Por eso les traigo una opción que encontré en http://www.lwis.net/ y que me pareció lejos el mejor de todos los que vi.

1. Instalando

Vale aclarar que el dropdown es compatible con todos los navegadores modernos, sin embargo debido a que IE6 no hace uso del CSS 2.1 deberemos usar un pequeño script (en mootools o jquery) para forzar la compatibilidad.

La magia de todo la hace el archivo dropdown.css que podremos descargar mas abajo.

  <link rel="stylesheet" type="text/css" media="all" href="dropdown.css" />

  <!--[if lt IE 7]>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.2/mootools-yui-compressed.js"></script>

  <script type="text/javascript" src="mootools.dropdown.js"></script>
  <![endif]-->

Usar el jquery.dropdown.js en caso de tener instalado jQuery en nuestra página, y no olvidarse de borrar el script de mootools en Google ya que ambos frameworks no funcionan juntos.

2. Creando el Dropdown

Para crear el menú maquetamos una lista con la class.dropdown:

<ul class="dropdown">
  <li><a href="#">Home</a></li>
  <li><a href="#">Simple Dropdown</a>
    <ul>
      <li><a href="#">Hello World</a></li>
    </ul>
  </li>
</ul>

Luego podremos personalizar nuestro menú:

  <style>
    ul.menu li a
    {
      background:#00B0D8;
      padding:5px 10px;
      font-family:"Arial";
      text-decoration:none;
      color:#FFFFFF;
    }

    ul.menu li a:hover
    {
      background:#fff;
      color:#999999;
    }

  </style>

Eso fue todo! En el próximo artículo veremos como agregar efectos de aparición y fade a nuestro dropdown

3. Demo

¿Quieres una demostración? El menú “Categorías” de este blog es la mejor demostración que puedo presentarte.

Hace rato que estoy usando Windows 7 como sistema operativo principal, y debo decir que APESTA tanto o más que Windows Vista, pero dejando de lado eso, en esta oportunidad les traigo un efecto bastante atractivo inspirándome en la nueva “super barra de tareas” de Windows 7.

El efecto consiste en “una luz que sigue al mouse” mientras lo movemos sobre el botón, algo que no se puede apreciar en la siguiente imagen, pero que si lo podemos hacer con la demo.

6, 7, 8

3.0, 3.5

3

4

Creando la maqueta

La idea es la siguiente:

<span class="win7">
  <div></div>
  <a href="#">Button</a>
</span>

Pero para no ensuciar tanto el código HTML que tenemos que crear cada vez que queremos un botón, vamos a crear ese div por medio del javascript, de manera que nuestro código html real será el siguiente:

<span class="win7"><a href="#">Button</a></span>

CSS Code

.win7
{
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  font-size:12px;

  position:relative;
  float:left;
  height:29px;
  width:100%;
  background:url('../images/nav-bg.png') repeat-x top left;
}

.win7 div
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:29px;
  background:url('../images/active1.png') no-repeat center;
  z-index:0;
}

.win7 a
{
  line-height:29px;
  text-align:center;
  display:block;
  position:relative;
  padding:0 25px;
  z-index:2;
}

Ahora vamos a darle bordes redondeados:

span.win7
{
  width:auto;
  overflow:hidden;

  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;

  border:2px solid #deded2;
}

MooTools code

Iniciamos siempre despues de cargar el dom:

window.addEvent('domready', function() {

    if (Browser.Engine.trident4) {
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
    }

Ahora vamos a recorrer el DOM en busca de todos los enlaces con la clase “win7″, y a cada enlace le agregamos el “div” y le asignamos el evento “mousemove” ajustando la posición del background relativo al mouse:

    $$('.win7 a').each(function(el) {

      el.win7BG = new Element('div', {'styles':{'opacity':0}}).injectBefore(el);
      el.win7BG.set('morph', {'duration':300});

      el.addEvent('mousemove', function (ev) {
        el.win7BG.setStyle('background-position', - ((600/2) - (ev.event.layerX||ev.event.offsetX||0))+'px top');
      });

Lo siguiente es para agregarle el efecto “fade”, aunque no es el objetivo principal de este artículo, queda muy bonito:

      el.addEvent('mouseenter', function (ev) {
        el.win7BG.morph({'opacity': 1});
      });

      el.addEvent('mouseout', function (ev) {
        el.win7BG.morph({'opacity': 0});
      });

    }); // end each

}); // end domready

Lo instalamos en nuestra página, agregando el siguiente código en el HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

jQuery code

Hacemos lo mismo que en mootools, sólo que con código de jQuery:

$(document).ready(function(){

  if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie ) {
    // stupid jquery ie6 detection
      try { document.execCommand("BackgroundImageCache", false, true); }
      catch(err) {}
  }

  $('.win7 a').each(function() {
    var el = $(this);

    el.win7BG = $(document.createElement('div')).css({'opacity': 0});
    el.win7BG.insertBefore(el);

    el.mousemove(function(ev) {
      el.win7BG.css({'background-position' : -((600/2) - (ev.originalEvent.layerX||ev.originalEvent.offsetX||0))+'px top'});
    });

    el.hover(
      function() {
        el.win7BG.stop().animate({'opacity':1},300);
      },
      function() {
        el.win7BG.stop().animate({'opacity':0},300);
      }
    );

  });
});

Lo instalamos en el HEAD de nuestra página:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="js/win7.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all" />

(acomoda las rutas a tu conveniencia).

Creando los Botones y el Menu

Para crear un menu:

<ul class="win7">
  <li><a href="#">Home</a></li>
</ul>

Para crear un botón:

<span class="win7"><a href="#">Button</a></span>

He agregado más clases con diferentes colores que puedes ver en la demo, pero la técnica sigue siendo la misma.

Demo

Puedes ver la demo en mootools como la demo en jQuery.