Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Projekt anfragen
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen

Dr. Web » Webdesign » CSS Neustart

CSS Neustart

  • Aktualisiert am 23. November 2023
  • Markus Seyfferth von Markus Seyfferth
  • Webdesign
  • Ein Kommentar

Top Agenturpartner

Werbehinweis-Icon.

Farbentour

Mettmann

OPUS Marketing

Bayreuth

immoXXL

Leverkusen

One Step

Hannover

B NEX Animation Studio

Eckental

Cloudconsult

Altenberge

Alle Agenturpartner

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:

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
/* 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 diese Info?

Gesamtbewertung: 0 / 5. Anzahl Bewertungen: 2 0

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

Die Bedeutung von Whitespace im Design

Whitespace (Weißraum oder „negativer Raum”) ist der leere Raum zwischen den Elementen einer Seite. Obwohl viele dies als Verschwendung von wertvollem Platz auf dem Bildschirm ansehen, ist der Weißraum ein wesentliches Designelement:

42 CSS Buttons mit Hover-Effekt & Code Snippets

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.

KI Mobile-first Design in 2023: Hype oder Flop für Designagenturen?

Ende 2022 sorgte die KI-Anwendung ChatGPT für Schlagzeilen. Seither ist KI ein beliebtes Buzzword und löst in der IT-Branche die gesamte Gefühlsskala von Zukunftsängste bis Euphorie aus. Wir bleiben gechillt und schauen uns an, wie Sie als Inhaber einer Designagentur von KI getriebenem Mobile-first Design profitieren. Gibt es auch Schattenseiten und Grenzen? Mal sehen.

Eine Antwort

  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 mit Maus und Hand, die sich den Finger blutig geklickt hat.

Fachmagazin für Online-Marketing. Seit 1997. Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur finden in Ihrer Nähe

  • Alle Städte
  • Augsburg
  • Berlin
  • Bonn
  • Dortmund
  • Dresden
  • Düsseldorf
  • Essen
  • Frankfurt am Main
  • Freiburg im Breisgau
  • Hamburg
  • Hannover
  • Innsbruck
  • Karlsruhe
  • Köln
  • Leipzig
  • München
  • Nürnberg
  • Stuttgart
  • Wien
  • Alle Städte
  • Augsburg
  • Berlin
  • Bonn
  • Dortmund
  • Dresden
  • Düsseldorf
  • Essen
  • Frankfurt am Main
  • Freiburg im Breisgau
  • Hamburg
  • Hannover
  • Innsbruck
  • Karlsruhe
  • Köln
  • Leipzig
  • München
  • Nürnberg
  • Stuttgart
  • Wien

Agenturleistungen

  • Beste Agenturen finden
  • Content Marketing Agentur
  • Designagentur
  • Digitalagentur
  • Drupal Agentur
  • Full-Service Agentur
  • Internetagentur
  • Local SEO Agentur
  • Marketing Agentur
  • Performance Marketing Agentur
  • Online Marketing Agentur
  • SEO Agentur
  • Shopify Agentur
  • Shopware Agentur
  • Social Media Agentur
  • TYPO3 Agentur
  • Webagentur