Una guía completa para restablecimientos de CSS

 

Esta guía examina la variedad infinita de restablecimientos de CSS creados por desarrolladores y diseñadores web de todo el mundo.

Si bien casi todos estos restablecimientos de CSS generalmente se proporcionan de forma gratuita para uso público (muchos a través de licencias Creative Commons), le corresponde a usted verificar los términos de uso antes de ponerlos en uso en sus proyectos.

Esta guía sigue a la Parte 1, donde se discutió la historia de los restablecimientos de CSS; Se recomienda leer eso antes de esta para aprovechar al máximo esta guía.

Esta es la Parte 2 de una serie de artículos de tres partes sobre el tema de los restablecimientos de CSS.

Al elaborar esta guía, la colección de reajustes de 2007 de Jeff Starr, quien, además, ha contribuido con artículos sobre Six Revisions, se utilizó como punto de partida.

Reinicio «completo»

Como se discutió en la Parte 1 de esta serie, la versión original del restablecimiento «completo» fue realizada por el diseñador web Andrew Krespanis:

* {padding:0; margin:0;}

No pasó mucho tiempo antes de que la gente agregara border: 0; and outline: 0; a la lista de propiedades, dándonos:

* {padding:0; margin:0; border: 0; outline: 0;}

Debido al selector universal (*), esta regla de estilo sucinta tiene un poderoso efecto transformador en cualquier página web en la que se utilice.

Desafortunadamente, debido a los efectos nocivos bien documentados de un selector tan completo, muchos diseñadores se han alejado de este método hacia algo más controlado.

Undohtml.css de Tantek Çelik (versión 2010)

Tantek Çelik, de quien se cree que inició el uso de reinicios CSS en 2004, actualizó su reinicio este año. Lo que sigue es la versión actualizada de undohtml.css:

/* undohtml.css */
/* (c) 2004-2010 Tantek Çelik. Some Rights Reserved. http://tantek.com */
/* This style sheet is licensed under a Creative Commons License.      */
/*             http://creativecommons.org/licenses/by/2.0              */

/* Purpose: undo some of the default styling of common browsers        */


/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited,ins { text-decoration:none }

