Comunidad de diseño web y desarrollo en internet

Cómo ver igual tu página en todos los navegadores con CSS

Declaración de intenciones:

En este tip, explicaré cómo conseguir que, mediante CSS, tus páginas WEB se vean igual, de la misma manera en todos los navegadores (importantes: Internet Explorer, FireFox, y Opera)

Tal y como está la estandarización de IE respecto a las normas de la W3C, se hace difícil conseguir que la misma web, sea vista de la misma manera en IE, que en los navegadores buenos (FireFox y Opera)

Como norma general, lo adecuado sería diseñar para FireFox (pues podemos presuponerle un seguimiento aceptablemente fiel de los estándares), y luego retocar los errores que se vean en Internet Explorer.
Opera (el segundo "gran navegador"), lo obvio, pues tiene menos volumen de mercado, y además también es aceptablemente fiel a los estándares, con lo que las últimas versiones de Opera, suelen ofrecer los mismos resultados de visualización que FireFox (lo que es todo un alivio). Aún así, incluyo más información a este respecto, y otros, al final del tip

REQUSITOS PREVIOS:

Es imprescindible, para el correcto seguimiento de este tip, un conocimiento adecuado y con soltura de CSS (en realidad, el conocimiento del CSS debe ser obligatorio para cualquiera que quiera diseñar para la WEB).
Si no sabes lo que es el CSS, o no lo manejas (bien), te recomiendo que antes de seguir, te revises los manuales de CSS que encontrarás en cristalab, en particular estos dos:

Para proceder como digo, lo imprescindible será que cuando diseñes, revises primeramente los cambios con Firefox, y después intentes "parchear" los resultados no pretendidos en IExplorer, para ello, podrás emplear lo que llamamos "hacks" de CSS.

Procedimiento:

  1. Lo primero, es definir la regla CSS general, que se aplicará a cualquier navegador.
  2. Lo segundo, es aplicar las excepciones (hacks), en el orden de "más general>más particular".
    Recordad, que impera la ley de cascada, con lo que según se van posponiendo una tras otra, se van sobreescribiendo las directivas preexistentes.
Así, por ejemplo, si tuviéramos problemas con el margen de un elemento con class="div", haríamos:

Código :

.div {margin-bottom:20px;   /* se verá en todos los navegadores */
      #margin-bottom:15px;  /* en todos los IE, se verá con 15px */
      //margin-bottom:15px; /* este hack, es equivalente al anterior: todos los IE */
      _margin-bottom:10px;  /* en todos los IE6, o inferior, se verá con 10px */
}
Que se lería: Para cualquier navegador, el margen es de 20px, pero s i usas IE, que sea de 15px, pero si usas un IE6, o inferior, que sea de 10px.



SI CON ESTO TE DAS POR SATISFECHO, AQUÍ TERMINA TU LECTURA.
Hasta aquí, bien.
Pero... ¿y si eres un fanático de la "validación"?
Pues entonces, verás que los "hacks", son entendidos como errores por el validador, con lo que no obtendrás el verde.
En ese caso, puedes usar lo que llamo "la tontería del IE"; es decir, en lugar de los "hacks", usar la "credulidad" del IE para leer elementos "inexistentes", como el " * ".
Veamos con el mismo ejemplo:

Código :

.div {margin-bottom:20px;}         /* se verá en todos los navegadores */
* html .div {margin-bottom:15px;}  /* Esta línea se la creen todos los IE6, o inferiores */
*+html .div {margin-bottom:15px;}  /* Esta línea sólo se la cree IE7 */
Como veréis, esto ya no son "hacks" (errores) de cara al validador, sino símplemente selectores que no existen (porque no puede haber nada ( * ), encima del "<html>")

Con esto, obtendréis el verde que esperabais.

Otras soluciones, podrían ser:

  • Un script de PHP, que te muestre una hoja de estilo según el navegador que visita la web.
  • Usar comentarios condicionales, para mostrar hojas CSS alternativas:
<!-- Esta hoja CSS, se mostrará sólo a Interenet Explorer //-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

<!-- Esta hoja CSS, se mostrará sólo a IE6 o versiones anteriores //-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->


EPILOGO

Has llegado hasta el final. Enhorabuena.
Si buscas "hacks" para Opera (más correctamente: líneas que sólo lea Opera), la cosa está más difícil, pues hay menos documentación, y Opera cambia mucho la interpretación (de sus bugs) del CSS de una versión a la siguiente.
Pero algo he encontrado:

Código :

head:first-child+body  .div {margin-bottom:20px;}  /* Esta línea pasa desapercibida en Opera6, e IE6, e inferiores a ambos */
html>body .div { mar\gin-bottom:20px; }            /* Esta línea pasa desapercibida en Opera5, e IE5, e inferiores a ambos */
Estas líneas, pasan desapercibidas en Opera 6, y 5, espectivamente, con lo que se podría definir en ellas, propiedades CSS que no se quiere sigan estos navegadores.

Código :

html:first-child .div { margin-bottom:15px; }      /* Esta línea sólo la entiende Opera9 */
Este "hack", sería el que se debería usar para corregir errores en el Opera 9 (último actualmente)

Si buscas muuuuuchos más hacks, puedes encontrar una buena lista aquí.
Si buscas reglas "@import", que sólo sean leídas por algunos navegadores, aquí una gran lista.

Si aún necesitas más documentación, San Google tiene muchísima. Con esta búsqueda, o añadiéndole el navegador en cuestión, tendrás una buena lista de sitios para consultar.

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate