Wat is 'normalize' in CSS?

normalize.css of vergelijkbare oplossingen qua functionaliteit (bijvoorbeeld Reset CSS) worden gebruikt om de standaardstijlen die verschillen tussen browsers te resetten of te normaliseren. Dit zorgt voor een voorspelbaardere en consistente weergave van elementen op verschillende platforms.

Belangrijkste verschillen tussen normalize.css en Reset CSS:

• Reset CSS: Zet de stijlen van alle elementen terug naar het minimum (bijvoorbeeld, verwijdert marges, randen en typografie). Dit is handig voor het maken van een volledig aangepaste ontwerp, maar vereist handmatig toevoegen van veel stijlen voor standaard elementen (lijsten, formulieren, etc.).
• normalize.css: Corrigeert afwijkingen in de standaardstijlen, terwijl het nuttige standaardstijlen behoudt (bijvoorbeeld typografie voor koppen, marges voor lijsten). Dit minimaliseert de noodzaak om later stijlen te overschrijven.

Voorbeelden van normalisatie:

• Eenduidige weergave van <h1>-<h6> op verschillende browsers.
• Reset van margin en padding voor elementen zoals body.
• Correcties voor verschillen in de weergave van formulieren en knoppen.

/* Voorbeeld uit normalize.css voor body */
body {
  margin: 0; /* Verwijdert de standaard marge */
}

/* Voorbeeld uit normalize.css voor h1 */
h1 {
  font-size: 2em; /* Stelt de standaard grootte in */
  margin: 0.67em 0; /* Stelt de standaard marges in */
}

Kortom, het gebruik van normalize.css helpt problemen met browsercompatibiliteit in de vroege ontwikkelingsfasen te voorkomen en creëert een stabielere basis voor verdere styling.