Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible 🙁 .  Pero si por algún motivo es necesario, podemos emplear una forma bastante fácil y limpia mediante PHP (Ref. Andrew Martin).

Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuación (2) haremos uso del array $_SERVER y del campo donde se cargan las cabeceras con información del navegador del usuario «HTTP_USER_AGENT».

1. Código CSS base:

<link rel="stylesheet" href="base.css" type="text/css">

2. Código PHP:

$browser = $_SERVER['HTTP_USER_AGENT'];	
if (preg_match('/MSIE.8/i', $browser)) { echo ''; } 
elseif (preg_match('/MSIE.7/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.6/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.9/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.2/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3.5/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3/i', $browser)) { echo ''; }
elseif (preg_match('/Chrome/i', $browser)) { echo ''; }
elseif (preg_match('/Safari/i', $browser)) { echo ''; }
elseif (preg_match('/Opera/i', $browser)) { echo ''; }
else { echo ''; }

El código escribirá el link con la hoja de estilo correspondiente al navegador empleado por el usuario basándose en la comparación de cadenas.

Si lo que queremos es únicamente discernir la versión de MSIE, podemos también recurrir a los comentarios condicionales de Internet Explorer.

Para hacer las pruebas necesarias con los diferentes navegadores, podemos descargarlos o emularlos.

Internet Explorer en su versión 6 y anteriores no soporta la transparencia del formato PNG.
Para solucionar este problema existen varias técnicas:

  • A través del filtro Directx AlphaImageLoader.
  • Con Behaviors.
  • El conocido pngfix (con la ayuda de JavaScript).
  • Algunas implementaciones pngfix para frameworks de JavaScript, como jquery.pngFix.js

Todas ellas presentan pros y contras. Dependiendo del proyecto puede que venga mejor uno u otro, o que simplemente alguno no funcione por conflictos de JavaScript o misteriosas razones que solo las meigas de IE conocen. Así que la única solución es probar y probar… 🙁

A continuación voy a desarrollar la primera de ellas.

AlphaImageLoader

#logo  { 
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
		src='http://..../logo.png', 
		sizingMethod='crop'
	); 
}

El primero de los pasos es indicar que no hay ningún fondo background-image: none;, a continuación usamos filter y la llamada Directx de Microsoft para cargar imágenes que incorporan factor alfa. En el parámetro src va la ruta absoluta al fichero png.

Conflicto con los enlaces

Con lo dicho anteriormente el PNG es mostrado con transparencia y sin errores, pero los enlaces no realizan el comportamiento adecuado si se encuentran en el interior de un elemento que tenga aplicado el filtro AlphaImageLoader.

Para solucionar este último problema podemos recurrir al siguiente código CSS:

#logo a { 
	position: relative; 
	z-index: 1; 
}

Cuando se aplica un filtro el elemento tiene una posición estática y esto presenta problemas en los enlaces, por ello se fuerza por medio de CSS a que los enlaces dispongan de una posición relativa y con z-index en una capa inferior.

Solo para Internet Explorer

Otros navegadores modernos (Firefox, Opera, Safari, Chrome) soportan perfectamente el formato PNG y su grado de transparencia, por tanto sería bueno pensar en ofrecer esta técnica únicamente cuando el usuario se encuentra navegando con Internet Explorer. Para lograrlo podemos recurrir a los comentarios condicionales:

<!--[if lt IE 7]><link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" /><![endif]-->

Mediante este comentario condicional ubicado en el head podemos indicar que solo aquellos navegadores que sean inferiores al Internet Explorer 7 [if lt IE 7] se enlace el fichero de esitlo “ie6.css” que a su vez contiene los códigos comentados para esta técnica.

De esta forma:

  • No obligamos a que se interprete código propietario (no estándar) como el filtro AlphaImageLoader por parte de otro navegador que no sea IE6 o inferior.
  • El sitio Web será estándar y válido según el W3C – Validator.
  • Reducimos el código CSS innecesario para otros navegadores y con ello logramos una mejor optimización.

Son como su propio nombre indica comentarios interpretados únicamente por Internet Explorer e incrustados en el código HTML, generalmente en el apartado HEAD y realizan su función únicamente si la condicional se cumple atendiendo al navegador y su versión.

Este mecanismo fue «un invento» de Microsoft (Internet Explorer), que en númerosas ocasiones no han seguido los estándares y pautas marcadas por la W3C. Mediante los comentarios condicionales podremos crear estilos propios atendiendo a las diferentes versiones de este navegador.

Las condicionales llevan un operador: «!» (negación), «lt» (menor que), «lte» (menor o igual que), «gt» (mayor que), «gte» (mayor o igual que). Con los operadores y las diferentes versiones del navegador ya podemos definir estilos atendiendo a las diferencias de cada caso.

Ejemplos

<!--[if !IE]> Cualquier navegador pero NO (!) Internet Explorer <![endif]-->
<!--[if lt IE 6]> Solo versiones MENORES de la 6 <![endif]-->
<!--[if lte IE 6]> Solo versiones MENORES o IGUAL a la 6 <![endif]-->
<!--[if gt IE 5.5]> Solo versiones MAYORES a la 5.5  <![endif]-->
<!--[if gte IE 5.5]> Solo versiones MAYORES o IGUAL a la 5.5  <![endif]-->

Las CSS Expressions son usadas para establecer propiedades dinámicas. Fue un invento más de Microsoft para Internet Explorer.

Los problemas que veo en las «CSS Expressions» son:

  • No es un estándar web, con todo lo que ello implica…
  • Se diluye la abstracción: contenido > estilo > comportamiento.
  • A excepción de IE todos los navegadores tendrán que tragar estos bytes de más sin tener soporte para ello.
  • Y lo peor de todo, las «CSS Expressions» se procesan muchísimas veces, no solo cuando se carga el CSS sino también cuando realizamos múltiples tareas como por ejemplo desplazar el scrooll vertical. Esto genera una cantidad de proceso enorme para el navegador y una deficiencia en la optimización del sitio web.

En la mayoría de los casos se usan las «CSS Expressions» para solucionar problemas de incompatibilidad (cross-browsing) o carencia/deficiencia de soporte para los estándares web por parte del software de Microsoft. Osea que al final para solucionar un problema de este navegador ponemos un parche que afecta al resto de navegadores e incluso le puede sentar indigesto al propio Internet Explorer.

En fin, el parche puede infectar más la herida 🙁

Reconozco haber pasado cientos de horas intentando entender a nuestro inseparable compañero Internet Explorer, he pataleado y hasta desearía hacerle budu. Pero hay que reconocer que no todo lo malo es tan malo, y ahora que ha salido el nuevo Firefox versión 3.5 es para dar cuenta de ello.

Continue reading «Añadir tab en Firefox 3.5»