Conseguir que tu WEB se vea por igual en cualquier navegador, es muchas veces una ardua tarea.
Hacer que lo consigas, es el objetivo de esta serie de tres tips de CSS.
Yo veo tres problemas principales, que son los causantes de esas "diferencias de visualización" que observamos cuando vemos nuestra WEB con distintos navegadores:
- Que no escribimos "código limpio", es decir, que somos unos "chapuzas", que no usamos un DOCTYPE, o no lo hacemos correctamente.
- Que los navegadores tienen como "predefinidas" algunas maneras de ver los diferentes elementos del xHTML (y esas maneras, no suelen coincidir unas con otras).
- Que ciertas reglas de CSS, no son soportadas por algunos navegadores (IE).
En dos tip sucesivos, los dos siguientes:
- Resetear el CSS
- Hacks de CSS (para IE) (y Opera).
Escribir código "limpio":
En numerosas ocasiones, los problemas se deben a que no escribimos el código de manera adecuada. No cerramos elementos, los cerramos en distinto orden a como los abrimos, o escribimos mal la sintaxis de los mismos.
En ocasiones, también se debe a que usamos, para ciertos fines, elementos que no se deberían usar para ellos (lo que ocurre muchas veces que se usa un tag <table>)
Es muy importante escribir correctamente tanto el código CSS como el xHTML. Y sobre todo, este último, pues no podemos olvidar que xHTML, es la base de la WEB, y el esqueleto sobre el que se aplicará el CSS.
Para que el código xHTML sea adecuado y rígido, existe el DOCTYPE:
El DOCTYPE:
Sin extenderme mucho, es una declaración para hacer que el navegador, entienda qué es lo que va a recibir, y cómo deberá procesarlo.De esta manera, la misma página, con distintos doctype, o peor aún, sin él, se verá de distinta manera, incluso en el mismo navegador.
Por ello, es necesario elegir adecuadamente un doctype, y seguirlo.
¿Las posibilidades? Unas cuantas, pero mi primer consejo es que se usen Doctype para xHTML.
El segundo: que se elija "xHTML STRICT".
De esta manera, le advertiremos al navegador de que va a recibir código xHTML estándar (W3C).
Si es la primer vez que lees este palabro: "doctype", vas a tener que revisar antes algún que otro manual.
Propongo:
- ¿Por qué usar un doctype? (en castellano)
- ¿Qué doctypes existen? (in english)
- Resumen rápido (de la es.wikipedia.org).
¿Qué pasa si no ponemos doctype?
Pues que tenemos el "desastre" casi garantizado.
El navegador entrará en "QuircksMmode", y hará su "interpretación particular" de nuestra WEB, de manera que muy raramente coincidirá el resultado de los demás navegadores.
¿Cómo declaro el DOCTYPE?
Añadiendo una sencilla primera línea a nuestra página WEB:
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Por ejemplo, si usamos xHTML 1.0 Strict, como recomiendo.
¿Qué doctype elijo?
Pues de la lista que puedes encontrar en los links que cité arriba, el que se adapte a tus necesidades.
Pero en principio:
- Si no escribes código xHTML limpio, mejor intenta buscar algún manual.
Si ya sabes HTML, será muy fácil acostumbrarte a la "nueva manera" de trabajar. (mientras, puedes usar HTML4.0 Transitional)
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Si eres uno de los "machos" y "obsesos" de la validación, intenta validar con: xHTML 1.1 Strict
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Para otro tipo de documentos, hay otros doctypes (también listados en los links que puse), como los que implementan MathML, o SVG (o la combinación entre ellos y los primeros)
Y ahora, ¿Cómo comprobar si está todo bien?
VALIDAR LA WEB:
Se trata de verificar que el código (x)HTML de tu WEB es coherente con su doctype.¿Cómo hacerlo? Pues mediante el validador de la W3C.
Con esta herramienta, podrás determinar si tu página pasa el estándar declarado por el doctype, y de esta manera, asegurar su fidelidad a las normas que tu doctype fijó.
Por ejemplo, el resultado de la validación del xHTML de cristalab, se puede ver aquí.
VALIDAR EL CSS:
Se trata de verificar que el CSS que hemos escrito, es igualmente adecuado y sin errores.Esto debemos hacerlo para asegurarnos la compatibilidad entre navegadores.
¿Cómo? Pues la W3C también nos ofrece su Validador de CSS, que funciona de manera similar al de (x)HTML
Por ejemplo, el resultado de la validación del CSS de cristalab, se puede ver aquí.
Por ahora, está bien.
Puedes pasar al siguiente tip:
RESETEAR EL CSS.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por talcual el 11 de Julio de 2008
Por El Oso Amoroso el 11 de Julio de 2008
no es merecedor de TIP?
Por Zah el 11 de Julio de 2008
Ésta es la url:
http://www.cristalab.com/tips/57338/la-importancia-de-doctype-y-de-validar-xhtml-y-css
Por Tony el 16 de Marzo de 2009
Quería dejar este comentario de Firefox (ya comuniqué acerca del problema con el doctype) pero también saber si alguien más tiene el mismo problema que yo, ya que tuve que eliminar el doctype de algunas páginas que sólo tienen un swf (pero no me gusta para nada eliminarlo).
Saludos y Gracias!
Por asdfas el 20 de Noviembre de 2009
Por Adrian el 28 de Abril de 2010
Queria simplemente avisarles que poseen errores en las validaciones tanto del xHTML como del CSS...
Espero haber colaborado...Saludos!
Por Alegantes el 28 de Julio de 2010
Por max el 01 de Julio de 2012
Por hermandinga el 05 de Noviembre de 2012
Por Andesken el 05 de Septiembre de 2013
Saludos.