/* no list-markers for nav lists, default markers work well for item lists */
nav ul,nav ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code/kbd too */
h1,h2,h3,h4,h5,h6,pre,code,kbd { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
dl,ul,ol,li,
h1,h2,h3,h4,h5,h6,
html,body,pre,p,blockquote,
form,fieldset,input,label
{ margin:0; padding:0 }

/* who thought blue linked image borders were a good idea? no abbr borders */
abbr, img, object,
a img,:link img,:visited img,
a object,:link object,:visited object
{ border:0 }

/* de-italicize address,abbr */
address,abbr { font-style:normal }

/* get rid of ad frames inserted by local wifi connections e.g. AnchorFree */
iframe:not(.auto-link) { display:none ! important; visibility:hidden ! important; margin-left: -10000px ! important  }

/* more varnish stripping as necessary... */

Los comentarios en la hoja de estilo explican la idea detrás de la actualización, pero para reiterar, aquí hay un desglose de lo que hace el archivo actualizado:

  • Elimina subrayados (text-decoration: none) de enlaces
  • Elimina propiedades de estilo de listas ordenadas / desordenadas
  • Cambia el tamaño de los elementos de encabezado (<h1> mediante <h6>) así como el pre, code, y kbd elementos
  • Elimina los márgenes y los rellenos de la mayoría de los elementos HTML
  • Elimina el borde alrededor de las imágenes vinculadas (es decir, <a><img /></a>)
  • Elimina la cursiva de address y abbr elementos
  • Renders iframes invisible, principalmente para evitar que aparezcan «marcos de anuncios insertados por conexiones wifi locales»

Reinicio del pobre

El «reinicio del pobre» establece el margin, padding, font-size, y borders de El html y body elementos en lugar de todos los elementos. Esto no solo elimina la dependencia del selector universal, sino que también es más conservador con los elementos y las propiedades de CSS que se restablecen.

html, body {padding: 0; margin: 0;}
html {font-size: 1em;}
body {font-size: 100%;}
a img, :link img, :visited img {border: 0;}

Reinicio de Siolon

En 2008, Chris Poteet desarrolló un reinicio híbrido, incorporando el reinicio del selector universal para una serie de propiedades CSS, junto con algunos valores de reinicio seleccionados (e idiosincrásicos) para elementos individuales como table y li:

* {vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0;}
body {padding: 5px;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {margin: 20px 0;}
li, dd, blockquote {margin-left: 40px;}
table {border-collapse: collapse; border-spacing: 0;}

Poteet dice que «la idea es interceptar la hoja de estilo predeterminada del navegador (que se usa primero en la cascada), restablecer y luego aplicar estilos genéricos, incluido el margen / relleno».

Reinicio de Inman

El diseñador / desarrollador Shaun Inman utilizó el siguiente reinicio global dirigido en su sitio personal:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {padding: 0; margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img, abbr {border: 0;}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {font-weight: normal; font-style: normal;}
ul {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 1.0em;}
q:before, q:after {content: '';}
a, ins {text-decoration: none;}

El Restablecimiento de Inman recuerda a una versión simplificada del CSS Restablecer de Eric Meyer.

Trípoli Restablecer

Uno de los reinicios de mayor alcance fuera del CSS de reinicio de Eric Meyer es el reinicio de Tripoli de David Hellsing. Está destinado a funcionar junto con una hoja de estilo fundamental para reconstruir el CSS después de que el restablecimiento lo derribe.

* {margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none;}
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext {font: inherit; font-size: 1em; white-space: normal;}
dfn, i, cite, var, address, em {font-style: normal;}
th, b, strong, h1, h2, h3, h4, h5, h6 {font-weight: normal;}
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {border: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td, center {text-align: left; vertical-align: top;}
body {line-height: 1; background: white; color: black;}
q {quotes: "" "";}
ul, ol, dir, menu {list-style: none;}
sub, sup {vertical-align: baseline;}
a {color: inherit;}
hr {display: none;} /* we don't need a visual hr in layout */
font {color: inherit !important; font: inherit !important; color: inherit !important;} /* disables some nasty font attributes in standard browsers */
marquee {overflow: inherit !important; -moz-binding: none;}
blink {text-decoration: none;}
nobr {white-space: normal;}

El restablecimiento de Hellsing aborda muchos elementos HTML obsoletos, a menudo desactivándolos, como el <blink> y <marquee> elementos, que podrían ser útiles para proyectos que son utilizados por varias personas con diferentes niveles de conocimiento de HTML. A algunos desarrolladores les encanta Tripoli Reset, otros lo consideran una exageración importante.

Reinicio de Dan Schulz

En agosto de 2008, Dan Schulz, un diseñador web de gran talento que falleció desde entonces, publicó su versión idiosincrásica de un reinicio «global» (que documentó ampliamente en el hilo de SitePoint en el que lo publicó):

/* CSS RESET RULES */
html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
 
body {
    background: #FFF;
    color: #000;
    font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}
 
code, pre {
    white-space: pre;
}
 
del {
    text-decoration: line-through;            /* it's deleted text - show it as such */
}
 
dfn {
    font-style: italic;
    font-weight: bold;
}
 
em {
    font-style: italic;
}
 
fieldset {
    border: 0;
    display: inline;
}
 
h1, h2, h3, h4, h5, h6 {
    font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}
 
img {
    border: 0;
    vertical-align: bottom;
}
 
ins {
    text-decoration: none;
}
 
strong {
    font-weight: bold;
}
 
tt {
    display: block;
    margin: 0.5em 0;
    padding: 0.5em 1em;
}
 
.skip {
    position: absolute;
    left: -999em;
}

Schulz explicó que no quería usar el selector universal, pero sí quería poner a cero los márgenes y el relleno en la mayoría de los elementos. Como siempre codificaba bajo el tipo de documento estricto, no se molestó en restablecer los elementos HTML obsoletos. Schulz estableció familias de fuentes básicas y entró en detalles sobre el tamaño de las fuentes. Usó parte del trabajo de Meyer en Reset CSS, agregando algunas inclusiones de «eliminación de errores».

Base.css de Thierry Koblentz

En marzo de 2010, el desarrollador / diseñador Thierry Koblentz decidió darle la vuelta a la idea de un «restablecimiento global» y creó una hoja de estilo base que restablecía muchos valores predeterminados del navegador, no necesariamente a cero, sino a un valor con el que quería comenzar sus diseños. .

De Koblentz base.css es grande, pero gran parte tiene que ver con una extensa documentación de comentarios:

/* 
 * base.css | v0.4 (06132010) | Thierry Koblentz
 *
 * The purpose of this styles sheet is to set default styles for common browsers and address common issues (missing scrollbar, extended buttons in IE, gap below images, etc.)
 *
 * See: 
 * 
 * Changes in this version:
 *    - input, button, textarea, select, optgroup, option {line-height: 1.4 !important;} (to override FF's default styling)
 *    - styling <ol> inside <ul> (merci Goulven)
 */

/* using height:100% on html and body allows to style containers with a 100% height
 * the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
 * note that there is no font-size declaration set in this rule. If you wish to include one, you should use font-size: 100.01% to prevent bugs in IE and Opera
 */
html {
  height: 100%;
  overflow-y: scroll;
}
/* not all browsers set white as the default background color 
 * color is set to create not too much contrast with the background color
 * line-height is to ensure that text is legible enough (that there is enough space between the upper and lower line) 
 */	
body {
  height: 100%;
  background: #fff;
  color: #444;
  line-height: 1.4;
}

/* this choice of font-family is supposed to render text the same across platforms
 * letter-spacing makes the font a bit more legible
 */
body, input, button, textarea, select {
  font-family: "Palatino Linotype", Freeserif, serif;
  letter-spacing: .05em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "DejaVu Serif", serif;
  letter-spacing: .1em;
}
pre, tt, code, kbd, samp, var {
  font-family: "Courier New", Courier, monospace;
}

/* These should be self explanatory
 */
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

h1, h2, h3, h4, h5 {font-weight: normal;}

/* styling for links and visited links as well as for links in a hovered, focus and active state 
 * make sure to keep these rules in that order, with :active being last
 * text-decoration: none is to make the links more legible while they are in a hovered, focus or active state
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :hover is to avoid outline when a user clicks on links
 * note that these last rules do not do anything in IE as this browser does not support "outline"
 */
a:link {color: #000;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;}
a:focus,:focus {outline: 1px dotted #000;}
a:hover,a:active {outline: none;}

/*
 * This one is commented out as it may be overkill (users who use both a mouse and the keyboard would lose keyboard focus)
 * Besides, this may create a performance issue
 * html:hover a {outline: none;}
 */

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it 
 */
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)
 */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers 
 */
img {vertical-align: bottom;}

/* Styling of list items
 * This styles sheet contains a class to apply on lists to reset list-type and margin on LIs
 */
ol li,
ul ol li {list-style-type: decimal;}
ul li {list-style-type: disc;}
ul ul li {list-style-type: circle;}
ul ul ul li {list-style-type: square;}
ol ol li {list-style-type: lower-alpha;}
ol ol ol li {list-style-type: lower-roman;}

/* These should be self explanatory
 * I believe *most* UAs style sub and sup like this by default so I am not sure there is value to include these rules here
 */
sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/* color is to make that element stands out (see color set via body)
 * padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  color: #000;
  padding-bottom: .5em; 
}

/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* all th should be centered unless they are in tbody (table body)
 */
th {text-align: center;} 
tbody th {text-align: left;} 

/* See Eric Meyer's article about Fixed Monospace Sizing 
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 */
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}

/* This should be self explanatory
 */
blockquote, q, em, cite, dfn, i, cite, var, address {
  font-style: italic;
}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes)
 */
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

/* These should be self explanatory
 */
th, strong, dt, b {
  font-weight: bold;
}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;} 

abbr, 
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
} 

/* Creating white space (vertical gutters) via padding
 * most authors do not set right/left padding or margin on these elements, they rather use an extra wrapper or style the container with padding to create the left and right gap/gutter they need
 * I find that the latter creates less robust layouts because it leads authors to mix padding with width which creates issue with the broken box model (IE5 or IE6 in quirks mode) 
 * so imho, setting this style using the child combinator (i.e., div > h1) should be the best way to do it, but unfortunately IE 6 does not support such syntax, so I have to go with the following + a reset (see next rule)  
 */
h1, h2, h3, h4, h5, h6, p, pre, ul, ol, dl, fieldset, address {padding:0 30px;}

/* this is to reset the left/right gaps (created by the previous and next rules) on nested elements
 */
dd p, dd pre, dd ul, dd ol, dd dl, li p, li pre, li ul, li ol, li dl, fieldset p, fieldset ul, fieldset ol {
  padding-right: 0;
  padding-left: 0;
}

/* These should be self explanatory
 */
dd {
  padding-left: 20px;
  margin-top: .5em;
}

li {margin-left:30px;}

/* we cannot use padding on a table to create left and right gaps (as we do with the elements above), instead we use margin 
 */ 
table {
  margin-right: 30px;
  margin-left: 30px;
} 

/* we use margin for hr for the same reason we do for table 
 */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}

