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:
La Guía de Referencia CSS 2, con ¿todas? (las más importantes) propiedades aplicables por CSS. (Ambos, manuales de Ramm)
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:
Lo primero, es definir la regla CSS general, que se aplicará a cualquier navegador.
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.
<!-- 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.
Muy buen tip, rizome! Sólo para que quede registrado: Niños, sólo usen hacks como último recurso, los hacks son malos y sólo debes usarse cuando no es posible obtener el resultado deseado de otra manera. Por:The Fricky!
Se te olvidó aquello que me contaste del reset css... Por:Juanlu_001
The Fricky! :
Muy buen tip, rizome! Sólo para que quede registrado: Niños, sólo usen hacks como último recurso, los hacks son malos y sólo debes usarse cuando no es posible obtener el resultado deseado de otra manera.
muy bien por el tip!
pero nunca olviden que un buen diseño no usa hacks y por mas dificil que parezca a veces no hay que usarlos porque estamos comprometiendo la compatibilidad de nuestro sitio, piensen en todos los sitios que tenian hacks para IE6 que ahora no sirven en IE7 y cuando lo reparen viene el IE8 para aguar a fiesta,no hay nada mejor que usar un diseño robusto en CSS que SI puede funcionar en todos los navegadores Por:siddharta
Las WEBs no se ven igual en FF que en IE. Es un hecho.
Cuando se alcanza cierto nivel de complejidad, se hace imposible conseguir una igualdad plena entre uno y otro navegador, con lo que se hacen necesarios los trucos.
Efectivamente, como cualquier truco, cuanto menos, mejor. Por:El Oso Amoroso
Conseguir que tu WEB se vea por igual en cualquier navegador, es muchas veces una ardua tarea. Conseguir 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 "diferecias 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 coinciden).
Que ciertas reglas de CSS, no son soportadas por algunos navegadores (IE).
En este tip trataremos el primero de los puntos. En dos tip sucesivos, los dos siguientes:
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 una <table>)
Escribir código correctamente, es muy importante. Tanto código CSS, como código xHTML. Y sobre todo, este último, pues no podemos olvidar que el 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, pues no es el motivo de este tip, es una "hoja de ruta" para que el navegador, entienda qué es lo que va a recibir, y cómo deberá procesarlo. De esta manera, la mísma página, con distintos doctype, o peor aún, sin él, hará que se vea de distinta manera incluso en el mismo navegador. Por ello, es necesario elegir adecuadamente un doctype, y seguirlo adecuadamente.
¿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ándard (W3C).
Si es la primer vez que lees este palabro: "doctype", vas a tener que revisar antes algún que otro manual. Propongo:
¿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 con la "interpretación" 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)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Si escribes xHTML limpio, imagino que ya estarás usando xHTML 1.0 transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
intenta pasar a usar XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Verás que es más exigente, y que algunas etiquetas y atributos no se usan, pero es el precio del progreso.
Si eres uno de los "machos" y "obsesos" de la validación, intenta validar con: xHTML 1.1 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Verás que es aún mucho más exigente, y que requiere algún que otro conocimiento, pero si lo consigues (se puede), estarás produciendo páginas WEB altamente rigurosas con los estándares, mucho más compatibles, y plenamente accesibles para los medios que están por llegar.
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)
¿esto es todo? Claro que no. Quedan los puntos fuertes:
VALIDAR LA WEB:
Se trata de verificar que el código (x)HTML de tu WEB es coerente 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ándard 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. Por:El Oso Amoroso
en mi experiencia evito calentarme la cabeza
uso comentarios condicionales y una libreria de hacks para IE, por tanto tengo 2 ojas de estilo extras 1 para IE7 (que resuelve la mayoria de los problemas) y una extra para IE6
1ª cosa: El post anterior, es la primera parte de la serie. No debería de estar aquí. Ya lo he sacado a un hilo a-parte. Si podéis borrar esta errata...
2ª cosa: Este tip, es parte de otros tres, así que quisiera que los tres estuvieran linkados entre sí, pero hasta que no han estado publicados, no he podido tener las URLs de cada uno. Para ello, necesito que algún MOD edite las dos primeras líneas, para que quede así:
rizome :
(este tip, es parte de: "Cómo ver igual tu página en todos los navegadores con CSS 1ª parte") (este tip se complementa con "Resetear el CSS") ______________________________________ Disclaimer: Como bien dice The Fricky!, los "trucos" de este tip son un último recurso. Antes, hay que haberse esforzado en conseguir una homogeneidad aceptablemente visible en todos los navegadores (lee los dos tips anteriores: [1] y [2]). Sólo entonces, cuando no nos quedan más cartuchos, se puede abordar el problema desde el lado de los "trucos." ______________________________________
3ª cosa: El título de este hilo, para no confundir con los otros dos de la misma serie, debería ser:
Ver igual tu WEB en cualquier navegador con CSS. Hacks-CSS
O, cuanto menos, incluir las dos palabras: "Hack CSS".
Gracias. Por:El Oso Amoroso
A mi me gusta mas otro hack, que utilizo habitualmente.
#elemento {
margin:10px; /* Todos los navegadores */
margin:15px !ie7; /* todos los Internet Explorer, incluido el 7 */
_margin:20px; /*IE6 o inferior*/
}
COMO PUEDO VALIDAR CCS EN FLASH DE MI PAGINA Por:MILTONFx-fire-blog
El flash usa CSS?? Por:El Oso Amoroso
rizome :
El flash usa CSS??
De hecho, sí. Es posible usar CSS para estilizar toda una aplicación de Flex o ciertas cosas de los textos en Flash. Aunque el comentario del pobre de arriba seguro no tiene nada que ver con eso. Por:Freddie
Saludos RIZOME
Antes de todo me permito presentarme, soy de Caracas Venezuela y tengo una Web que funciona como Televisora Digital llamada Coolturama TV. En ella tengo diversos programas (videos en wmv) y se visualizan como listas de reproduccion (wpl).
Mi gran problema (y ojala alguien de ustedes me pueda ayudar) es que las listas no las reconoce las computadoras MAC me arroja que existe un objeto (MIME) que no reconoce. Mi unico deseo es que mi Web pueda ser visualizada con la mayoria de los exploradores y que los usuarios IBM y MAC tambien puedan visualizarla.
Algunos me han dicho que convierta todos mis videos a FLASH que es menos problematico para los usuarios de MAC. Es por ello que me inscribi en este importante FORO.
Igualmente me pongo a la orden de todos ustedes para cualquier apoyo y/o ayuda.
Atentamte, quedo en espera de algun comentario o sugerencia
Edgar Aguilera Por:Coolturama
Hola Coolturama Lamento decirte, que las listas wpl, poco tienen que ver con este hilo.
Te aconsejo te leas este hilo, y luego expongas tu consulta en otra sala. (yo creo, que en General, iría bien.)
General Lo que no encuadre en otras categorías, programación, herramientas, lenguajes, sistemas operativos, etc.
Bienvenido. Por:El Oso Amoroso
Muy bueno rizome!!
para los que no tenemos ni idea nos has abierto una pequeña luz entre tanta oscuridad
a mi me ha venido como anillo al dedo
Habitualmente se conoce como "CSS-hack" a el "truco" que hace que una línea de CSS sea entendida sólo (o al reves: no leída) por un navegador, o gama de navegadores. De esa manera, una vez que ya no se puede hacer nada más para que se vea igual una página (porque se han agotado todos los pasos anteriores), se puede hacer uso de estos "CSS-hack", para corregir el defecto de visualización en el peor navegador.
"hack", habitualmente tiene connotaciones negativas -> hacker. (aunque alejadas del significado primigenio del palabro) Esto no tiene nada que ver con ello, tal y como digo. Por:El Oso Amoroso
Bueno debo decir que yo lidiaba antes con esto y para mi era como un infierno ...pero creo que ya son cosas del pasado actualmente se estan haciedno librerias con cada una de estas cosas resuletas como "seudo-frameworks" para css un ejemplo de ello es [url="http://code.google.com/p/blueprintcss/"]blueprintcss[/url] donde ellos se encargan de problemas de compatibilidad entre navegadores y el uso es muy sencillo...es muy interesante este tuto, pero en laactualidad tambien se trata de adoptar herramientas que logren aumentar la productividad sin bajar la calidad y no d elaborar todo artesanalmente asi ya uno pueda hacerlo! Por:vanvanero-blog
Por favor postealo en el foro. De esa forma podemos aportar todos y si alguien se cruza con lo que estas buscando tu ahora, también podrá salir de la duda Por:Coyr
Pienso que la idea es trabajar las propiedades que funcionan para todos. Hay formas seguras de construir sitios. Siempre existen casos especiales y la verdad no he podido eliminar los condicionales de los sitios en los que he trabajado. Aquí hay otra serie de consejos para construir sitios cross browser. http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/ Por:Coyr
de que se trata cuando Freddie dice que es mejor un diseño "robusto" en CSS Por:adn
buenos dias a todos, excelente los consejos que se dan aqui, soy nuevo en este foro, algunos tips me ayudaron bastante, solo tengo una duda, queria ver si ustedes me podian ayudar, tengo una pagina, en la cual tengo insertada una tabla, de 3*2, en el nivel superior, el encabezado, en el inferior el píe, y en el nivel intermedio, dividido en dos, el izquierdo un menu, y el derecho donde se despliegan las informaciones principales, ahora bien, en el nivel intermedio, tengo problemas, se descuadra cuando lo veo en IE6, el medio-derecho es un iframe, y este se ve mas pequeño, lo que hace q la informacion se corte, como puedo hacer para que se vea completo? en firefox y opera, se ve todo perfectamente pero en el IE6 no Por:choromo
no es necesario aplicar hacks. Hace bastante tiempo que trabajo con css y javascript y jamás los he usado.
Solo es cuestión de saber encontrar el doc type, y las mañas del mismo.
Por ejemplo:
jamas usar margen absoluto mezclado con padding. En internet explorer 6 por lo general se rompe. Si se necesita aplicar las dos propiedades, entonces utilizar 2 divs:
de esta manera nos ahorramos de utilizar hacks respecto a los padings. Asi logramos codigo más prolijo y profesional. En lo personal re comiendo NO USAR NUNCA HACKS. Igual queda en cada uno la forma de trabajo.
Muchas gracias. Por:Roy-blog
Roy Usar dos <div>, uno para el "padding", y otro para el "margin", creo que es un sintoma de contagio por "dividitis" Intenta no arreglar los problemas de renderización y maquetado, con elementos innecesarios. Por:El Oso Amoroso
, yo siempre tengo problemas con la legibilidad en IE... Gracias
...sorry