Quattro anni fa Eric Meyer pubblicò la prima versione del suo CSS Reset. Concepito come un prototipo da condividere con altri sviluppatori dediti alla creazione di uno standard, il modulo riscosse subito grande successo diffondendosi rapidamente. In poche settimane venne adottato, spesso inconsapevolmente, da decine di migliaia di programmatori e designer web. Oggi gran parte dei siti web nel mondo includono nel loro codice almeno una traccia di quello che è universalmente noto come Eric Meyer Reset.

Una evoluzione continua

I piccoli problemi e le nuove incompatibilità che inevitabilmente accompagnano ogni aggiornamento dei browser esistenti, nonché le uscite di quelli nuovi (Google Chrome su tutti) costringono spesso a rivedere fogli di stile e codice JavaScript. Così nel tempo altri programmatori  hanno dato il loro contribuito proponendo variazioni e aggiornamenti al tema originale. Ci sono poi le nuove tecnologie che si affacciano sulla scena; una delle revisoni più famose del Eric Mayer Reset è infatti l’HTML5 Reset Stylesheet.

Eric Meyer Reset versione 2011

Ed ecco che a sopresa lo stesso Meyer torna sulla scena proponendo l’ultima incarnazione del suo CSS Reset. Questo aggiornamento prende spunto dall’originale ma tiene conto anche del lavoro svolto nel frattempo dalla comunità, a partire proprio dal HTML5 Reset. Ecco il nuovo codice:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0b1 | 201101
NOTE: WORK IN PROGRESS
USE WITH CAUTION AND TEST WITH ABANDON */

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, 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,
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%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    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;
}

/* remember to define visible focus styles!
:focus {
    outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

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

Come annotato a caratteri cubitali nelle note iniziali ci troviamo di fronte a un lavoro non ancora definitivo. Sarà mia cura segnalare eventuali aggiornamenti, tuttavia una prima occhiata al codice fa pensare che questa prima stesura sia già valida.

Ne vale la pena?

C’è un discussione in corso da tempo tra chi sostiene che tutto sommato il CSS Reset non sia necessario e chi, al contrario, lo difende a spada stratta. Non risolve certo tutti i problemi di compatibilità tra browsers ma senz’altro CSS Reset contribuisce a ridurne sensibilmente il numero. Per approfondire l’argomento puoi cominciare dando una occhiata a Should You Reset Your CSS? (Six Revisions) e leggendo le opinioni degli utenti di Stack Overflow.