¿Has diseñado alguna página web y aplicado hojas de estilos?

¿Has querido aplicar estilos diferentes para cada explorador en la misma hoja de estilos?

¿Has querido aplicar un estilo para todos los exploradores pero en cada uno se hace diferente?

¡Yo sí!

Ahora que ando metiéndome en el desarrollo web en el trabajo, me puse a aplicar hojas de estilo para los diversos sitios que hemos realizado, y algunos si funcionan muy bien en todos los exploradores, pero en algunos otros casos no. Seguramente a ti te ha llegado a pasar.

Cuando me dí cuenta de que no funcionaba en todos los browsers que existían, pensé ¡Ojala se pudieran poner condiciones al CSS!

Y me puse a buscar como incluir condiciones a mis CSS y ¡Voila!

Encontré una página que te da las herramientas para poder incluir condiciones de browsers en los CSS, es decir, ponerle algo como: Si es IE, has esto! Si es FF, has esto! Si es Safari, has esto!

La herramienta se llama:

Conditional CSS

Funciona de una manera muy simple:

1.- Entras a la página http://www.conditional-css.com/

2.- En la parte derecha de la página viene “el compiler”.

3.- Seleccionamos el sistema en el cuál desarrollamos, en este caso C#.

4.- Hay 2 métodos para usarlo, por ASHX y CGI. En este caso seleccionamos ASHX que solamente se agrega al sitio como cualquier otro CSS.

5.- Dejamos en blanco o llenamos los campos File 1, CSS Author, Copyright.

6.- Damos clic en Go! para descargar el archivo.

7.- Agregamos la referencia del archivo que acabamos de bajar, a nuestra página aspx como si fuera cualquier CSS.

8.- Lo usamos!

Para usarlo, solamente creamos y agregamos nuestros css que queramos y aquí viene lo bueno, a los estilos que queramos agregar las condiciones de browser lo hacemos de la siguiente manera:

Supongamos que tenemos:

.Data

{

text-align:left;

}

.Detail

{

text-align:right;

}

Y queremos que el .Data y el .Detail se alineen a la izquierda si es IE, y que se alineen a la derecha si es Safari. Lo modificamos así:

.Data

{

[if IE]text-align:left;

[if WebKit]text-align:right;

}

.Detail

{

[if IE]text-align:left;

[if WebKit]text-align:right;

}

¡Y listo!

¿Cómo vieron? ¿Fácil, no?