CSS adaptado al navegador con PHP

post - - 4 replies - share

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.

PNG transparente e IE, el m铆tico problema鈥

post - - 1 reply - share

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

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 鈥渋e6.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.

Comentarios condicionales exclusivos para Internet Explorer

post - - 1 reply - share

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]-->

No me gustan las “CSS Expressions”

post - - leave a reply - share

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 馃檨