Uneinheitliche Elemente mit dicken Rändern – und das überall. Wer als Webdesigner bereits die eine oder andere Seite erstellt hat, wird sich in der Frustration und Einschränkung der eigenen Kreativität, die die Nutzung verschiedener Browser mit sich zieht, sicherlich wiedererkennen. Mit dem Befehl normalize.css kannst Du jedoch auch ohne viel technisches Know-How effektiv Abhilfe schaffen!
Inhalt
normalize.css – Was ist das eigentlich?
Normalize.css ist ein kleines CSS-Reset, das dazu beitragen kann, dass alle Browser gleich aussehen. Es wurde von Nicolas Gallagher und Jonathan Neal entwickelt, um konsistentere Layouts, visuelle Erlebnisse und Rendering über verschiedene Browser- und Gerätekonfigurationen hinweg zu gewährleisten.
Normalize.css zielt darauf ab, inkonsistente Browserstile zu beheben und Unterstützung für moderne Webtechnologien wie die HTML5-Elemente <main>, <details> und <summary> einzubauen. Der Befehl vereinheitlicht somit Elemente, die oft – je nach Browser – unterschiedlich angezeigt werden und setzt dabei allgemein akzeptierte Normen fest.
Eine kurze Anleitung zu normalize.css
Der Nutzen von normalize.css wird spätestens dann klar, wenn man nach der Erstellung seiner Seite einen kurzen Blick in den Inspector wirft: Jeder Browser erteilt jedem Element einen Rand – und dieser variiert je nach Browser. Der Zweck von normalize.css ist es, diese an backgrounds, headlines und anderen Elementen hängenden Ränder – auch margins genannt – zu vereinheitlichen bzw. gänzlich zu entfernen.
Herunterladen von normalize.css
Um dies zu bewerkstelligen, ist meist nicht viel Vorwissen zu CSS notwendig – im Gegenteil: Auch junge Programmierer oder Quereinsteiger können den Befehl problemlos anwenden! Dazu muss zunächst einmal normalize.css heruntergeladen und in einem Texteditor Deiner Wahl eingefügt werden.
Nachdem Du den Code im Editor eingefügt hast, muss die Datei im css-Ordnerverzeichnis gespeichert werden. Dabei ist es wichtig, die Datei „normalize.css“ zu benennen, um einfacher auf sie zugreifen zu können.
normalize.css im Code
Im folgenden Beispiel wird der Befehl normalize.css auf einer einfachen Homepage genutzt und vom stylesheet überschrieben.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<img class="centerImage".src="img/Bild.jpg">
</body>
</html>Es ist von besonderer Wichtigkeit, dass normalize.css über stylesheet.css eingefügt wird und auf das richtige Verzeichnis verwiesen wird. Nun musst Du nur noch speichern und die Homepage aktualisieren.
Interessantes zu normalize.css
Normalize.css als Befehl kann als Ersatz für CSS Resets wie html5 reset oder Eric Meyer’s reset verwendet werden. Es gibt jedoch einige wesentliche Unterschiede zwischen normalize.css und diesen anderen Reset-Methoden. Im Gegensatz zu anderen Resets, die Elemente verwerfen oder zurücksetzen, schlägt dieser Befehl einen Kompromiss zwischen Benutzerfreundlichkeit und Konsistenz vor.
Normalize.css wird nicht nur im Web, sondern auch in verschiedenen Content-Managementsystemen wie WordPress, Drupal, Joomla und vielen anderen eingesetzt. Dies liegt daran, dass es einfach zu implementieren ist und die Stile mühelos zwischen verschiedenen Browsern synchronisiert und konsistent hält.
normalize.css zusammengefasst
Zusammenfassend lässt sich feststellen, dass normalize.css ein sehr nützliches CSS-Reset ist, um sicherzustellen, dass Webseiten auf jedem Gerät gleich angezeigt werden. Es nimmt nicht viel Zeit in Anspruch, ist einfach zu implementieren und bietet ein höheres Maß an Konsistenz und Benutzerfreundlichkeit als alternative Resets – und nicht nur das: Normalize.css kann problemlos auch von Anfängern umgesetzt werden!
Alles was Du über normalize.css wissen solltest
Was ist normalize.css?
Normalize.css ist eine Lightweight-CSS-Bibliothek, die eine konsistentere Anzeige von HTML-Elementen auf allen Browsern erzeugt. Es vereinheitlicht die Standardeinstellungen verschiedener Browser, indem es einen Standard für die Darstellung von Elementen definiert.
Ist normalize.css oder CSS reset besser?
Normalize.css passt die Standardeinstellungen verschiedener Browser besser an Web-Standards an, während CSS reset versucht, alle Browser-Elemente auf dasselbe Niveau zu bringen. Für webkonforme Ergebnisse ist daher normalize.css die bessere Wahl, wohingegen CSS reset für Grundstil-Elemente besser geeignet ist.
Wie verlinkt man zu normalize.css?
Normalize.css muss zunächst einmal heruntergeladen und im css Ordner des eigenen Systems gespeichert werden. Um das CSS-Ordnerverzeichnis im Code anzugeben, musst Du einen <link>-Tag im Kopfbereich Deiner HTML-Seite hinzufügen. Der Tag sollte die folgende Syntax haben:
<link rel="stylesheet" type="text/css" href="Ordner/Dokumentname.css">