Hacks para CSS y Cómo detectar el navegador

Más y más diseñadores Web han dejado el uso de las tablas, para controlar el diseño de su sitio web con CSS. Pues, con las muchas ventajas que esto ofrece como el menor tiempo de transferencia directa, la mejor accesibilidad y un manejo más fácil del sitio ¿Por qué no?

Sin embargo, el CSS también tiene sus dificultades.

El problema con el CSS

El problema principal con el uso de CSS ha sido históricamente la carencia de soporte del navegador. Esto es muy importante, la accesibilidad se ha convertido en todo un tema de boga. Hacer los diseños para Internet Explorer 6.0 y para Firefox es lo más importante, pero no podemos descuidar la forma en que nos ven desde otros navegadores más antiguos, pues hay muchos que no soportan todos los estilos.

Como detectar el tipo de navegador con un CSS Hack

La manera de hacerlo es creando una regla para determinar el tipo de navegador y otra regla para determinar los otros, eliminando la primera...

Teniendo en cuenta que si tienes dos reglas CSS con selectores idénticos, siempre la segunda regla tendrá prioridad.

Por ejemplo, si deseas poner un espacio de 25 píxeles entre el header y el contenido, en Internet Explorer se vería bien. Pero en otros navegadores como firefox, Opera y Safari, el espacio se vería enorme. Para conseguir el mismo espacio deberíamos colocar 10 píxeles. Entonces, para obtener un buen diseño para todos los navegadores, deberíamos colocar:

El primer comando debe ser requerido por IE y el segundo por el resto de navegadores. ¿Cómo funciona esto? Bien, porque todos los navegadores entienden ambas reglas de CSS y por tanto siempre usarán la segunda.

Ahora bien, insertando un hack CSS podemos realizar nuestra detección del navegador y ocultar la segunda regla sólo para IE. Es decir, Internet Explorer no sabrá que la segunda regla existe y por lo tanto no la utilizará. ¿Cómo hacemos esto?

Detección del navegador para Internet Explorer

Para enviar diversas reglas CSS a IE, podemos utilizar un comando de selector hijo que IE no entienda. El comando selector hijo implica dos elementos, uno de los cuales es el hijo del otro. Así pues, html>body refiere al hijo, body dentro del padre, HTML.

Por ejemplo, usando el elemento margen, nuestro css sería:

IE no puede entender la segunda regla del CSS (el comando html>body) por lo que sólo utilizará la primera regla. El resto de los navegadores utilizarán la segunda.

Detección del browser para el Internet Explorer 5

Puede parecernos extraño al principio enviar distintas reglas CSS a diversas versiones de un navegador, pero en el caso de IE 5 es necesario. Al especificar el ancho (widht) de un elemento con CSS, el padding y los bordes (border) no se incluyen en este valor. IE 5, sin embargo, los incorpora.

La regla siguiente CSS produce un ancho de 10em para todos los navegadores, excepto IE5, que sólo le da un ancho de 5em (pues incorpora 1em de borde así como 4em de padding, por ambos lados):

¿La solución al problema? El box model hack, inventado por Tantek Çelik que se ha hecho famoso en el mundo del CSS como resultado de este hack. Para realizar la detección del navegador y enviar una regla diversa a IE5 usted debe utilizar:

Como logró esto! Sería conjeturar, lo importante es que funciona perfectamente para Internet Explorer 5.0. De esta manera, IE5 usará el primer valor (width: 15em), 5em por los dos paddings y dos bordes (uno para el izquierdo y para el derecho). Lo que daría en última instancia una anchura de 10em al elemento width, en IE5.

A su vez, el valor de 15em será anulado por el segundo valor de 10em para todos los navegadores excepto IE5, que por la razón que sea, no puede entender que esos garabatos son código CSS. ¡No parece bonito pero realmente funciona!.

Detección del browser para el Internet Explorer en Mac

Simplemente, IE en Mac hace cosas extrañas con el CSS. El navegador ha llegado a ser algo obsoleto mientras Microsoft no lance su nueva versión. Por esto, muchos diseñadores Web escriben su CSS para que funcione con IE/Mac, aunque puede no ofrecer el mismo nivel de la funcionalidad o de avanzado diseño.

Con tal que los usuarios del IE y Mac puedan tener acceso a todas las áreas del sitio esta sería una manera conveniente de hacerlo.

Podemos ocultar un comando usando el IE/Mac CSS hack es simple, e implica envolver un sistema de tantas reglas CSS como le apetezca:

El IE en Mac no hará caso de todos estos comandos. Este hack CSS puede ser realmente útil si hay cierta área del sitio que no funciona correctamente. Si esa sección no es necesaria para el sitio, usted puede ocultarla absolutamente:

La primera regla CSS oculta el div identificado como noiemac (i.e. <div id="noiemac">). La segunda regla CSS, que el IE en Mac no puede ver, exhibe esta sección.

Detección del browser para Netscape 4

Elaborar un diseño CSS en este navegador (que tiene una cuota de mercado por debajo del 1%) puede ser desafiante. Es práctica común de hoy en día, ocultar el archivo del CSS a este browser. Esto se puede lograr usando el directorio @import para llamar encima al documento CSS:

<style type="text/css">@import url(cssfile.css);</style>

Netscape 4 exhibirá una versión sin estilos del sitio pues no puede entender el directorio del @import.

Conclusión

Actualmente, los navegadores modernos tienen muy buen soporte para el CSS – por lo menos lo suficiente, como para utilizar CSS en la disposición y presentación de la página Web. A veces sin embargo, ciertos elementos de la página aparecerán de manera distinta según el tipo navegador y su versión. ¡No se preocupe demasiado si usted no conoce la razón! Pues, mientras usted utilice estos hacks, sus páginas Web tendrán grandes diseños en todos los navegadores.

Fuente: CSS hacks & browser detection