Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

CSS für Beginner: 7 Tipps, die du kennen solltest

(Grafik: Shutterstock.com)

Natürlich würde das Web auch ohne CSS funktionieren – nur sähe es dann hässlich aus. Damit die Websites auch in alten Browsern korrekt angezeigt werden, müssen einige Dinge berücksichtigt werden.

Durch die Nutzung von alten Browserversionen ist das Arbeiten mit CSS nicht immer ganz einfach. Da ein einheitlicher Browserauftritt zur besseren User-Experience beiträgt, sollten diese sieben Tipps verinnerlicht werden:

CSS Reset

Webbrowser verhalten sich unterschiedlich, vor allem, wenn es ums Lesen einfacher HTML-Elemente geht. Ein CSS-Reset-Stylesheet löscht alle vom Browser vorgegebenen Stylings und setzt diese auf null. CSS-Reset-Sheets können entweder selbst erstellt oder aus vielen online verfügbaren Vorlagen kopiert werden. So könnte ein Beispiel aussehen:

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Vendor Prefixes und Fallbacks

Wenn CSS3-Features wie Animationen und Transitions verwendet werden, ist es wichtig, dass Fallback-Styles vorhanden sind, auf die zurückgegriffen werden kann. Das ist besonders bei Browsern angebracht, die CSS3 nur bedingt unterstützen. Vendor Prefixes helfen älteren oder nicht unterstützenden Browsern, die Fallbacks zu verstehen und „dolmetschen“ den Code. Hier sind die gängigsten Vendor Prefixes:

  • -webkit- (Chrome, Safari, neuere Opera-Versionen)
  • -moz- (Firefox)
  • -o- (ältere Opera-Versionen)
  • -ms- (Internet Explorer)

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

13 Reaktionen
Ko9kijh

Schon eine Weile her und ich will hier auch wirklich keine Urheberrechtsdiskussion anstoßen, aber könnte man nicht - auch wenn die Lizenz mit "none (public domain)" angegeben ist, und jeder selbst auf die Idee kommen könnte - wenigstens die Quelle des CSS-Resets angeben, wenn man ihn schon schlicht kopiert - inklusive des einen verbliebenen Kommentars? Oder einfach die fünf Kopfzeilen mitkopieren?
Quelle: http://meyerweb.com/eric/tools/css/reset/
"So könnte ein Beispiel aussehen" klingt für mich eher nach selbst gemacht.

Antworten
Timm

Hallo,

sehr hilfreicher Artikel, besten Dank!

Also die normalize.css wird ja als eine der ersten CSS-Dateien inkludiert, richtig?
Wie ist das bei den Floats, werden die Anweisungen am Anfang einer CSS verwendet (z.B. am Anfang der style.css)?

Schönen Gruß, Timm

Antworten
Florence Maurice

Da mein erster Kommentar anscheinend nicht durchkommt (gepostet um 9:47), hier noch zwei Punkte daraus ... die anderen (Reset/Normalize, IEConditionalComments) wurden schon von anderen angesprochen:

- Bezüglich float wird zum Aufheben des Floatens und zum Umschließen am häufigsten der Clearfix-Hack eingesetzt: http://nicolasgallagher.com/micro-clearfix-hack/ Das sollte m.E. erwähnt werden ..

- Bezüglich Crossbrowser: CSSPIE würde ich heute nicht mehr empfehlen. Es hat damals rechte Aufsehen erregt, wurde aber dann in der Praxis kaum verwendet, weil es Performance-Nachteile hat. Und wen interessiert heute noch der IE < 9? (Die meisten Dinge, die nachgebessert werden, betreffen den IE 8 und davor). Und falls man sich um diese alten Browser kümmert, ist eine performante Fallbacklösung besser: also lieber eckige Ecken statt runden und dafür performant :-) ... man sollte Nutzer dieser Uraltbrowser nicht zusätzlich bestrafen ...

Antworten
Florence Maurice

