Publicado por Juanjo el 25 de Marzo, 2009 | 26 comentarios
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.
Total XHTML con Reset CSS
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}
