Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS Neustart

CSS Neustart

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 20. Februar 2014

Inhaltsverzeichnis

von Andreas Zwinkau
Durch eine kleine CSS-Datei gehören kleine Unterschiede zwischen Browsern und sogar der ein oder andere Bug der Vergangenheit an. Einfach einbinden und einige Sorgen weniger haben.

Wozu ein Neustart?

Viele CSS-Schreiber beginnen ihre Stylesheets mit einem obligatorischen *{padding:0;margin:0}. Die Browser haben unterschiedliche Einstellungen und so startet man von Grund auf neu. Vor allem für den Internet Explorer ist auch wichtig *{font-size:101%}, damit dieser ordentliche Schriftgrößen anzeigt und nicht manchmal mikroskopisch klein wird.
Ich benutze für mein CSS immer eine extra Datei reset.css. Sie war ursprünglich von Erik Meyer geklaut, wurde aber inzwischen überarbeitet und verfeinert. Diese Datei werde ich in diesem Artikel vorstellen und erläutern:

center, isindex, menu, dir,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 101%;
font-family: inherit;
font-variant: inherit;
vertical-align: baseline;}

Die erste Frage ist meistens, warum muss ich denn alle Elemente aufzählen? Ob ich nicht *{…} kennen würde? Doch. Der Grund ist, dass ich input, textarea und select nicht verändern will, damit sie das systemeigene Aussehen behalten.
Genauso fehlen font-, u-, b- und i-Tags. Diese haben keine semantische Bedeutung und sollten ihre darstellerische Bedeutung behalten. Ähnlich verhält es sich mit dem a-Tag, dessen Unterstreichung man eher als User Interface denn als Design ansieht.

Kein Standarddesign

Man beachte, dass die Idee hinter diesen Einstellung nicht ist, ein gutes standardisiertes Aussehen vorzugeben. Im Gegenteil, das Aussehen wird absichtlich schlecht gemacht, damit der Designer daran erinnert wird, eigene Einstellungen zu setzen.
Aus dem selben Grund macht es auch nichts aus, dass der Internet Explorer die inherit-Werte weiter oben nicht kennt. Dieses Stylesheet erwartet, dass der Designer später sowieso irgendwelche Werte setzen wird.
In diesem Sinne noch ein paar Anweisungen mehr:

/* Remember to define focus styles! */
:focus { outline: 0px }

Die :focus sind notwendig, wenn der Besucher per Tab durch die Links auf der Seite schalten will. Aus Accessability-Gründen sollte man nicht vergessen hier noch etwas anzugeben.

body {
line-height: 1;
color: black;
background: white;}
ol, ul { list-style: none }
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;}
caption, th, td {
text-align: left;
font-weight: normal;}

Nicht überall ist schwarzer Text auf weißem Hintergrund die Grundlage und es gibt viele Websites, die dann sehr seltsam aussehen, weil sie das annehmen. Tabellen sind hiermit unsichtbar.

blockquote:before, blockquote:after,
q:before, q:after {content: none}
blockquote, q {quotes: none}

Wie man mit den automatischen Redezeichen umgeht, ist auch nicht einheitlich unter den Browsern. Mit diesen Anweisungen wird es einheitlich überall entfernt.

ul, ol, dl {position: relative}

Hiermit wird ein Bug in manchen Internet Explorer-Versionen repariert und es gibt keine negativen Auswirkungen in anderen Browsern, die mir bekannt sind.

html {overflow: scroll}

Wenn man ein zentriertes Layout baut, das auf manchen Seiten ins Browserfenster passt und auf manchen Seiten nicht, dann „springt“ die Seite hin und her. Je nachdem, ob ein Scrollbalken angezeigt wird, ändert sich die Breite der Anzeige und damit die Position des zentrierten Elements.

Benutzung

Die Benutzung meiner Stylesheet-Datei ist denkbar einfach. Erstens herunterladen und zweitens zu Beginn einer neuen CSS-Datei einfach folgende Zeile schreiben:

@import url("reset.css");

Anschließend darf man dann nach Herzenslust eigene Regeln angeben. Meine Empfehlung ist allerdings, nicht einfach meine Datei blind zu verwenden. Ich entwickle sie selbst ständig weiter und die Chance ist groß, dass sich die verlinkte Datei bereits von dem hier eingebetteten CSS unterscheidet. Man sollte diese Datei den eigenen Bedürfnissen und Verwendungen anpassen.

Nutzen

Es mag einem komisch vorkommen, dass man sich hier extra Arbeit macht, weil man ja nun alle Textalemente extra designen muss. Meine Erfahrung ist, dass ich mit diesem CSS-Neustart Zeit sparen kann. Man muss weniger Fehler reparieren, in der Phase, in der man das Design in verschiedenen Browsern testet. Man ist sehr viel näher an dem Ideal-CSS nach Standard, statt nach Browsern zu schreiben. ™
Andreas Zwinkau studiert Informatik an der Universität Karlsruhe und arbeitet als freiberuflicher Webdesigner.

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Ads Masters Erkelenz Amazon SEO Agentur.

AdsMasters GmbH

Düsseldorf

Sparkman webdesign Frankfurt.

Webdesign Frankfurt | Sparkm4n

Dillenburg

Zwei N als Logo für die Niel Neumann Online Marketing Agentur.

Niels Neumann Online Marketing

Limburgerhof

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

360 grad konzept logo werbeagentur hannover.

Werbeagentur Hannover | 360 Grad Konzept

Hannover

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Eine Antwort zu „CSS Neustart“
— was ist Deine Meinung?

  1. Carsten sagt:
    4. Februar 2009 um 14:08 Uhr

    Hallo Andreas,
    Danke für Deine Verfeinerungen. Ich habe bisher auch immer auf den Reset von Eric Meyer zurück gegriffen, und wollte mich heute (vor dem nächsten großen Coup) mal auf den neusten Stand bringen, was die Reset-Welt mittlerweile zu bieten hat.
    Gerne würde ich Dein Stylesheet sofort ausprobieren, aber es mir zeilenweise zu kopieren halte ich schon für ein wenig umständlich. Ich mache es jetzt trotzdem, aber für alle die nach mir kommen, könntest Du es ja irgendwo direkt verlinnken. Das wär doch toll.
    Liebe Grüße, Carsten

    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.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

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

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