/* top margin solution */
/* this is my approach to create white space between elements, you do not have to adhere to it
 * rather than stylling these elements with top and bottom margin, or simply bottom margin I only use top margin
 */
h1, h2, h3, h4, h5, h6, p, pre, dt, li, hr, legend, input, button, textarea, select, address, table {margin-top: 1.2em;}

/* top padding solution */
/* this is a different approach which may be less frustrating for novice because it avoids running into collapsing margin and allows to clear floats while preserving space above the element
 * if you decide to give this a try, then comment out the above rule and uncomment the two next ones
 */
 /* 
 h1, h2, h3, h4, h5, h6, p, pre, dt, dd, li, legend, address {padding-top: 1.2em;}
 hr, input, button, textarea, select, table {margin-top: 1.2em;}
 *//* form elements
 * this should not affect the layout of the labels unless you style them in a way that padding applies
 * if I include this here it is mostly because when labels are styled with float and clear, top padding creates a gap between labels (bottom margin would, but not top margin)
 */
label {padding-top: 1.2em;}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets) 
 */
fieldset {line-height: 1;}

/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
input[type="checkbox"] {
  vertical-align: bottom; 
  *vertical-align: baseline;
}

/* vertical alignment of radio buttons
 */
input[type="radio"] {vertical-align: text-bottom;}

