CSS reset selettivo

  • CSS
  • Gabriele Romanato

Esistono due tipi di reset CSS: un reset massivo ed uno selettivo. Il reset massivo azzera e normalizza tutti gli stili di tutti gli elementi, mentre un reset selettivo va ad operare solo sugli stili che effettivamente servono al nostro layout. Lavorando spesso su temi di WordPress ho notato che spesso i reset massivi creano delle spiacevoli conseguenze quando si decide di usare elementi non contemplati in partenza. In questa sede vorrei presentare un esempio di reset selettivo.

Ecco il codice CSS:


a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
/*
  Per i browser che non supportano i tag HTML5.
  IE8- richiede anche uno script:
  http://ejohn.org/blog/html5-shiv
*/
  display: block;
}

b,
strong {
  /* Normalizza font-weight: bold o bolder tra i browser */
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
/*
  Per IE:
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

ol,
ul {
  list-style: none;
}

li {
/*
  Per IE6 + IE7:

  impedisce ai marcatori di sparire se hasLayout è true.
*/
  display: list-item;
}

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

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

q {
  quotes: none;
}

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

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg {
/*
  Impedisce ad IE9 di superare i limiti di un box SVG
*/
  overflow: hidden;
}

Come si può notare, solo alcuni stili vengono modificati maa non tutti. Questo ci permette di avere una base più flessibile su cui lavorare.

Torna su