Para los diseñadores web es muy importante saber optimizar el codigo de sus paginas y comprobar las compatibilidad con los navegadores, y por lo tanto sus usuarios. Estos son los pasos que deberiamos seguir:

1º Optimizar el Código

Si todavia no programas tus web con CSS es que estas algo desfasado. Para todos aquellos que si lo hacen, es importante mantener el codigo optimizado y con compatibilidad para todos los navegadores:

Para optimizar nuestro css os dejo los siguientes enlaces muy interesantes:

CSS OPTIMIZER - Optimiza nuestras hojas de estilo de forma AUTOMATICA y ONLINE

CSS SHORTAND - Listado de abreviaciones para los comandos CSS

GUIA DE COMANDOS - Otra Guia de comandos cortos para CSS

2º Ver nuestra web en diferentes navegadores

En ocasiones no siempre podemos tener todos los navegadores del mercado instalado en nuestro equipo, vease el caso en MAC con IE.

Para ello hemos encontrado una solución, en la siguiente web , no muestra como se ve nuestra web en los diferntes navegadores y sistemas operativos, incluso pudiendo escoger la resolución de pantalla, desactivando el javascript etc.

3º Hacer hojas CSS compatibles para los diferentes navegadores

En un mundo paralelo con tanta libertad como es Internet los usuarios utilizan diferentes navegadores, por desgracia no todos interpretan las hojas de estilo de la misma manera y somos los diseñadores web quien tenemos que hacer diferentes hojas de estilo:

Buscando una solución nos hemos encontrado con una manera fácil y rapida de solucionar el problema:

1. Realizar el diseño para Firefox

2. Comprobar los fallos que el diseño muestra en IE6. Identificar los selectores que presentan el problema y duplicarlos, anteponiendo a la copia el selector *html y aplicando los cambios requeridos, de la siguiente manera:

#MyDiv {margin: 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}

De ese modo, mientras Firefox leera el primer #MyDiv, IE6 sólo leerá el segundo.

3. Hacer lo mismo con IE7. Volver a duplicar los selectores en conflicto y añadir *:first-child+html a los duplicados:

#MyDiv {margin : 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}

/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;}

Así, IE7 sólo leerá el último selector.

Con esta técnica podemos diseñar hojas de estilo únicas para los tres navegadores, sin complicarnos con otras técnicas más dificiles para los que no somos expertos en la materia.

Otros enlaces:

HACK CSS - Aprende a unificar hojas de estilo para diferentes nagevadores con un sencillo Hack

4º Anlizadores y Validadores

Es imprescindible pasar las siguientes validaciones ya que permitiran llegar al maximo numero de usuarios y nos ayudaran en el posicionamiento en los navegadores.

VALIDADOR DE HOJAS DE ESTILO CSS

VALIDAR SUMARIO

COMPROBAR ENLACES

TEST DE ACCESIBILIDAD WEB