logo
  Resetten van de site
  Vaak werk je je website uit in een externe css. Heb de site klaar, dan ga je testen op verschillende browsers zoals: Firefox, Safari en Internet Explorer en dan zie je ineens dat sommige elementjes niet goed met elkaar aansluit of er een aantal dingen verspringen. Dit heeft soms te maken met de manier van website weergeven van verschillende browsers.
Om dat te voorkomen zet ik vaak een universele reset in de css. Wat doet een reset?

Doet margins en paddings verwijderen zodat alle elementen het op alle browsers hetzelfde eruit komen te zien.
Denk aan een border van een aanklikbaar afbeelding in Firefox, terwijl je die bij andere browsers niet ziet.

Reset is gewoon alles op ‘null’ zetten, zodat je website veilig en op pixels na kan bouwen. Onderstaande css reset gebruik ik bij kleine projecten:

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

Maar als het op grotere projecten aankomt gebruik ik onderstaande reset

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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 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;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

 
eind