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

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Update: Normalizer als Standard-Lösung

Normalize.css ist mittlerweile zur Standard-Lösung geworden. Viele Open Source Projekte wie Foundation, die HTML5 Boilerplate oder HTML Bones verwenden das Stylesheet. Auch kommerzielle Software wie Dreamweaver setzt den Normalizer ein.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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

Schreibe einen Kommentar zu Valentin Antworten abbrechen

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 →