miércoles, 5 de septiembre de 2012

Reseteo de CSS para que las páginas se vean iguales en todos los navegadores

Nos pasamos días diseñanado nuestras páginas con CSS, definiendo los colores más apropiados, los márgenes, el tamaño de las fuentes, etc., y cuando todo está listo, probamos el resultado en más de un navegador y nos encontramos con la desagradable sorpresa de que no se ve igual en todos ellos.

¿Por qué ocurre esto? Pues porque cada navegador, Firefox, Safari, Opera, Google Chrome, Internet Explorer, etc., tiene sus propios valores por defecto para las etiquetas CSS.

Pero existe una manera de poder resolver esto y es "reseteando" dichos valores, para luego agregar los nuestros. Sólo hay que tener muy en cuenta que el "reseteo" se debe realizar antes de ingresar nuestros propios valores, pues de lo contrario éstos serán ignorados. También se pueden incorporar en un archivo externo y llamarlo al comienzo de nuestra página.

Y resetear es tan fácil como darle valores iniciales a todas las propiedades CSS que deseamos utilizar.
A continuación les dejo uno de los tantos ejemplos que podemos encontrar en internet y que cubre la mayoría de las propiedades.


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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}
 
body {
    line-height: 1; 
    height:100%
}
 
:focus {
     outline: 0
}
 
table {
    border-spacing: 0;
   border-collapse: collapse
}
 
ol, ul {
    list-style: none
}
 
blockquote:before, blockquote:after, q:before, q:after {
    content: ""
}
blockquote, q {
    quotes: "" ""
}

input, textarea {
    margin: 0;
    padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Ojo que aún con lo anterior es posible que sigan existiendo algunas diferencias entre navegadores, especialmente con Internet Explorer, pero eso ya es hilar más fino y lo veremos en una siguiente entrada.




No hay comentarios.:

Publicar un comentario