(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 "Hacks para el CSS de IE")
Como ya dije en mi anterior tip, nuestro objetivo, es conseguir que nuestra WEB, se vea igual en todos los navegadores (o al menos, en los más importantes), pero muchas veces, el problema viene por la manera que tiene cada navegador de mostrar los elementos.
Por ejemplo, si sólo pones:
Código :
<p>contenido</p>Y lo renderizas con varios navegadores, verás que hay diferencias en el resultado entre algunos de ellos.
¿por qué?
Pues como digo, porque cada navegador define como cree conveniente los margenes que le pone al elemento <p>, su padding, su tamaño de fuente, posición relativa...
Esto no sólo le ocurre a los <p>, sino a casi todos los elementos que estamos acostumbrados a usar.
Y cada navegador, tiene su "estilo por defecto". Y nunca coinciden...
¿cómo lo arreglamos?
Reseteando el CSS.
REQUSITOS PREVIOS:
rizome :
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 iniciación, para aprender de qué va el tema.
- La Guía de Referencia CSS 2, con ¿todas? (las más importantes) propiedades aplicables por CSS.
(Ambos, manuales de Ramm)
Reseteando el CSS
Mediante este sencillísimo concepto, le diremos al navegador que visualice nuestra WEB, que no queremos que aplique "su estilo", sino el que definamos nosotros.Para ello, sólo tenemos que "inicializar", al principio de nuestra hoja de estilos, la propiedad que queremos "resetear", del elemento que queramos tener "reseteado".
Por ejemplo, el "reset" más conocido, es:
Código :
* {margin:0px;padding:0px;}¿Qué hace esto?
Pues puesto al comienzo de nuestra hoja de CSS, le dice al navegador:
<<Quiero que le quites el margen y padding por defecto, a todos los elementos de mi WEB>>
Desde entonces, todos los navegadores le quitarán el margen/padding a cualquier elemento, en consecuencia, este aspecto será igual en cualquier navegador.
Después del reset, claro, tenemos que definir los valores que queramos usar.
¿y hay algún reset más completo?
Hay muchos.
Encontraréis "CSS reset" para todos los gustos, unos más extensos que otros, en San Google
Yo, suelo usar éste, ligerísimamente modificado, que encontré por ahí:
Código :
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i{vertical-align: baseline border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;} * {margin: 0; padding: 0} body {line-height: 1; height:100%} :focus {outline: 0} ol, ul {list-style: none} table {border-collapse: collapse; border-spacing: 0;} blockquote, q {quotes: "" ""} hr {border: 0; color: #000; background-color: #000; height:1px} blockquote:before, blockquote:after, q:before, q:after {content: ""}Como veréis, no sólo quita el margen/padding a todos los elementos, sino que hace otras muchas cosas, como "alinear abajo" los elementos de línea, o hacer que se hereden las fuentes en todos los elementos, o quitar el "marco punteado" de los elementos cuando los "seleccionamos", o aplanar los bordes de las tablas, o poner a 1px las líneas <hr>... etcétera.
CONSEJOS:
- Para usar este reset (o cualquier otro), has de ponerlo al principio de la primera declaración CSS que tengas, pues si no, te sobreescribirá las anteriores ("regla de la cascada")
- Cuando uses un "reset", resetea al principio de empezar a diseñar. Si aplicas este reset a un documento que ya tengas hecho y terminado, verás como muchas cosas puede que se te descuadren, y tendrás que "redefinirlas".
- Una buena idea, puede ser, guardar el reset anterior en un documento nuevo (reset.css), y "linkearlo" al principio de vuestras webs, cuando empeceis a trabajar, de la siguiente manera:
Código :
<link href="reset.css" rel="stylesheet" type="text/css" />
Si ya has llegado hasta aquí, puede que aún necesites un último empujón. Puede que aún se te resistan algunas partes de tu WEB, o que no termine de encajar algún div.
Pasaremos entonces a la última parte de esta serie:
Los Hacks de CSS.
______________________________________
Disclaimer:
Como bien dice The Fricky!, los "trucos" del próximo tip son un último recurso). Antes, hay que haberse esforzado en conseguir una homogeneidad visiblemente aceptable en todos los navegadores. Sólo entonces, cuando no nos quedan más cartuchos, se puede abordar el problema desde el lado de los "trucos."
¿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 El Oso Amoroso el 12 de Junio de 2008
Para ello, necesito que algún MOD edite las dos primeras líneas, para que quede así:
rizome :
(este tip se complementa con "Hacks para el CSS de IE")
Por koballo el 17 de Junio de 2008
justo estaba buscando algo al respecto.
Tengo una web.. creo que ya sabes cual a estas alturas con dos estilos css. En uno de ellos cargo los links con un color blanco y en otro css cargo los links en un color verde. (ccs1 y css2) Bueno, pues me toma siempre como prioritario el css1, le estoy dando vueltas y consultando en sanG pero no termindo de arreglar este problema. Adjunto el code:
Código :
he jugado con el atributo rel= pero no consigo nada de nada.
Ha todo esto, la navegación de la web no tiene variación en la barra de direcciones. es decir: si la pagina es www.pepe.es/index.html y accedes a noticias, en vez de ser www.pepe.es/noticias.html se queda con la misma dirección (siempre en index.html)
La página principal carga el resto de html en un DIV mediante AJAX
* La única diferencia en los dos css es únicamente los links (a link, a hover, ...)
(glups hasta me he liao yo escribiendooooo)
Saludos
Por koballo el 17 de Junio de 2008
esto es un tip
copiando mi repsuesta/pregunta y escribiendo en foro
Por Ge el 15 de Abril de 2009
Buen Tip?gracias por compartirlo. Queria decir dos cosas, mas bien consultar. He utilizado los css sprites, y todo ha funcionado bien salvo dos cosas y no se si se puede corregir:
1) la altura de mis botones es mayor en el browser, no entiendo por qué si le estoy dando el valor adecuado. Puede ser que haya algun otro valor que esté influyendo pero no logro darme cuenta.
2) En IE funciona bien pero en Opera solo sale el tex-indent. No he probado aun en Mozilla.
Saludos Ge
Por frajagon el 27 de Octubre de 2009
Por frajagon el 19 de Febrero de 2010
Por Juanjo el 22 de Julio de 2010
http://blog.objetivocreativo.com/reset-css-3-0-estable/
No se dedica a poner todo a 0, se dedica a seguir las recomendaciones de la W3C. Una filosofía distinta de resetear. Espero que os guste
Por andresdz el 16 de Julio de 2011
http://meyerweb.com/eric/tools/css/reset/
funcionan bastante bien.