Anzeige
Anzeige
Ratgeber
Artikel merken

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

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.

Von Jessy Kösterke
3 Min. Lesezeit
Anzeige
Anzeige

(Grafik: Shutterstock.com)

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

Anzeige
Anzeige

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:

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

IE-Eigenschaften

Der Internet Explorer ist bekanntlich das Sorgenkind. Wenn Probleme mit dem IE8 oder älteren Versionen auftauchen, können IE-bezogene Kommentare hinzugefügt werden. Diese haben einen Mechanismus, der spezielle IE-Versionen anspricht. Diese Kommentare, auch Bedingungen genannt, bestehen aus HTML und werden gesondert im Code vermerkt. Je nachdem, ob die Bedingung erfüllt wird oder nicht, wird die entsprechende Funktion ausgegeben. Eine ausführliche Zusammenfassung über „Conditional Comments“ findet ihr zum Beispiel bei Sitepoint.

Anzeige
Anzeige

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

<!--[if lt IE 7 ]>
<p>Only less than IE 7 will see this</p>
<![endif]-->

Floats

Floats unterbrechen den normalen Elementfluss. Konkret bedeutet das, dass die float-Eigenschaft auch auf die nachfolgenden Elemente, zum Beispiel auf ein div, img oder p, zugreifen kann. Um das zu verhindern verwendet man sogenannte „Clearfix Methoden“, von denen es zwei Varianten gibt:
Die meistens verwendete Variante ist die clear:both-Methode. Hier wird die float-Eigenschaft aufgehoben und nachfolgende Elemente werden nicht beeinflusst.

Anzeige
Anzeige

.clear {
clear: both;
}

Ein anderer Weg ist die overflow:hidden-Methode, die sich dann allerdings auf den Container bezieht.

.container {
overflow: hidden;
}

Die Arbeit mit Flexbox vereinfacht das ganze Verfahren. Wer also eher die modernere Variante anwenden will, sollte sich Flexbox mal genauer angucken.

CSS validieren

Nachdem das ganze CSS aufgesetzt wurde, sollte es einmal durch einen CSS-Validator gejagt werden. Das dient dazu, eventuellen Problemen vorzubeugen oder Fehler zu beseitigen, die zum Beispiel auf verschiedenen Browsern später ausgegeben werden könnten.

Cross-Browser-Plugins

Wie weiter oben schon erwähnt können verschiedene HTML-, CSS- und Javascript-Features unterschiedlich ausgegeben werden und verursachen unterschiedliche Seiten-Layouts. Mit Cross-Browser-Plugins können diese Funktionen übersetzt und richtig ausgegeben werden. Zu empfehlen sind:

Anzeige
Anzeige

Testing Tools

Was bringt einem das Ganze, wenn man das Ergebnis nicht testen kann? Hier kommen einige Cross-Browser-Tools ins Spiel, die unter anderem kostenlos erhältlich sind. Eine ausführliche Übersicht mit 10 verschiedenen Tools haben wir bereits in einem Artikel zusammengefasst.

Fazit

Das sind noch lange nicht alle Grundlagen, die man beherrschen sollte – vor allem im Cross-Browser-Bereich gibt es noch einiges mehr zu entdecken und verinnerlichen.

Du hast noch ein paar heiße Insider-Tipps für einen CSS-Beginner? Dann ab in die Kommentare damit!

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
13 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
Torsten

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

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).

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
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
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

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
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
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
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige