CSS für Beginner: 7 Tipps, die du kennen solltest
(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
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)
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.
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.
.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:
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!
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..
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 ….
Du hast die Frage schon selbst beantwortet. Zuerst kommt der Reset, dann die eigenen Stylisten.
Styles natürlich, danke Autokorrektur.
Ist ja sehr umstritten, gerade was die Performance betrifft. Bisher hatte ich das nicht so gebraucht, komischerweise.
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).
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/
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 …
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.
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/
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 …
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
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.