/* vertical alignment of input fields for IE 6
 */
input {_vertical-align: text-bottom;}

/* a specific font-size is set for these elements
 * the line-height is to override FF's default styling
 */
input, button, textarea, select, optgroup, option {
  font-size: .9em;
	line-height: 1.4 !important;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

/* classes
 * to style elements with the default padding and margin we set on headings, paragraphs, lists, etc.
 * for example, this class could be used on a DIV inside a blockquote or a DIV inside a FORM, etc.
 */
.block {
  padding: 0 30px;
  margin-top: 1.2em;
}

/* to swap padding for margin
 * for example, this class could be used on a heading you'd style with a bottom border
 */
.padding2margin {
  margin-right: 30px;
  margin-left: 30px;
  padding-right: 0;
  padding-left: 0;
}
/* list items are styled by default with markers (disc, etc.) and left margin
 * if you apply the class "noMarker" to a list, its items won't display markers and won't have left margin
 */
.noMarker li {
  list-style: none;
  margin-left: 0;
}

De Koblentz base.css hace una serie de cosas que otros restablecimientos no hacen, que incluyen:

  • Forzar un canalón para una barra de desplazamiento vertical
  • Incorporación de una corrección de botón de IE
  • Prevención de lo que él llama «huecos misteriosos debajo de las imágenes»
  • Evitar que el descendente de algunas letras se corte por dentro <legend> elementos en IE
  • Alineación vertical de casillas de verificación y botones de opción con su etiqueta
  • Establecer un fondo de color predeterminado para el documento
  • Listas de estilo por defecto
  • Creando espacios en blanco horizontales y verticales

Como algunos otros reinicios, Koblentz advierte que base.css incluye «hacks» de IE que impiden que la hoja de estilo se valide.

Reinicio simple

En abril de 2010, Russ Weakley nos dio un reinicio mucho más específico y limitado, al que llamó Reinicio simple.

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

En su explicación de Simple Reset, señaló que eliminó los márgenes y el relleno solo de los elementos seleccionados, a diferencia de la eliminación total realizada por los restablecimientos que dependen del selector universal.

Otras cosas que hace Simple Reset:

  • Elimina los márgenes superiores de los párrafos y encabezados.
  • Elimina los bordes de los conjuntos de campos y las imágenes.
  • Establece los bordes y el espaciado de la tabla
  • Establece valores para varios elementos relacionados con la tabla (como <th> y <td>)
  • Se aplica font-size y line-height a form elementos
  • Elimina las viñetas de elementos de la lista
  • Da atributos a los raramente estilizados <abbr> y <acronym> elementos
  • Da un valor de alineación vertical a <sup> y <sub> elementos a evitar line-height asuntos

Weakley recordó a los usuarios de restablecimiento de CSS: «¡Como con cualquiera de los restablecimientos, debe hacer lo que se sienta cómodo haciendo!»

Se hizo eco de Eric Meyer al recordarles a los usuarios de Reset CSS que estas reglas de estilo no son «caja negra autónoma[es] de no ser delicado «, sino herramientas para ser utilizadas, ajustadas y modificadas para las necesidades del proyecto.

Mini reinicio de CSS

El diseñador Vladimir Carrer combinó elementos de los reinicios de Weakley y Meyer para crear lo que llamó CSS ​​Mini Reset:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

Es mucho menos general que los esfuerzos de Weakley o Meyer, centrándose principalmente en restablecer los márgenes y el relleno, eliminando los valores predeterminados de table elementos, restableciendo los encabezados al peso normal de la fuente y eliminando los bordes de los márgenes.

Carrer dice que CSS Mini Reset se usa mejor «cuando en realidad no quieres restablecer todo».

Carrer basó su reinicio en Azbuka, un esfuerzo anterior y mucho más complejo en un reinicio basado en la tipografía y una hoja de estilo base que creó en 2009.

Reinicio suave

Casi al mismo tiempo que Carrer lanzó su reinicio, el diseñador web Mark Aplet contribuyó con su Soft Reset. Aplet explicó que su restablecimiento «intenta perfeccionar y restablecer solo las propiedades que realmente necesitan restablecerse, dejando algo de estilo para el navegador».

/* Soft Reset */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
h1, h2, h3, h4, h5, h6, address, caption { font-style:normal; font-size:100%; font-weight:normal; }
caption, th { text-align:left; }
ol.listreset, .listreset ol, ul.listreset, .listreset ul, .listreset li { margin:0; padding:0; list-style:none; }

De Aplet .listreset La clase se inspiró en el CSS orientado a objetos de Nicole Sullivan, (OO CSS) que indica que las clases reutilizables son «regalos de rendimiento». En sitios a gran escala, dice que la abstracción de CSS «puede mejorar enormemente el rendimiento de su aplicación» y «ahorrarle cientos de líneas de código».

Menos es más Reset

En junio de 2007, el desarrollador web Ed Eliot proporcionó un reinicio aún más sencillo; algo que llamó el reinicio Menos es más:

body {
padding: 0;
margin: 0;
font: 13px Arial, Helvetica, Garuda, sans-serif;
*font-size: small;
*font: x-small;
}
h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {
padding: 0;
margin: 0;
line-height: 1em;
font-size: 100%;
font-weight: normal;
font-style: normal;
}
table {
font-size: inherit;
font: 100%;
}
ul {
list-style: none;
}
img {
border: 0;
}
p {
margin: 1em 0;
}

Menos es más, explica Eliot, «solo afecta a los elementos que más a menudo necesito restablecer».

Hay trucos en la hoja de estilo que manejan algunos problemas de IE (resaltados arriba); desafortunadamente, invalidan el CSS cuando se comparan con los estándares del W3C.

Para aquellos que insisten en la validación, Eliot recomienda moverlos a un archivo separado y usar comentarios condicionales.

La Visibilidad: Heredar Restablecer

En agosto de 2009, el diseñador web Eric Watson puso a disposición su propia hoja de estilo base. Incluyó un reinicio pequeño pero poderoso, que se muestra a continuación:

/* -------------------- Resets --------------------- */
body, form, fieldset, ol, ul, li, h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
}
img {
border:0; /* kills Gecko bug when img's are placed inside links */
vertical-align:bottom; /* set vertical align to bottom for IE */
}

Reinicio de CSS casero

Jeffrey Way en Nettuts + compartió un método para crear su propio archivo de reinicio. Los pasos que incluye para elaborar tu propia cerveza casera reset.css están:

  1. Poner a cero los márgenes y el relleno en muchos elementos
  2. Tomando el control del tamaño de la fuente
  3. Crear clases «predeterminadas» para los elementos que utilizará en todos sus diseños.

Way compartió su propia cerveza casera. reset.css al final de su discusión (que se muestra a continuación):

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  
li, dl, dt, dd, form, a, fieldset, input, th, td  
{  
margin: 0; padding: 0; border: 0; outline: none;  
}  
  
body  
{  
line-height: 1;  
font-size: 88% /* Decide for yourself if you want to include this. */;  
}  
  
h1, h2, h3, h4, h5, h6  
{  
font-size: 100%;  
padding: .6em 0;  
margin: 0 15px;  
}  
  
ul, ol  
{  
list-style: none;  
}  
  
a  
{  
color: black;  
text-decoration: none;  
}  
  
a:hover  
{  
text-decoration: underline;  
}  
  
.floatLeft  
{  
float: left;  
padding: .5em .5em .5em 0;  
}  
  
.floatRight  
{  
float: rightright;  
padding: .5em 0 .5em .5em;  
}

