Diseñar para distintos navegadores

Que difícil que es pero no imposible.
El problema es entender los distintos estándares que utilizan cada navegador.
Hoy en día hay una gran variedad de navegadores y cada día van cambiando o actualizandose.
Por eso cada ves se hace mas difícil el diseño de nuestras páginas.



Yo acá voy a mostrar unas formas de diseño para distintos navegadores.

Aplicando unos cambios en nuestro CSS (Lenguaje de hojas de estilo en cascada (cascade style sheets) utilizadas para definir la presentación de un documento HTML o XML).
Acá un manual para entender un poco de CSS

También hay otras entradas donde pueden ver distintas formas de diseñar para distintos navegadores Acá, Acá, Acá, Acá y Acá.

Hacks CSS.

Para poder aplicar diferentes diseños en una misma hoja de estilo tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las entiendan uno de los dos navegadores.
Ejemplo:

Leer más ▽

Este es uno de los trucos CSS más interesantes que he visto en mucho tiempo, el truco nos permitirá mostrar un div u otro dependiendo del navegador que utilizemos o mejor dicho de si tuilizamos Internet Explorer o Mozilla y todo esto sin utilizar Javascript.

El truco está en una de las características de IE que es el no aceptar los comentarios formados por doble barra (//), por lo que cualquier cosa seguida por // lo entenderá como parte del código.
Ej:

// display: hidden;

Una buena combinación nos permitirá mostrar diferentes cosas dependiendo del navegador cómo en el siguiente ejemplo:

Ver ejemplo

Para probarlo es muy sencillo si te ha salido el cuadro rojo es porque estas utilizando un navegador que no es IE cómo Mozilla o Opera.

Y si te ha salido el cuadro verde es porque estas utilizando Internet Explorer.
Código Fuente:

Este la hoja de estilos necesarias para este pequeño truco (No necesita explicación)

#nonie, #iebased{
margin: auto;
margin-top: 20px;
width: 400px;
padding: 10px;
background-color: #f8e6e6;
border: 1px solid #d2a2a2;
//background-color: #dbecd3;
//border: 1px solid #b1d2a2;
}

#nonie{
//display: none;
}

#iebased{
display: none;
//display: visible;
}

... y estos los dos div que se obtendrían dependiendo del navegador:

<div id="nonie"> Tu no estas utilizando Internet Explorer. </div>
<div id="iebased"> Tu estas utilizando Internet Explorer. </div>

El hack definitvo

Imaginemos que no sólo nos basta con aplicar diferentes diseños para Internet Explorer 6 y Mozilla, y que necesitamos tambien aplicar uno diferente para Opera y Internet Explorer 7.

Por poner un caso práctico, queremos usar un margen izquierdo que tiene 5px en Firefox y en Opera y 6px para IE6 y 7px para IE7:

margin-left: 5px; /* Margen izquierdo para todos los navegadores */
.margin-left: 7px; /* Margen izquierdo de 7px para IE6 y IE7, los demas navegadores todavia seguiran manteniendo el margen de 5px inicial */
_margin-left: 6px; /* Sólo IE6 leerá y entendera este estilo y aplicará el valor */

Otra forma es con !important.

!important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la última:

#main {
width:600px;
width:800px;
}

Por lo tanto en este ejemplo el navegador asignará 800 píxeles.

La declaración !important puede ser usada para dar prioridad a diferentes parámetros:

#main {
width:600px !important;
width:800px;
}

Ahora en este ejemplo se aplicará un ancho de 600 píxeles.

Internet Explorer 6 y versiones anteriores ignoraba esta palabra clave (!important) mientras que IE7 si la soporta por lo que se puede utilizar para realizar pequeños hacks CSS.

O lo que es lo mismo para poder aplicar diferentes diseños en una misma hoja de estilo tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las entiendan uno de los dos navegadores.

Por lo tanto lo podemos utilizar de tal manera que distingamos entre distintas reglas dependiendo del navegador y sin necesidad de usar Javascript, es un hack muy básico pero sin duda ayudará a entender para que sirve la palabra clave "!important":

#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;
width:800px;
}

En este ejemplo aplica un ancho dinámico (auto) a todos aquellos navegadores que soportan "!important" mientras que aplica un ancho de 800 píxeles a aquellos que no lo soportan por ejemplo IE6.

Este pequeño truco no es realmente del todo útil pero sin duda te ayudará a comprender el significado de esta palabra clave CSS.

Pero no hay que olvidar que !important es muy potente porque se antepone al resto de reglas por lo que hay que usarla con cuidado como por ejemplo cuando queremos que una definición no sea sustituida por ninguna otra ó para restablecer el valor de una propiedad que no nos acordamos donde le asignabamos un valor que ahora no queremos (sale algo en color rojo y no nos acordamos pues color: green !important; y listo).