Hoe vaak gebeurt het dat je een website in CSS hebt gemaakt en er vervolgens achter komt dat het er verschillend uitziet in een andere browser? Met CSS Reset kun je zonder al te veel moeite voorkomen dat je site er anders uitziet in Firefox, Internet Explorer en Safari.

CSS Reset zorg ervoor dat veelvoorkomende verschillende weergaves in de diverse browsers verholpen wordt. Denk hierbij aan margins, lettergrootte of de randen rond gelinkte afbeeldingen in Firefox. De paddings en margins moeten gereset worden, omdat de verschillende browsers allemaal hun eigen paddings en margins al aan de diverse elementen toevoegen. Dit is was CSS Reset doet, zodat je site er hetzelfde uitziet in de verschillende browsers. Voorbeelden van een site met en zonder CSS reset kun je hier zien: http://www.computerfaq.be/css/css-reset-bestand/

De CSS Reset van meyerweb.com moet aangepast worden aan je eigen voorkeuren wat betreft kleur, links en zo verder. Na de code aangepast te hebben sla je het bestand op als een CSS bestand met de naam reset.css. De CSS voor je website zelf sla je op in een ander bestand en verwerk je na reset.css. Je HTML-head gaat er dan zo uitzien:



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ComputerFAQ Reset CSS</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

De CSS reset code is vrij te gebruiken en kan hier (http://meyerweb.com/eric/tools/css/reset/reset.css) gedownload worden. Het ziet er als volgt uit: 



/* v1.0 | 20080212 */

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 {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
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 focus styles! */
:focus {
        outline: 0;
}

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

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}
Tekst door: Selma Franssen tekstproducties
http://www.selmafranssen.nl

3 reacties to “CSS Reset: Voorkom nare verrassingen.”

  1. Rene Bosch says:
    7 juli 2010 at 23:22

    Probleem inderdaad met een reset.css is dat alles gereset wordt. Vond het een ideaal idee, maar ondervond laatst toch een probleem. Wanneer je in een CMS gebruik maakt van een WYSIWYG editor en daar een tabel opmaakt, ziet het er aan de voorkant niet uit, omdat veel opmaak weer wordt gereset!

    Als iemand hier een oplossing voor heeft, hoor ik die graag!

  2. Flybert says:
    20 maart 2010 at 20:00

    Dag Arek,

    Kan je mij dan een voorbeeld geven, hoe zo’n CSS line er uit ziet? Ik wil met Kompozer (WYSIWYG) een tabel volledig in de linker bovehoek laten beginnen, zonder een dun randje van de achtergrond te zien.

    Bedankt Flybert

  3. Arek van Schayk says:
    5 maart 2010 at 18:11

    Zo’n CSS reset is niet aan te raden, veel CMS systemen die een WYSIWYG editor gebruiken zijn gebouwd op dit soort standaarden (vb: denk aan paragraph element en de tussenruimte ervan (margin).

    Ik heb bij iedere template een aantal standaard CSS lines die ervoor zorgen dat de standaard instellingen gelijk zijn in elke browser.

    - Veel minder code nodig.
    - Veel beter resultaat omdat standaarden die daadwerkelijk nodig zijn behouden blijven en niet gereset worden.
    - Professionelere aanpak, een complete reset komt niet bepaald professioneel over.

Plaats een reactie