Reinicios de HTML5

Muchos profesionales están ansiosos por bailar con el lindo chico nuevo de la cuadra: HTML5. Aquí hay algunos proyectos que tratan con el restablecimiento de CSS en HTML5.

HTML5Reset

Rich Clark y la gente de HTML5Reset nos han proporcionado un reinicio expansivo diseñado para HTML5.

HTML5Reset

El proyecto viene en varios sabores; aquí está el Puros huesos versión:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbrA Comprehensive Guide to CSS Resets, dfnA Comprehensive Guide to CSS Resets {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

El restablecimiento de CSS se basa en el restablecimiento de CSS de Eric Meyer. Como explicó Clark, va mucho más allá de su hoja de estilo de reinicio global promedio. Elimina los elementos que han quedado obsoletos de las especificaciones de HTML5, agrega nuevos elementos HTML5 para eliminar el relleno, los márgenes y los bordes predeterminados, y corrige la «desestilización» que se repite con frecuencia en el :focus pseudo-clase.

Clark señala que parte del código incluido en el restablecimiento de HTML5 está más por preferencia personal que por cualquier otra cosa (una advertencia que es esencialmente cierta para todos los restablecimientos disponibles).

Los creadores de HTML5Reset dicen que aunque el restablecimiento no es «la solución definitiva y completa», piensan que «es un punto de partida bastante bueno que cualquiera puede tomar y hacer el suyo».

Clark explicó algunas de sus ideas detrás del restablecimiento de HTML5:

Cuando decidí crear una hoja de estilo de restablecimiento para HTML5, fue principalmente para un proyecto en el que estaba trabajando y pensé que también podría lanzarla para que la usara, modificara y mejorara la comunidad en general. Las principales diferencias con la hoja de estilo de Eric … son la eliminación de esos elementos ausentes en HTML5, incluidos los nuevos elementos y declararlos como elementos de nivel de bloque (algo que luego se integrará en las hojas de estilo del navegador y se puede eliminar del restablecimiento). También se incluye un estilo de línea de base para el elemento de marca y algunos otros bits que suelo usar en cada proyecto, por lo que tiene sentido para mí incluirlos. También decidí eliminar el estilo de ancla predeterminado de la hoja de estilo de Eric para que el contorno no se suprimiera en los enlaces. Tiene un comentario en el original de Eric, pero los autores rara vez parecen cambiarlo. Esto resalta uno de los mayores problemas con los restablecimientos de CSS: debes crear el tuyo propio que funcione para ti y para proyectos específicos. Es poco probable que un restablecimiento que funcione para un sitio sea exactamente lo que se requiere para el siguiente. Siempre sugiero usar un reinicio como punto de partida y luego modificarlo para sus propias necesidades.

Restablecimiento de CSS: actualizado

El diseñador web Jeffrey King actualizó el reinicio original de Meyer para HTML5; su revisión se llama CSS Reset – Refreshed:

/* v1.2 | 20100218 */

/* Eric Meyer's original CSS Reset is found at
   http://meyerweb.com/eric/tools/css/reset/ */

/* This version's permalink is
    */


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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
section, article, aside, hgroup, header,
footer, nav, dialog, figure, menu,
video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}
section, article, aside, hgroup, header,
footer, nav, dialog, figure, figcaption {
	display: block;
	}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
