CSS
Browserstijlen normaliseren

Invoering

Opmerkingen

normalize.css

Browsers hebben een standaardset CSS-stijlen die ze gebruiken voor het renderen van elementen. Sommige van deze stijlen kunnen zelfs worden aangepast met behulp van de browserinstellingen om bijvoorbeeld standaarddefinitie van lettertypen en grootte te wijzigen. De stijlen bevatten onder andere de definitie van welke elementen op blokniveau of inline worden verondersteld.

Omdat deze standaardstijlen wat speelruimte krijgen door de taalspecificaties en omdat browsers de specificaties mogelijk niet goed volgen, kunnen ze van browser tot browser verschillen.

Dit is waar normalize.css in het spel komt. Het vervangt de meest voorkomende inconsistenties en lost bekende fouten op.

Wat doet het

• Behoudt nuttige standaardwaarden, in tegenstelling tot veel CSS-resets.
• Normaliseert stijlen voor een breed scala aan elementen.
• Corrigeert bugs en algemene browserinconsistenties.
• Verbetert de bruikbaarheid met subtiele aanpassingen.
• Legt uit wat code doet met behulp van gedetailleerde opmerkingen.

Dus door normalize.css in uw project op te nemen, zal uw ontwerp er meer uitzien en consistent zijn in verschillende browsers.

Verschil met reset.css

Je hebt misschien gehoord van reset.css . Wat is het verschil tussen de twee?

Terwijl normalize.css consistentie biedt door verschillende eigenschappen in te stellen op uniforme standaardwaarden, bereikt reset.css consistentie door alle basisstijlen te verwijderen die een browser kan toepassen. Hoewel dit in het begin misschien een goed idee klinkt, betekent dit eigenlijk dat je alle regels zelf moet schrijven, wat indruist tegen een solide standaard.

Benaderingen en voorbeelden

CSS-resets hebben verschillende benaderingen voor standaardinstellingen van de browser. Eric Meyer Reset CSS bestaat al een tijdje. Zijn aanpak vernietigt veel van de browserelementen waarvan bekend is dat ze direct problemen veroorzaken. Het volgende is van zijn versie (v2.0 | 20110126) CSS 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;
}

Eric Meyer Reset CSS

Normaliseer CSS anderzijds en behandelt veel van deze afzonderlijk. Het volgende is een voorbeeld uit de versie (v4.2.0) van de code.

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

Normaliseer CSS