Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen

Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen

Viele Webentwickler beginnen ein neues Projekt mit dem Einbinden eines sogenannten CSS Resets. Darunter versteht man ein Stylesheet, was alle Browser-Layout-Standardeinstellungen auf einen gemeinsamen Nenner bringt. Viele basteln sich ihre eigenen Resets zusammen, aber diese Arbeit kann man sich auch sparen. Inzwischen existieren diverse vorgefertigte Resets, die man verwenden kann.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Florian Sander
  • 2. Februar 2009
Bookmarke mich
Share on pocket

Viele Webentwickler beginnen ein neues Projekt mit dem Einbinden eines sogenannten CSS Resets. Darunter versteht man ein Stylesheet, was alle Browser-Layout-Standardeinstellungen auf einen gemeinsamen Nenner bringt. Viele basteln sich ihre eigenen Resets zusammen, aber diese Arbeit kann man sich auch sparen. Inzwischen existieren diverse vorgefertigte Resets, die man verwenden kann.

Das Grundproblem besteht darin, dass die verbreiteten Browser alle ein wenig unterschiedliche Vorstellungen davon haben, wie ein Element denn aussehen soll, solange es vom Entwickler nicht explizit per CSS beschrieben wurde. So können beispielsweise Listeneinrückungen oder Überschriften-Abstände von Browser zu Browser variieren. Da kann es leicht passieren, dass eine Webseite in einem anderen Browser plötzlich anders aussieht, weil man sich auf eine inkonsistente Standardeinstellung verlassen hat, ohne sie nochmals explizit festzulegen. CSS-Resets sollen einem diesen Abgleich von Inkonsistenzen ersparen, indem die Standardwerte der Browser mit einem neuen, meist sehr einfachen, Standardwert überschrieben werden. Auf dieser Grundlage aufbauend kann man dann seine eigene Gestaltung aufbauen und hat dabei dann hoffentlich weniger mit Inkonsistenzen zu kämpfen.

Der „Klassiker“ unter den CSS-Resets ist folgendes schlichtes Stylesheet, das sämtliche Außen- und Innenabstände auf Null setzt:

* {
margin: 0;
padding: 0;
}

Doch auch komplexere Varianten werden verwendet. Die Yahoo! Interface Library (YUI) bietet ein Reset-Stylesheet, das wesentlich weiter geht. Überschriften und Text erhalten die gleiche Größe und Schriftstärke. Nicht einmal strong-Elemente werden noch hervorgehoben. Auf einer Beispielseite kann man das vereinheitlichte Ergebnis bewundern. Als Entwickler wird man so gezwungen wirklich jedes Element bewusst zu gestalten, hat dafür aber eine konsistente Erscheinung über die verschiedenen Browser-Familien hinweg.

Ebenfalls verbreitet und ähnlich radikal ist das Reset CSS von Eric Meyer. Dieses ist nicht zum blinden übernehmen gedacht, sondern soll vom anwendenden Entwickler noch um Feinheiten wie die bevorzugte Hintergrundfarbe oder Ähnliches ergänzt werden. Dazu sind im Stylesheet diverse Kommentare platziert, die den Entwickler an die Anpassung erinnern sollen. In einer Variante wurde dieses Stylesheet auch schon zuvor bei Dr. Web ausführlich besprochen (siehe „CSS Neustart“ von Andreas Zwinkau).

Eine Art Zwischenstufe zwischen den extremeren Ansätzen und dem eingangs zitierten simplen Stylesheet bietet eine Variante von Ed Eliot, die nach eigener Aussage nur die Elemente betrifft, die er selbst am häufigsten zurücksetzen muss. Auch hier gibt es eine Beispielseite.

Wer die erwähnten Stylesheets nicht erst herunterladen bzw. kopieren möchte um sie auszuprobieren, kann sie auch direkt über css-reset.com einbinden. Diese Webseite hostet alle oben beschriebenen Stylesheets über Googles App Engine und verspricht dadurch hohe Verfügbarkeit und schnelle Zugriffszeiten:

Eric Meyers Stylesheet in 648 Bytes:
<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />
YUI Reset CSS in 483 Bytes:
<link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" />
Ed Eliots Variante in 380 Bytes:
<link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />
Das schlichte *-Reset in 23 Bytes:
<link href="http://www.css-reset.com/css/everything.css" media="screen, projection" rel="stylesheet" type="text/css" />

Yahoos YUI Reset CSS kann man auch direkt von den Yahoo Servern beziehen:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">.

Bei fertigen Projekten empfiehlt es sich allerdings, die Stylesheets selbst zu hosten. Jede von extern eingebundene Ressource stellt schließlich ein Ausfallrisiko dar, vor allem langfristig gesehen. Googles App Engine ist – Überraschung – ein Beta-Produkt. Auch ob css-reset.com überhaupt dauerhaft dort residieren wird, lässt sich nicht mit Sicherheit voraussagen. YUI ist schon etablierter, aber auch dort scheinen die Vorteile einer externen Einbindung nicht wirklich das Risiko zu rechtfertigen. Im Vergleich zu den zahllosen anderen Daten, die der eigene Webserver zuverlässig liefern muss, fällt eine weitere kleine CSS-Datei nun wirklich nicht ins Gewicht.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Florian Sander

Florian Sander

konzipiert, entwickelt, implementiert und betreibt Software-Produkte seit über 20 Jahren. Sein neuestes Projekt ist Focality, eine App, die hilft, Dein Leben bewusst zu gestalten und Deine Ziele zu erreichen.

Agenturpartner

Optimerch GmbH

Dortmund

Critch GmbH – Immobilienkanzlei FREITAG®

München

Khoa Nguyen – Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

München

SEO Galaxy

Udler

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Alle Agenturpartner

Jobs

SEA Manager in München

München

SEO Manager – Vollzeit

Remote

Junior Online Marketing Manager

München

Media Manager in München

München

Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Diese CSS-Selektoren sollten Sie kennen

Im CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

 →   

41 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

 →   

