kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

7 Kommentare

  1. herrfischer

    Verfasst am 12. Juli 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 …

  2. Alex

    Verfasst am 12. Juli 2011 um 15:47 Uhr.

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

  3. Moritz Gießmann

    Verfasst am 12. Juli 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/

  4. ConnyLo

    Verfasst am 13. Juli 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.

  5. Valentin

    Verfasst am 13. Juli 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.

  6. herrfischer

    Verfasst am 14. Juli 2011 um 9: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.

  7. Hannes R.

    Verfasst am 11. Oktober 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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.