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 » CSS Neustart

CSS Neustart

CSS Neustart 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...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 20. Februar 2014
Bookmarke mich
Share on pocket

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

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

Agenturpartner

iPower AG

Berlin

Webdesign DOERRER

Frankfurt am Main

KnallBlauMedia

Hamburg

Der Informations­designer

Kaufbeuren

DAZECON – Webdesign und Marketing

Dresden

Alle Agenturpartner

Jobs

Business Development Manager

München

SEO Junior für Suchmaschinen­optimierung

Salzburg

Junior SEO Manager in München

München

API Developer für die TelemaxX Cloud

Karlsruhe

Web Development & Project Management

Remote

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.

 →   

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.

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.