Versión final: Reset CSS v2.1
Publicado por Juanjo el Marzo 25, 2009
Artículo modificado por actualización del día 8 de junio de 2009: Actualización del Reset CSS a la versión 2.1. (Estable)
Si quereis verlo en pleno funcionamiento, hemos creado un archivo que contiene todos los elementos HTML que existen y son susceptibles de ser diseñados y luego le hemos colocado nuestro Reset CSS. Funciona genial.
Volvemos al día siguiente con una nueva y mejor versión del Reset CSS que propusimos ayer (*artículo suprimido), la verdad es que el de ayer era sólo un boceto. Deberíais saber que nos hemos metido bastante de lleno en el proyecto de crear nuestro propio Reset CSS, y dedicando bastantes horas de trabajo, casi hasta el nivel de la obsesión por el perfeccionismo en el código. Pero creo que el resultado ahora sí ha merecido la pena, y después de muchas horas, unas cuantas pruebas, y retoques por aquí y por allá, declaramos la versión v1.1 v2.1 de nuestro Reset CSS, como versión final y estable. El resultado final… El mejor Reset CSS y más elaborado que puedas haber visto antes; los de Meyer, YUI, etc. no cubren bastantes aspectos importantes, que a nuestro parecer, deben ser reiniciados también por defecto y bien, como debe ser.
La diferencia fundamental de nuestro Reset CSS con otros, son básicamente dos:
- El nuestro se fundamenta estrictamente con recomendaciones de la W3C. Otros restauran los valores de una manera muy personal o privada, haciendo que su resultado final al aplicarlo en una web sea, en muchos casos, demasiado diferente con y sin el uso del CSS Reset. Sin embargo, con el uso de nuestro CSS Reset, sus webs casi no cambiaran en absoluto si usa Firefox, Opera, etc. ya que está basado íntegro en recomendaciones para los valores por defecto de la W3C como las que respetan también dichos navegadores. La verdadera funcionalidad de nuestro Reset CSS se verá cuando se muestre las páginas web con navegadores “rebeldes” que no respetan bien las normas. Es ahí donde nuestro Reset CSS ayudará a que sus páginas web se vean siempre igual. Un Reset CSS es eso, un reinicio de todos los valores por defecto, y nosotros nos hemos ceñido a esa definición exacta para crear el nuestro. Por ejemplo. <Body> tiene un margen por defecto en todos los navegadores, la mayoría de reinicios lo quitan, pues nosotros no lo hemos quitado, sólo nos hemos asegurado de que ese margen vaya a estar siempre y a la misma medida tal y como la W3C lo recomienda.
- Es el más completo. La mayoría de reinicios opta por un reinicio simple y casi siempre suficiente, pero en algunos casos es necesario dejar las cosas más detalladas y en profundidad. Nuestro Reset CSS es todo-terreno, cubre TODOS los aspectos del XHTML 1.0/CSS 2.1 que hay en la especificación oficial actual, sin dejarse ni uno sólo de todos atributos y/o etiquetas que existen y que pueden redefinirse por defecto.
Os hacemos una lista de algunas de las características que tiene:
- Valida por la W3C como CSS 2.1
- Adaptación para medios impresos
- Adaptación para medios de audio (Personas discapacitadas)
- Adaptación para lectores de Braille (Personas discapacitadas)
- Adaptación para lectores móviles, y pantallas especiales
- Adaptación a medidas proporcionales, no se usan Pixels en ningún sitio.
- Uso del sistema ISO10646 para caracteres especiales
- Sistema de comillado bilingüe, español/inglés para Blockquote
- Por supuesto, Licencia Creative Commons By.
- Lo mejor será que vosotros mismos lo vean y prueben ;-)
Manual de uso fácil en 4 pasos:
1. Haz click con el botón derecho aquí, y selecciona guardar destino cómo…
2. Guarda el archivo reset.css que te has descargado, en el directorio raiz de tu web
3. Añade la siguiente línea a tus archivos *.html, *.htm. entre las etiquetas <head> y </head>, y antes de enlazar cualquier otra hoja de estilos:
<link rel=”stylesheet” type=”text/css” href=”reset.css” />
4. Disfruta de tu página web un poco más compatible! ;)
Manual de uso fácil en sólo 2 pasos, aún más fácil:
1. Añade la siguiente línea a tus archivos *.html, *.htm. entre las etiquetas <head> y </head> y antes de enlazar cualquier otra hoja de estilos:
<link rel=”stylesheet” type=”text/css” href=”http://www.objetivocreativo.com/reset.css” />
2. Disfruta de tu página web un poco más compatible, y encima un poco más fácil! ;)
P.D.: Más adelante comentaremos el código y haremos una versión minimal. Ahora necesitamos saber qué os parece, opiniones, y si alguien descubre algún fallo o quiere proponer alguna mejora al código presente, por favor, que la reporte… Por supuesto, cualquier duda será respondida. Por otro lado, si os gusta, no veis ningún error, y os parece todo perfecto, también podéis dejarnos un comentario para darnos las gracias :P
{code type=CSS}
/*
Reset CSS v2.1/06/2009
By Objetivo Creativo
http://www.objetivocreativo.com
*/
a, abbr, acronym, address, area,
b, base, big, blockquote, body,
br, caption, cite, code, col,
colgroup, dd, del, dfn, div,
dl, dt, em, form, frame,
frameset, h1, h2, h3, h4, h5,
h6, body, hr, html, i, iframe,
img, ins, kbd, label,
li, link, map, noframes,
noscript, object, ol, optgroup,
option, p, pre, q, samp, script,
small, span, strong, style, sub,
sup, table, tbody, td, tfoot, th,
thead, title, tr, tt, ul, var {
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
font: 1em/1.2 Helvetica, Arial, sans-serif;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
direction: ltr;
text-align: left;
text-decoration: none;
text-indent: 0;
unicode-bidi: normal;
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
clear: none;
clip: auto;
display: inline;
overflow: visible;
visibility: visible;
white-space: normal;
z-index: auto;
cursor: auto;
vertical-align: baseline;
}
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; }
li { display: list-item; }
head { display: none; }
table { display: table; }
tr { display: table-row; }
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
col { display: table-column; }
colgroup { display: table-column-group; }
td, th { display: table-cell; }
caption { display: table-caption; }
html, body { background: white; color: black; }
a { color: blue; }
th { font-weight: bolder; text-align: center; }
caption { text-align: center; }
body { margin: 0.5em; line-height: 1.12; overflow: scroll; }
h1 { font-size: 2em; margin: .67em 0; }
h2 { font-size: 1.5em; margin: .75em 0; }
h3 { font-size: 1.17em; margin: .83em 0; }
h4 { font-size: 1em; margin: 1.12em 0; }
h5 { font-size: .83em; margin: 1.5em 0; }
h6 { font-size: .75em; margin: 1.67em 0; }
p, blockquote, ul,
fieldset, form,
ol, dl, dir,
cite, q, address,
menu, pre { margin: 1.12em 0; }
h1, h2, h3, h4,
h5, h6, b,
em, dt, strong { font-weight: bolder; }
blockquote { margin-left: 2.5em; margin-right: 2.5em; }
dd, blockquote,
cite, q { text-indent: 1em; }
i, cite, em,
var, address { font-style: italic; }
pre, tt, code,
kbd, samp { font-family: “Courier New”, Courier, monospace; }
pre { white-space: pre; }
button, textarea,
input, object,
select { display: inline-block; }
big { font-size: 1.27em; }
small, sub, sup { font-size: .83em; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
table { border-collapse: collapse; border-spacing: 0.13em;
caption-side: top; empty-cells: show; table-layout: auto; }
thead, tbody,
tfoot { vertical-align: middle; }
td, th { vertical-align: inherit; }
s, strike, del { text-decoration: line-through; }
hr { border: 0.06em inset; }
ol, ul, dir,
menu, dd { margin-left: 2.5em; }
ul, ol { list-style-position: outside; }
ol { list-style-type: decimal; }
ul { list-style-type: disc; }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0; }
u, ins { text-decoration: underline; }
center { text-align: center; }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em; }
fieldset {
border: 0.15em gray ridge;
margin: 0.7em;
padding: 0.7em;
}
optgroup, option {
display: block;
background: white;
color: black;
}
optgroup { font-weight: bold; }
option { text-indent: 2em; }
textarea { overflow: auto; }
br:before { content: “\A”; }
:before, :after { white-space: pre-line; }
a:link, a:link > img, a:hover,
a:hover > img, a:active, a:active > img,
a:visited, a:visited > img { cursor: pointer; border: none; }
a:link, a:visited { text-decoration: underline; }
a:hover { text-decoration: none; }
a:active, a:active > img { outline: thin dotted invert; }
a:visited { color: purple; }
blockquote, cite, q { quotes: “\00AB” “\00BB” “\0022″ “\0022″; }
blockquote:lang(en), cite:lang(en), q:lang(en) { quotes: “\0022″ “\0022″ “\0027″ “\0027″; }
blockquote:lang(es), cite:lang(es), q:lang(es) { quotes: “\00AB” “\00BB” “\0022″ “\0022″; }
blockquote:before, cite:before, q:before { content: open-quote; }
blockquote:after, cite:after, q:after { content: close-quote; }
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed; }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed; }
@media print {
* {
font-family: “Times New Roman”, Times, serif;
orphans: 2;
widows: 2;
page-break-before: auto;
page-break-after: auto;
page-break-inside: auto;
}
a { color: black; }
h1 { page-break-before: always; }
h1, h2, h3,
h4, h5, h6 { font-family: Helvetica, Arial, sans-serif; page-break-after: avoid; }
ul, ol, dl { page-break-before: avoid; }
}
@media aural {
* {
volume: medium;
speech-rate: medium;
voice-family: female;
pause: 0ms;
pitch: medium;
pitch-range: 50;
stress: 50;
richness: 50;
speak-punctuation: none;
speak-numeral: continuous;
speak-header: once;
}
h1, h2, h3,
h4, h5, h6 { voice-family: paul, male; stress: 20; richness: 90; }
h1 { pitch: x-low; pitch-range: 90; }
h2 { pitch: x-low; pitch-range: 89; }
h3 { pitch: low; pitch-range: 70; }
h4 { pitch: medium; pitch-range: 60; }
h5 { pitch: medium; pitch-range: 50; }
h6 { pitch: medium; pitch-range: 40; }
li, dt, dd { pitch: medium; richness: 60; }
dt { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80; }
em { pitch: medium; pitch-range: 60; stress: 60; richness: 50; }
strong { pitch: medium; pitch-range: 60; stress: 90; richness: 90; }
dfn { pitch: high; pitch-range: 60; stress: 60; }
s, strike { richness: 0; }
i { pitch: medium; pitch-range: 60; stress: 60; richness: 50; }
b { pitch: medium; pitch-range: 60; stress: 90; richness: 90; }
u { richness: 0; }
a:link { voice-family: harry, male; }
a:visited { voice-family: betty, female; }
a:active { voice-family: betty, female; pitch-range: 80; pitch: x-high; }
}
@media braille {
h1, h2, h3,
h4, h5, h6 { text-align: right; background: white; color: black; }
}
{/code}
Tags:diseño web
Artículo de la categoría: Diseño Web
Que envidia te tengo Juanjo, si algún día tengo tiempo me darás alguna clase buena de esas de CSS!
Un abrazo!!!
:)
Todo esta bien, y es util, pero realmente deja claro que aun los desarrolladores de navegadores les queda mucho trabajo por hacer. Son parches que no deberian de ser aplicados, por que los agujeros no deberian ni de existir.
Pero quien es perfecto en este mundo imperfecto? yoo! XD
Os agradezco todo vuestro esfuerzo y horas de trabajo. Habeis creado , lo que parece (aun no lo he probado a fondo) uno de los mejores reset css que he visto.
Un saludo y gracias por vuestro sitio.
Animo y adelante.
Gracias a vosotros, así da gusto :)
Mayor ilusión aún cuando los comentarios son por parte de verdaderos profesionales del ámbito ^^
Seguiremos aportando conocimiento…
Un saludo!
Estoy mirando tu codigo y me parece un gran trabajo pero mas que un reset yo diria que es una definicion de una base de estilo.
Me parece que por ejemplo:
ol, ul {
list-style: none;
}
es mucho mas adecuado como reset que tu opcion:
ol { list-style-type: decimal;}
ul { list-style-type: disc;}
De cualquier modo ya te digo que es un gran trabajo y viendo la lista desde luego no te dejas ningun elemento en el tintero.
Un saludo
Gracias caticalles:
Esas diferencias a las que te refieres, es el resultado de habernos ceñido al 100% con las recomendaciones de la W3C.
No quería hacer un CSS Base, si lo hubiera hecho, habría añadido estilos más personalizados a mi gusto, y se notaria un diseño más único y especialmente mío, te lo aseguro.
Pero no es así, aquí lo que muestro es un simple pero completo reset con los valores por defecto que recomienda la W3C. Es decir, podría llamarse un Reset estricto :)
Hay otros reset que ponen todo a 0 completamente… Pero de esa manera, no se basan en las recomendaciones para valores por defecto de la W3C.
Esa es la principal diferencia entre mi reset, y el de otros :)
[...] gran trabajo hecho por los chicos de objetivo creativo ha sido crear un archivo css que lo que hace es inicializar ciertos valores que harán que nuestras [...]
Hola Juanjo, he estado mirandome los valores recomendados por el w3c y no veo en ningun lado que recomiende inicializar por el disc, que casualmente el explorer no sabe leer, creo que en el ejemplo solo lo muestra como ejemplo y especifica que el none justamente sirve para que no salga ningun item.
‘list-style-type’
Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
Initial: disc
Applies to: elements with ‘display: list-item’
Inherited: yes
Percentages: N/A
Media: visual
This property specifies appearance of the list item marker if ‘list-style-image’ has the value ‘none’ or if the image pointed to by the URI cannot be displayed. The value ‘none’ specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems.
Solo es una observacion, puede que yo lo haya interpretado mal y no es para nada una critica.
Un saludo
Buenas caticalles:
En primer lugar, decirte que no me siento ofendido en absoluto, es más, os agradezco muchísimo este tipo de comentarios, es así como podemos mejorar todos :)
En el trozo de la especificación que has pegado aquí mismo, hay también una propiedad del elemento, si te fijas bien lo verás, que dice “Initial: disc” Esa propiedad, initial, la tienen todos los elementos en CSS 2.1 y su significado no es otro que el valor por defecto que recomienda la W3C para los agentes de usuario, es decir, para los navegadores :-)
El tema del IExplorer… ejem.. xD Es el navegador más rebelde de todos, y el mayor culpable, entre otros, de que herramientas como los Reset CSS, tengan que existir ^^ Cuando hablamos del IExplorer, siempre será totalmente normal que las cosas funcionen un poco peor… xD Por cierto ¿Habeis probado el nuevo Google Chrome? ;)
Otro por cierto, en la versión 7 de IExplorer, list-style-type estaba implementado de forma “parcial”, y en la versión 8 ya está funcionando al 100% y a que no adivinas qué valor le han puesto por defecto en una y otra versión… Sí, disc :o) Qué raro, le han hecho caso a la W3C… empiezan a ser buenos, jeje :P
Si quieres verlo tú mismo, te puedes informar sobre ello aquí: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
Y no tengáis miedo de seguir preguntando las dudas que queráis ^^ Para eso estamos.
Un saludo !
Jorrr… en caso de duda puedes estar seguro que acudire a ti :)
Muchas gracias por el tiempo que te has tomado en aclararme todo eso.
Usare tu reset :D
Gracias de nuevo
Un saludo
Hola Juanjo este artículo me parece el mejor de todos los que he leido y que resetean a su gusto. pero ahora utilizando me rompe la cabeza el como poner un fondo a toda la pagina, ya que me lo muestra pero me lo limita al tamaño del div principal. gracias y sigue asi.
Buenas Harold y gracias :)
No sé a qué div principal te refieres.. ¿a body?
Si es así, puede que te moleste el pequeño margen que lleva por defecto, puedes probar a quitarlo y luego ponerle cualquier fondo de la siguiente manera:
body{ margin:0; background:#000}
¿Era eso? Si no te sirve la respuesta, dime a qué div principal te refieres, y dame más detalles para intentar ayudarte mejor.
Un saludo ;)
Hola Juanjo gracias por tu respuesta, si que pena no me supe explicar pero lo solucioné, era poner el mismo fondo(imagen) a html{back…} y al body{back..}, ahora el problema que tengo es: tengo una función js en el header ej: function men(){ for(****) document.write(****)} pero al llamarla desde el html men() me aparece además del contenido del docuemnt.write el nombre de la funcion con la que estoy llamando ej: men(); ****: me aparece asi y si quito el reset.css da el resultado que quiero osea ****, porque puede estar pasando esto
Hola Juanjo aunque encontré como solucionarlo y no quitar el reset.css, probando le quité el atributo rel=’stylesheet’ de y ya deja de darme problemas, ¿porque sucederá esto?
Claro que quitando ese atributo es como si se quitara toda la etiqueta
Buenas Harold:
Acabo de leer tu problema, y por más que lo pienso, no se me ocurre ningún motivo por el que pueda estar relacionado ese “verbose js” que mencionas con el reset css…
Te agradecería que me enviases un archivo con el HTML y el JS que te está dando el problema en cuestión, al siguiente e-mail: “correo@objetivocreativo.com”
Así lo analizaré a fondo personalmente y te contestaré lo antes posible si te parece conveniente :)
Gracias de antemano
Un saludo.
Buenas de nuevo:
Harold, no he recibido respuesta todavía, y quería decirte que reviso el correo cada día, esperando tu respuesta e intrigado con el problema que me planteabas…
¿Ya lo has solucionado? Si no es así, aquí sigo esperando ;) Y si es así, también te agradecería que me dijeras cómo lo has hecho.
Necesito saber de los problemas, así es como puedo mejorar las siguientes versiones.
Sin más, un saludo!
[...] tiempo publicamos nuestro propio Reset CSS, y debido a la gran fama que ha cogido desde entonces en nuestro Blog, hemos decidido seguir [...]
[...] ;-) Lo publico por si otro/a se anima con lo mismo ;-) Ahora mismo tiene anidado nuestro propio CSS [...]
En primer lugar agradecerle su magnifico trabajo.
Estoy desarrollando la siguiente versión de FreeCliDent (un sistema de Gestión de Clinicas Dentales GNU/GPL basado en PHP) y me gustaría incluir, con su permiso, la css en dicho proyecto como css reset, me ha parecido clara y adecuado el concepto de usar las recomendaciones de la W3C razones por las que quiero incluirla.
Saludos y Gracias!
Raul
Buenas:
Por supuesto Raul, nuestro CSS Reset también es GPL y puede ser usado por cualquiera para lo que se quiera y como se quiera.
Si encima es para otro proyecto GPL, mejor que mejor !
Por último quiero decirte que además puedes contar conmigo y mi ayuda para todo lo que puedas necesitar ;)
Salu2 y suerte con ese proyecto
Muchas gracias Juanjo :) adentro que va ;)
[...] Creativo ha desarrollado una hoja de estilo para resetear la css usando las especificaciones de W3C, y generando una de las hojas mas completas que conozco, por ello , dado que está licenciada con [...]
Juanjo, con esa sola linea me arreglaste el diseño, y el reset css ni hablar, está buenísimo y de hecho fundamental para el diseño, de todas maneras lo incluyo… felicitaciones por tu blog, está genial.
Hola Juanjo, he encontrado tu blog informándome más sobre diferentes resets de CSS y me ha parecido genial.
Yo siempre he usado el reset de Meyers o variantes pero, a partir de ahora, me cambio al tuyo.
Es fantástico que alguien se haya tomado el tiempo de crear un “normalizador” CSS, si me permites la expresión, puesto que en vez de poner a cero todo, les da los valores iniciales recomendados por el estandard. ¡Me parece lo más apropiado!
Me despido felicitándote por el aporte y por tu blog en general, que visitaré más a fondo “entre proyectos”.
Un saludo!
Muchas gracias por este gran trabajo que has realizado, estoy rediseñando mi pagina web y voy a usar te reseteo CSS a ver que tal funciona.
Saludos!!