0 Antworten zu „Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen“
— was ist Deine Meinung?

  1. Arie sagt:
    4. August 2010 um 16:10 Uhr

    Auch wenn hier viele User die Einbindung externer Stylesheets und JavaScript-Dateien für gewagt oder gar kritisch halten, bietet diese doch klare Vorteile: Externe Links/Dateien (wie zum Beispiel Google jQuery oder auch YUI) werden bei den meisten Besuchern aus dem Cache geladen, da hunderte oder gar tausende Seiten diese Dateien verwenden. Zusätzlich wird durch den Verweis auf eine anderen Domain die Anzahl der möglichen parallelen Downloads erhöht.

    Letztendlich sollten Sie selbst entscheiden, ob Sie der Verfügbarkeit der Google- und Yahoo-Server im Gegensatz zu Ihrem eigenen Hoster vertrauen. Wer es ganz genau machen möchte, kann die Verfügbarkeit der Dateien serverseitig prüfen und als Fallback eine lokale Datei einbinden 😉

    Antworten
  2. Bärbel Loy sagt:
    31. Juli 2010 um 11:40 Uhr

    Eine externe Einbindung halte ich auch angesichts einer serverseitigen Ausfalls für recht bedenklich und mitunter auch gewagt. Auch weiß man wirklich nicht, ob die Styles sich zukünftig ändern oder vielleicht die Adressierung geändert wird.

    Antworten
  3. Scream sagt:
    5. Februar 2009 um 22:01 Uhr

    Ich habe auch schon oft gelesen, dass vor allem das benutzen des legendären „* {margin: 0; padding: 0;}“ die Parsezeit des Browsers erhöhen soll.
    Heutzutage könnte man das natürlich vernachlässigen.

    Wenn man aber sowieso alle Werte brav setzt kann man sich ein Reset trotzdem getrost sparen…

    Antworten
  4. hosianna sagt:
    3. Februar 2009 um 2:15 Uhr

    @Manuel

    600 Byte, nicht 600 Kilobyte!

    Antworten
  5. Manuel sagt:
    2. Februar 2009 um 23:36 Uhr

    @Beta: Ich meinte jetzt keinen Serverlastigen Overkill.
    Nur sind 600KB die bei jedem Seitenaufruf zusätzlich(!) zum eigenen CSS geladen werden – wenn man davon ausgeht, dass alle zurückgesetzten Werte nochmals überschireben werden – doch ein Batzen wie ich finde.
    Wenn mans richtig macht, sollten nur noch etwa ein Drittel übrig bleiben. Alles jetzt mal grob von bisherigen Handhabungen geschätzt.

    Antworten
  6. Bata sagt:
    2. Februar 2009 um 16:15 Uhr

    @Manuel:
    Zu Deinem Overkill Szenario mit dem Universalselektor findet man im Web leider nichts. Hast Du Quellen, die das belegen?

    @Mario:
    >> Vielleicht sollte man noch erwähnen, dass der einsatz dieses „schlichten“ Reset-Stylesheets absolut unempfehlenswert ist, da dadurch z.B. die browserspezifischen Formular paddings, margins und borders überschrieben werden, was häufig nicht erwünscht ist. <<

    Ok, wenn Du auf Formulare stehst, die in jedem Browser anders aussehen gebe ich Dir recht, aber wer will sowas schon!

    @Helen:
    Wie gesagt, der Reset besteht bei mir aus 5 Zeilen und die liegen mit im Haupt-CSS… also muss ich auch keine zusätzliche Datei laden.

    Antworten
  7. Helen sagt:
    2. Februar 2009 um 13:21 Uhr

    „Warum man sowas extern einbinden muss ist mir etwas unverständlich. Drei Zeilen reichen wirklich aus.“

    –> Hat man eine globale Reset-Datei für die ganze Website, wird man die Resets in einer Datei einbinden und die dann in alle Dokumente einbinden. Da noch die eigentliche CSS-Datei hinzukommt und vielleicht noch Java, überschreitet man so die Grenze von zwei Dateien, die zugleich von einem Server geladen werden. Liegt die Reset-Datei auf dem Yahoo-Server, geht es also schneller. Bringt aber auch nicht die Welt. Hat man aber viele Dateien implementiert, kann man das schon gezielt nutzen und zB die jQuery-Basis-Datei über Google einbinden.

    Antworten
  8. Ralph sagt:
    2. Februar 2009 um 12:32 Uhr

    Ich wußte gar nicht, dass ich ein Klassiker bin. Jedenfalls nutze ich die klassische Variante des CSS-Resets.

    Bei externer Einbindung wäre ich persönlich sehr vorsichtig, da ich nicht weiß, ob sich irgendetwas an diesen Stylesheets geändert hat. Mit der klassischen Variante weiß ich jedenfalls, wo sie liegt und was genau der Inhalt ist.

    Ralph

    Antworten
  9. Manuel sagt:
    2. Februar 2009 um 12:29 Uhr

    Generell ist vom *-Reset abzuraten, da jedes Element einer Seite durch diesen Selector laufen muss. Das ist ein absoluter overkill.

    Ich persönlich verwende Eric Meyer’s Reset in abgewandelter Form. Es ist aber auch davon abzuraten, einen Reset zu verwenden, um dann die gleichen Werte mit eigenen CSS Stilen zu überschreiben.
    Sobald man einen Stil setzt, sollte man den Reset-Wert aus dem Reset Stylesheet löschen.

    Hier ist „Setzen, nicht überschreiben“, die Devise!

    Gruß
    Manuel

    Antworten
  10. Mario sagt:
    2. Februar 2009 um 12:09 Uhr

    Vielleicht sollte man noch erwähnen, dass der einsatz dieses „schlichten“ Reset-Stylesheets absolut unempfehlenswert ist, da dadurch z.B. die browserspezifischen Formular paddings, margins und borders überschrieben werden, was häufig nicht erwünscht ist.

    Antworten
  11. Bata sagt:
    2. Februar 2009 um 11:40 Uhr

    Ich kann noch empfehlen, sofern gewünscht, im Universal-Selektor die Schrift-Familie zu setzen. Textareas halten sich ja bekanntlich nicht an den im Body-Tag benutzten Font…

    Warum man sowas extern einbinden muss ist mir etwas unverständlich. Drei Zeilen reichen wirklich aus.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.