Eric Meyer lanza Hoja de Estilos CSS por Defecto
Ricardo Aroca | 04 de mayo de 2007 | 
6 comentarios
Problema:
a pesar de crear una buena hoja de estilos CSS , mis textos y otros elementos no se ven igual en distintos navegadores.
Solución:
utilizar una hoja de estilos que lleve a cero los estilos por defecto del navegador.
Sucede que cada navegador tiene una "hoja de estilos" por defecto la cual establece tipos de letras, márgenes y otras propiedades a los elementos de una página, cuando el creador de la misma no ha establecido estilos personalizados. Esto provoca inconsistencias al momento de ver una página en distiintos navegadores.
Eric Meyer ha creado una hoja de estilos para solucionar este problema, a la que llamó Reset Reloaded. Este trabajo muestra lo útiles que son los blogs para crear productos de buena calidad a través de la colaboración. Meyer lanzó su primer post sobre el tema el 12 de abril y desde esa fecha ha ido recibiendo, filtrando e incorporando las sugerencias de sus lectores.
A continuación reproduzco la hoja de estilos, la que es de completa autoría de Eric Meyer.
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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Esta hoja de estilos debe ir antes de todas las hojas de estilos que desarrolles para tu sitio.
Comentarios
Yahoo! ya tenía una solución para esto en su librería, pero me parece que la solución de Meyer es más completa, por ejemplo, no incluye una declaración para resetear focus.
No tenía idea que Yahoo ya había desarrollado algo. En todo caso el centro de recursos para desarrolladores de Yahoo está muy bueno.
Gracias Roberto por tu excelente aporte a este humilde espacio virtual. El sitio de Roberto (ispanic)es totalmente recomendable.
Comentastes al final que debo poner todos los estilos antes que el resto. Quiero saber si poniendolos en un archivo CSS separado se puede lograr? Saludos
Sí, se pude hacer con un CSS separado. De hecho tal vez es la mejor forma de hacerlo porque es más reusable. De todas maneras, el link a esta hoja de estilos con los valores por defecto, debe ir antes que las otras hojas.
Te recomendaría leyeras lo que dijo Faruk Ates sobre este Reset. Es muy bueno, pero también depende de lo que se necesite. Revisa aqui: Escoge tu CSS Inicial: Eric Meyer vs. Faruk Ateş Saludos!
Revisé la hoja de estilos de Faruk Ates. Es más simple. Como dices, aplicar una u otra depende de lo que necesites. Hace un día estuve creando la hoja de estilos para el sitio www.autospuertomontt.cl y ocupé como base la de Eric Meyer, y puedo decir basado en mi experiencia, que ahorra bastante tiempo de desarrollo pues cumple totalmente su objetivo de ofrecer control completo sobre diferentes browsers.
Comentar
Los campos con asterisco * son obligatorios.
