Comunidad de diseño web y desarrollo en internet online

Ver igual tu WEB en cualquier navegador con CSS. Reset-CSS

(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 :

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:

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.

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