:focus { /* remember to define focus styles! */
	outline: 0;
	}
ins { /* remember to highlight inserts somehow! */
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}
table { /* markup tables with 'cellspacing="0"' */
	border-collapse: collapse;
	border-spacing: 0;
	}

Texto estándar de HTML5

Terminemos la guía con un proyecto tremendamente popular del que muchos de nosotros hablamos constantemente: HTML5 Boilerplate de Paul Irish y Divya Manian, un «marco» completamente desarrollado (los creadores dicen que no es un marco) que incluye un sólido HTML5 -restablecimiento amigable.

El restablecimiento de CSS en HTML5 Boilerplate es una fusión de HTML5Reset y la línea de base Reset Reloaded + HTML5 de Eric Meyer.

/* 
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbrA Comprehensive Guide to CSS Resets, dfnA Comprehensive Guide to CSS Resets { border-bottom:1px dotted; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */

Clark (uno de los creadores de HTML5Reset) dice que HTML5 Boilerplate «realmente destaca cómo la comunidad web es muy buena para compartir y abrirse al uso público».

Conclusión

Hay muchas opciones para configurar su CSS a los valores predeterminados de la línea de base, como se puede ver arriba. Lo que es importante tener en cuenta es que debe utilizar lo que funcione mejor para usted y el proyecto en cuestión. Puede usar una hoja de estilo de reinicio ya existente, juntar varias de ellas o crear la suya propia desde cero; la decisión es tuya.

La tercera y última parte de esta serie analiza el debate en curso sobre si debemos o no restablecer nuestro CSS en las compilaciones de nuestro sitio.

Deja un comentario