{"id":153,"date":"2015-06-13T15:45:53","date_gmt":"2015-06-13T13:45:53","guid":{"rendered":"https:\/\/www.saskialund.de\/?p=153"},"modified":"2024-08-13T14:40:44","modified_gmt":"2024-08-13T12:40:44","slug":"normalizar-css-que-es","status":"publish","type":"post","link":"https:\/\/isla-stud.io\/es\/css\/normalize-css-was-ist-das\/","title":{"rendered":"Normalize.css - \u00bfQu\u00e9 es?"},"content":{"rendered":"\n

Als Webentwicklerin besch\u00e4ftige ich mich regelm\u00e4\u00dfig mit der Herausforderung, konsistente Layouts \u00fcber verschiedene Browser hinweg zu gew\u00e4hrleisten. Dabei bin ich immer wieder auf Normalize.css<\/strong> gesto\u00dfen \u2013 ein Werkzeug, das sich in den letzten Jahren als unverzichtbar f\u00fcr die moderne Webentwicklung etabliert hat. Lassen Sie uns tiefer in die Materie eintauchen und herausfinden, warum Normalize.css so m\u00e4chtig ist und wie Sie es optimal nutzen k\u00f6nnen.<\/p>\n\n\n\n

Was ist Normalize.css und warum ist es wichtig?<\/h2>\n\n\n\n

Normalize.css<\/strong> ist eine CSS-Bibliothek, die von Nicolas Gallagher<\/a> und Jonathan Neal<\/a> entwickelt wurde, um die Standardstile von HTML-Elementen \u00fcber verschiedene Browser hinweg zu normalisieren. Dabei geht es darum, die Unterschiede in der Standarddarstellung von Elementen zu beseitigen, ohne n\u00fctzliche Browser-Defaults zu l\u00f6schen. Dies steht im Gegensatz zu klassischen CSS-Resets, die alle Stile aufheben und den Entwickler\/-innen die Aufgabe \u00fcberlassen, jedes Element von Grund auf neu zu gestalten.<\/p>\n\n\n\n

Das Normalize.css-Stylesheet wird aktuell in diversen Projekten verwendet: Twitter Bootstrap<\/a>, HTML5 Boilerplate<\/a>, GOV.UK<\/a>, Rdio<\/a>, CSS Tricks<\/a>, SoundCloud<\/a> sowie in vielen weiteren Frameworks, Toolkits, und Websites.<\/p>\n\n\n\n

Das Stylesheet unterst\u00fctzt eine riesige Bandbreite an Browsern (mobile Browser eingeschlossen) und beinhaltet CSS Regeln zur Normalisierung von HTML5 Elementen, Typografien, Listen, eingebettete Inhalte, Formulare und Tabellen.<\/p>\n\n\n\n

Warum ist das wichtig?<\/strong> Browser-Standardstile sind oft inkonsistent, was dazu f\u00fchrt, dass eine Website in verschiedenen Browsern unterschiedlich aussehen kann. Normalize.css hilft dabei, diese Inkonsistenzen zu beseitigen, indem es Standardstile vereinheitlicht und gleichzeitig n\u00fctzliche Defaults erh\u00e4lt. Dies spart nicht nur Zeit, sondern gew\u00e4hrleistet auch eine konsistentere Benutzererfahrung \u00fcber verschiedene Ger\u00e4te und Browser hinweg.<\/p>\n\n\n\n

Tiefergehende Funktionen von Normalize.css<\/h3>\n\n\n\n

Normalize.css bietet eine Vielzahl von Vorteilen, die \u00fcber die blo\u00dfe Normalisierung hinausgehen:<\/p>\n\n\n\n

    \n
  1. Browser-Konsistenz:<\/strong> Es k\u00fcmmert sich um viele kleinere, aber entscheidende Unterschiede in der Darstellung von Elementen zwischen verschiedenen Browsern, wie z.B. die Handhabung von input<\/code>-Feldern, button<\/code>-Stilen und table<\/code>-Layouts. Dies reduziert den Aufwand f\u00fcr das Debugging und sorgt f\u00fcr eine einheitliche Basis.<\/li>\n\n\n\n
  2. Erweiterung der HTML5-Unterst\u00fctzung:<\/strong> HTML5 brachte viele neue Elemente und Attribute mit sich, die in \u00e4lteren Browsern oft nicht korrekt dargestellt werden. Normalize.css stellt sicher, dass diese Elemente in allen g\u00e4ngigen Browsern konsistent und korrekt dargestellt werden. Beispielsweise wird das summary<\/code>-Element, das f\u00fcr die Verwendung in details<\/code>-Elementen vorgesehen ist, in \u00e4lteren Browsern einheitlich dargestellt.<\/li>\n\n\n\n
  3. Optimierte Typografie:<\/strong> Normalize.css enth\u00e4lt auch typografische Anpassungen, die sicherstellen, dass Text auf allen Plattformen einheitlich und gut lesbar ist. Dies umfasst die Einstellung von line-height<\/code>, die Standardisierung der font-size<\/code> und die Entfernung unn\u00f6tiger Margen bei Standard-Text-Elementen.<\/li>\n\n\n\n
  4. Formulare und Eingabeelemente:<\/strong> Einer der problematischsten Bereiche in der Webentwicklung ist die Darstellung von Formularelementen. Verschiedene Browser handhaben diese Elemente sehr unterschiedlich, was zu erheblichen Unterschieden im Erscheinungsbild f\u00fchren kann. Normalize.css normalisiert diese Stile, indem es konsistente Basisstile f\u00fcr input<\/code>, textarea<\/code>, select<\/code> und button<\/code>-Elemente bereitstellt.<\/li>\n\n\n\n
  5. Modularer Aufbau:<\/strong> Der Code von Normalize.css ist in gut dokumentierte, separate Abschnitte unterteilt. Dies erm\u00f6glicht es Ihnen, gezielt einzelne Teile zu verwenden oder bei Bedarf wegzulassen. Wenn Sie beispielsweise wissen, dass Ihre Website keine Formulare verwendet, k\u00f6nnen Sie diesen Abschnitt problemlos auslassen, was die Ladezeit Ihrer Website weiter optimiert.<\/li>\n<\/ol>\n\n\n\n

    Normalisieren oder Reset?<\/h2>\n\n\n\n

    Die ausf\u00fchrliche Besch\u00e4ftigung mit der Frage wie sich ein normalize.css-Stylesheet und der herk\u00f6mmliche CSS-Reset unterscheiden, lohnt sich:<\/p>\n\n\n\n

    \n

    \u201eDas normalize.css bewahrt n\u00fctzliche Standardstile.\u201d<\/p>\n<\/blockquote>\n\n\n\n

    Der Reset erreicht einen homogenen visuellen Stil, indem die Standardstile f\u00fcr nahezu alle Elemente w\u00f6rtlich platt gemacht werden. Im Gegensatz dazu, bewahrt die normalize.css viele n\u00fctzliche Browser-Standardstile. Das bedeutet, dass man all die Stile der allgemeinen typografischen Elemente nicht neu deklarieren muss.<\/p>\n\n\n\n

    Wenn einem Element sich unterscheidende Standardstile in unterschiedlichen Browsern zugeordnet wird, zielt die normalize.css darauf ab, diese Stile m\u00f6glichst konsistent und konform mit modernen Standards zu gestalten.<\/p>\n\n\n\n

    \n

    \u201eNormalize.css korrigiert allgemeine Bugs.\u201d<\/p>\n<\/blockquote>\n\n\n\n

    Allgemeine Bugs in Desktop- und Mobilbrowsern, die ausserhalb des Reset-Geltungsbereichs liegen, werden korrigiert. Dies schliesst die display-Regeln f\u00fcr HTML5 Elemente, die font-size<\/code>-Korrektur bei vorformatiertem Text, SVG \u00dcberlappungen in IE9 und viele plattform- und browser\u00fcbergreifende Bugs bei Formularen mit ein.<\/p>\n\n\n\n

    Im Folgenden zum Beispiel sehen Sie, wie das normalize.css-Stylesheet den neuen HTML5 input-Attributwert \"search\"<\/code> des Attributs type browser\u00fcbergreifend konsistent und gestaltbar macht:<\/p>\n\n\n\n

    \/**\n* 1. Addresses appearance set to searchfield in S5, Chrome\n* 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)\n*\/\n\ninput[type=\"search\"] {\n  -webkit-appearance: textfield; \/* 1 *\/\n  -moz-box-sizing: content-box;\n  -webkit-box-sizing: content-box; \/* 2 *\/\n  box-sizing: content-box;\n}\n\n\/**\n* Removes inner padding and search cancel button in S5, Chrome on OS X\n*\/\n\ninput[type=\"search\"]::-webkit-search-decoration,\ninput[type=\"search\"]::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}<\/pre>\n\n\n\n
    Mit einem Reset gelingt es h\u00e4ufig nicht, Webbrowser auf ein gleichm\u00e4\u00dfiges Level zu bringen, wenn es darum geht, wie ein Element angezeigt werden soll. Dies trifft besonders auf Formulare zu. Ein Bereich, wo das normalize.css-Stylesheet eine wesentliche Hilfe darstellt.<\/p>\n\n\n\n
    \n
    \u201eNormalize.css “m\u00fcllt” Debug-Tools nicht zu.\u201d<\/p>\n<\/blockquote>\n\n\n\n
    Wenn ein normalize.css-Stylesheet verwendet wird, tritt dieses Ph\u00e4nomen nicht in solchem Ausma\u00df auf, weil gezielte Stile angesprochen werden und multiple Selektoren nur sehr zur\u00fcckhaltend in den Regels\u00e4tzen angewendet werden.<\/p>\n\n\n\n
    \"normalize
    Eine wohlbekannte Ansicht im Browser Debug-Tool bei der Verwendung eines CSS-Reset<\/figcaption><\/figure>\n\n\n\n
    \n
    \u201eNormalize.css ist modular verwendbar.\u201d<\/p>\n<\/blockquote>\n\n\n\n
    Das Projekt wurde in relativ unabh\u00e4ngige Sektionen heruntergebrochen. So ist es einfach zu erkennen, welche Elemente spezifische Stile ben\u00f6tigen. Desweiteren erlaubt es das Entfernen einer Sektion (bspw. die Normalisierung der Formulare), wenn bekannt ist, dass die eigene Website die definierten Regeln niemals ben\u00f6tigen wird.<\/p>\n\n\n\n
    \n
    \u201eNormalize.css verf\u00fcgt \u00fcber eine ausf\u00fchrliche Dokumentation.\u201d<\/p>\n<\/blockquote>\n\n\n\n
    Der normalize.css-Code fundiert auf methodischen Tests und genauen browser\u00fcbergreifenden Untersuchungen. Der Code ist innerhalb der Datei stark dokumentiert und im Github Wiki noch weitergehend beschrieben. Man kann also genau recherchieren was welche Codezeile “macht”, warum sie eingef\u00fcgt wurde, welche Unterschiede es von Browser zu Browser gibt und das Durchf\u00fchren eigener Tests wird so erheblich vereinfacht.<\/p>\n\n\n\n
    Das Projekt m\u00f6chte dabei helfen, aufzukl\u00e4ren wie Browser standardm\u00e4\u00dfig Elemente darstellen und es einfacher machen Verbesserungen beizutragen.<\/p>\n\n\n\n
    Best Practices f\u00fcr die Integration von Normalize.css<\/h2>\n\n\n\n
    Zun\u00e4chst installieren oder laden Sie das normalize.css-Stylesheet von GitHub herunter<\/a>. Es gibt diverse M\u00f6glichkeiten um Normalize.css effektiv zu nutzen. Sie sollten folgende Vorgehensweisen beachten:<\/p>\n\n\n\n
      \n
    1. Anpassung an Projektanforderungen:<\/strong> Nutzen Sie Normalize.css als Grundlage und passen Sie es an Ihre spezifischen Projektanforderungen an. Dies bedeutet, dass Sie die Datei als Startpunkt f\u00fcr Ihr eigenes Grund-CSS verwenden und bei Bedarf \u00fcberschreiben.<\/li>\n\n\n\n
    2. Unver\u00e4nderte Integration:<\/strong> Alternativ k\u00f6nnen Sie Normalize.css unver\u00e4ndert in Ihr Projekt einbinden und dann spezifische Stile in einer separaten CSS-Datei anpassen. Wichtig ist, dass Ihr eigenes Stylesheet nach der Einbindung von Normalize.css geladen wird, damit Ihre \u00c4nderungen die Normalisierung \u00fcberschreiben k\u00f6nnen.<\/li>\n\n\n\n
    3. Optimierte Ladezeiten:<\/strong> Achten Sie darauf, nur die Teile von Normalize.css zu verwenden, die Sie wirklich ben\u00f6tigen. Der modulare Aufbau erleichtert es, unn\u00f6tige Teile zu entfernen und so die Ladezeit Ihrer Website zu optimieren.<\/li>\n<\/ol>\n\n\n\n
      Unterst\u00fctzte Browser<\/h2>\n\n\n\n