Mein ausführlicher Kommentar hängt irgendwie seit über einer Stunde in der Moderation.
Aber noch eine kleine Anmerkung zum im Artikel empfohlenen CSS3please, das ich mir noch mal genauer angesehen habe (früher hab ichs auch oft verwendet): Da steht am Anfang
"Update: We recommend using Autoprefixer instead of CSS3Please."
Es ist also wirklich veraltet und heute sollte man stattdessen Autoprefixer benutzen und für diejenigen, die nicht mit Grunt&Co rumspielen möchten, gibts ja die Online-Version :-)
https://autoprefixer.github.io/

Antworten
developer027343

In dem hier angegebenen Beispiel werden alle IE-Versionen, außer der IE7, angesprochen:

stimmt so nicht, der im Artikel angegebene Code schließt alle Internet Explorer Versionen über 6 aus.

Antworten
Florence Maurice

Ein paar Ergänzungen/Aktualisierungen:
- Statt reset ist heute normalize üblicher: https://necolas.github.io/normalize.css/
- Vendor-Präfixe braucht man heute viel weniger als früher. Sehr einfacher geht die Erzeugung des benötigten Codes über das Online-Tool von Autoprefixer: https://autoprefixer.github.io/ Hier kann man unten angeben, welche Browser berücksichtigt werden sollen.
- Conditional Comments: Hier heißt es im Artikel: "In dem hier angegebenen Beispiel werden alle IE-Versionen, außer der IE7, angesprochen", genau genommen sind es "alle IE-Versionen kleiner als der IE7". lt steht für "less then", also "kleiner als"
- Bezüglich float wird zum Aufheben des Floatens und zum Umschließen am häufigsten der Clearfix-Hack eingesetzt: http://nicolasgallagher.com/micro-clearfix-hack/
- Bezüglich Crossbrowser: CSSPIE würde ich heute nicht mehr empfehlen. Es hat damals rechte Aufsehen erregt, wurde aber dann in der Praxis kaum verwendet, weil es Performance-Nachteile hat. Und wen interessiert heute noch der IE < 9? (Die meisten Dinge, die nachgebessert werden, betreffen den IE 8 und davor). Und falls man sich um diese alten Browser kümmert, ist eine performante Fallbacklösung besser: also lieber eckige Ecken statt runden und dafür performant :-) ... man sollte Nutzer dieser Uraltbrowser nicht zusätzlich bestrafen ...

Antworten
John Doe

Statt eines CSS Reset, der unter anderem die Spiegelpunkte und Ziffern bei Listen entfernt, halte ich den Einsatz eines Normalizers für geeigneter. Diese Art von CSS sorgt dafür, daß die initiale Darstellung in allen Browsern identisch ist.

Beispiel: https://necolas.github.io/normalize.css/

Antworten
Torsten

Styles natürlich, danke Autokorrektur.

Antworten
Daniel

Ist ja sehr umstritten, gerade was die Performance betrifft. Bisher hatte ich das nicht so gebraucht, komischerweise.

Antworten
Andre Steudel

Für den Mehrwert den man durch die Reset Dateien bekommt ist die Performance weniger kritisch. Dadurch das die unterschiedlichen Browser die Webseite unterschiedlich rendern kann es sonst schnell zu Unterschieden kommen die hiermit schonmal grob ausgemerzt sind.
Wahrscheinlich hast du auch schon unwissentlich eine Reset Datei benutzt, da CSS Frameworks wie Bootstrap oder Foundation auch auf solche Dateien setzen (via Normalize.css).

Torsten

Du hast die Frage schon selbst beantwortet. Zuerst kommt der Reset, dann die eigenen Stylisten.

Antworten
Daniel

Wie kann ich so ein Reset CSS denn anwenden? Spielt das eine Rolle in welcher Reihenfolge die CSS eingespielt wird? Weil ich würde ja gerne die Elemente im nächsten Schritt fitt machen mit CSS..

Antworten
Volker

CSS arbeitet Step by Step (oben nach unten), also zuerst die reset CSS includen ..... danach dann deine CSS Datei include oder direkt in den Header packen .... aber wie gesagt zuerst den reset, dann deine ....

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.