Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

normalize.css statt CSS-Reset

Webbrowser haben ja bekanntlich die Eigenschaft CSS-Stile unterschiedlich zu rendern. Damit eine Website trotzdem in allen Browsern gleich – oder zumindest sehr ähnlich – aussieht, verwenden wir daher in der Regel einen so genannten CSS-Reset. Das Projekt Normalize.css geht einen etwas anderen Weg und bietet eine solide Ausgangsbasis für Webprojekte.

Was ist der Unterschied zum CSS-Reset?

Ein gewöhnlicher CSS-Reset wird an den Anfang des CSS-Dokuments gesetzt und dient dazu generell alle HTML-Eigenschaften auf Null zu setzen. Somit gelten für alle Browser erstmal die selben Grundvoraussetzungen. Anschließend müssen jedoch sehr viele Eigenschaften erneut vergeben werden, was Zeit kostet und den Quellcode aufbläst.

Normalize.css verfolgt eine etwas andere Philosophie. Es werden nicht pauschal alle Eigenschaften resettet, sondern die Eigenschaften werden genormt. Die Browser verhalten sich also nach dem Einbau eines Normalizers alle gleich – aber sinnvolle Voreinstellungen wie Abstände vor und nach Absätzen, Listenpunkte, fette und kursive Textauszeichnungen etc. gehen nicht verloren.

Normalize.css ist mittlerweile zur Standard-Lösung geworden. Viele Frameworks, kommerzielle Software und Open Source-Projekte verwenden das Stylesheet.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. Hannes R.
    schrieb am 11.10.2017 um 17:13 Uhr:

    Komisch dass bei dem Thema gar nicht „unser“ Jens Meiert auftaucht. Siehe z.B. https://meiert.com/en/blog/stop-using-resets/ (wobei das ein neuerer Artikel zum Thema ist). Oder die Chrome-Erweiterung: https://chrome.google.com/webstore/detail/reset-style-sheet-highlig/lnekfhlkfibaamhifbfmcobiglhcbmbl … Ich habe schon 2008 aufgehört, Resets und Normalizr zu verwenden. Man braucht das alles nicht.

    Antworten
  2. 25 neue Tools, Scripte & Frameworks für Webdesigner – Januar 2013 | kulturbanause blog
    schrieb am 21.01.2013 um 08:51 Uhr:

    […] Ihr CSS-Vorlagen wie normalize.css & Co? Mit css3base könnt ihr euch ein globales Stylesheet aus verschiedenen populären […]

    Antworten
  3. herrfischer
    schrieb am 14.07.2011 um 09:39 Uhr:

    @ConnyLo: der verfasser sagt ja selbst man soll es nach bedarf entrümpeln. ich werde mir mal einen mix aus dem und erics reset zusammenbasteln.

    Antworten
  4. Valentin
    schrieb am 13.07.2011 um 22:49 Uhr:

    Klingt interessant, hab ich zuvor noch nichts davon gehört. Müsste ich mir mal genauer anschauen.

    Bisher habe ich nur resets benutzt, die ja wirklich notwendig sind (außer man nutzt das hier).
    Allerdings sehe ich das ähnlich wie Moritz Gießmann. Ich habe lieber die vollständige Kontrolle.

    Antworten
  5. ConnyLo
    schrieb am 13.07.2011 um 10:28 Uhr:

    Wirklich interessant. Allerdings würde ich bei grober Durchsicht des CSS die Hälfte der Deklarationen nicht brauchen. Das gute alte Browser Reset von Eric Meyer (bei mir auch abgespeckt) tuts noch gut.

    Antworten
  6. Moritz Gießmann
    schrieb am 12.07.2011 um 16:30 Uhr:

    Ich halte Resets für die bessere Wahl. Warum? Ich mag 100% Kontrolle. Nichts was ich nicht angefasst habe ist gestylt.
    @Alex: das geht doch online ganz schnell http://www.csscompressor.com/

    Antworten
  7. Alex
    schrieb am 12.07.2011 um 15:47 Uhr:

    Sehr schön. Gibt es die CSS auch komprimiert?

    Antworten
  8. herrfischer
    schrieb am 12.07.2011 um 10:02 Uhr:

    sehr schön, ich liebe solche spielzeuge :)

    vor allem das hier:

    button::-moz-focus-inner,
    input::-moz-focus-inner {
    border: 0;
    padding: 0;
    }

    hat mir sehr dabei geholfen input-felder und buttons auf eine höhe zu bringen. rest wird noch genauer untersucht …

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →