Schnell können CSS-Dateien ziemlich unübersichtlich werden, es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. So wird beispielsweise mehrmals die Eigenschaft margin-top zugewiesen und der Wert dadurch einfach überschrieben. Das verursacht oft überflüssigen und nutzlosen Code, der sich selbst mit firebug oder ähnlichen Tools nur noch schwer warten lässt.
Mehrmals zugewiesene Eigenschaften werden einfach überschrieben, dies kann sehr praktisch sein, aber auch die Suche nach der Eigenschaft, die die gewünschte Darstellung nun “wirklich“ bewirkt, deutlich eschweren. Da CSS-Dateien mit über 1000 Zeilen und etlichen Hacks keine Seltenheit sind, lässt sich eine gewisse Unübersichtlichkeit natürlich nicht immer vermeiden, jedoch kann der Code durch Kurzschreibweisen deutlich optimiert werden. Die Vorteile liegen auf der Hand:
- übersichtlicher
- einfacher zu warten
- Doppelzuweisungen können einfacher/schneller erkannt und vermieden werden
- geringere Dateigröße.
Bei den heutzutage üblichen Bandbreiten sieht vielleicht nicht jeder einen Sinn in der Einsparung von einigen Bytes an einer CSS-Datei, aber spätestens nach dem bekannt wurde, dass die Ladezeit zu einem Ranking-Faktor für google werden soll, macht jede Einsparung Sinn.
Für Kurzschreibweisen sind nicht immer alle Werte notwendig, werden Sie nicht gesetzt, so wird ein Standardwert zugewiesen.
Ich habe zwei Cheatsheets erstellt, die hoffentlich für den einen oder anderen hilfreich sind. Eine ausführliche Version mit allen genannten Schreibweisen (ohne Farben) und eine „CheatCard“, die einfach nur die Kurzschreibweisen enthält.
Border
Eine der gängigsten Kurzschreibweisen ist die Eigenschaft border. Mit ihr lassen sich border-width, border-style und border-color auf einmal zuweisen.
Eigenschaften:
border-width: 1px; border-style: solid; border-color: #FF0000;
Kurzschreibweise:
border: 1px solid #FF0000;
Standardwerte:
border-width: medium; border-style: none; border-color: #000000; /*Browser abhängig, meist schwarz*/
margin
Für margin lassen sich alle vier Werte top, right, bottom und left nacheinander zuweisen. Die Werte werden in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links interpretiert.
Eigenschaften:
margin-top: 1px; margin-bottom: 2px; margin-right: 3px; margin-left: 4px;
Kurzschreibweisen:
1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links
margin: 1px 3px 2px 4px;
1px nach oben, 3px nach links und rechts, 2px nach unten
margin: 1px 3px 2px;
1px nach unten und oben, 3px nach links und rechts
margin: 1px 3px;
1px nach oben, unten, rechts und links
margin: 1px;
Standardwerte
0
Padding
Für padding verhält sich das ebenso.
Eigenschaften:
padding-top: 1px; padding-bottom: 2px; padding-right: 3px; padding-left: 4px;
Kurzschreibweisen:
1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links
padding: 1px 3px 2px 4px;
1px nach oben, 3px nach links und rechts, 2px nach unten
padding: 1px 3px 2px;
1px nach unten und oben, 3px nach links und rechts
padding: 1px 3px;
1px nach oben, unten, rechts und links
padding: 1px;
Standardwerte:
0
Background
Dass sich über background die Hintergundfarbe und das Hintergrundbild festlegen lässt, ist sicher jedem bekannt, aber dass ist noch lange nicht alles. Backgound-Attachement ist vielleicht nicht jedem geläufig, es legt fest, ob das Hintergrundbild seinen festen Platz behält oder mit-scrollt.
Eigenschaften:
background-color: #FF0000; background-image: url(../img/background.png); background-attachment: fixed; background-repeat: repeat-x; background-position: center;
Kurzschreibweise:
background:#FF0000 url(../img/background.png) fixed repeat-x center;
Standardwerte:
background-color: transparent; background-image: none; background-repeat: repeat; background-position: top left; /*0% 0% */ background-attachment: scroll;
font
Mit font lässt sich sicher am meisten einsparen, jedoch wirkt es auch am unübersichtlichsten, auf den ersten Blick, wie ich zumindest finde. Auf den zweiten Blick jedoch offenbart es Schrift-Eigenschaften die oft überhaupt nicht berücksichtigt werden, wie zum Beispiel die Zeilenhöhe (line-height).
Eigenschaften:
font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 2em; line-height: 1em; font-family: Arial Sans-serif;
Kurzschreibweise:
font: italic small-caps bold 2em/1em Arial Sans-serif;
Standardwerte:
font-style: normal; font-variant: normal; font-weight: normal; font-size: medium; line-height: normal; font-family: ; /*Browser abhängig*/
list-style
Bisher waren die Kurzschreibweisen relativ weit verbreitet und auch bekannt, aber auch listen lassen sich kürzer stylen.
Eigenschaften:
list-style-type: square; list-style-position: inside; list-style-image: url(../img/list-style.png);
Kurzschreibweise:
list-style: square inside url(../img/list-style.png);
Standardwerte:
list-style-type: disc; list-style-position: outside; list-style-image: none;
Der direkte Vergleich
Um den Unterschied zu verdeutlichen, habe ich zwei CSS-Dateien angelegt, jeweils in Kurzschreibweise und Normalschreibweise.
| Zeichen | Zeilen | Bytes | |
|---|---|---|---|
| Css_long.css | 692 | 42 | 774 |
| Css_short.css | 323 | 23 | 367 |
Alle Werte mit Leerzeichen und Umbrüchen
Gezählt mit notepad++
Hexadezimalfarben
Zum Schluss möchte ich noch auf die Kurzschreibweise für Hexadezimalfarben eingehen, die natürlich die Kurzschreibweisen für background und border ideal ergänzen. Als kleine Einführung, eine “Hexadezimalfarbe” besteht aus 6 Zeichen, jeweils zwei für die Grundfarben Rot, Grün und Blau.
color: #RRGGBB;
Sind nun, wie in diesem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann diese ein zu einem Zeichen zusammengefasst werden.
color: #RGB;
Diese Möglichkeit der Farbangabe muss allerdings nicht immer die kürzeste sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kürzer als die kurze Hexadezimal-Variante, da bei ihr noch eine Raute vorangestellt werden muss.
Welche Variante für die jeweilige Farbe die beste/kürzeste ist, muss deshalb individuell entschieden werden.
Farbtabellen gibt es im Web zur Genüge in allen Variationen, deshalb möchte ich hier nur ein paar Beispiele nennen:
| Schwarz | #000000 | #000 | black |
| Weiß | #FFFFFF | #FFF | white |
| Rot | #FF0000 | #F00 | red |
| Blau | #0000FF | #00F | blue |
| Grün | #00FF00 | #0F0 | green |
| (Limone) Grün | #00FF00 | #0F0 | lime |
| Gelb | #FFFF00 | #FF0 | yellow |
(tm), (mm), (sl)
21 Antworten
Guter Artikel & Übersicht. Für CSS Anfänger eine gute und hilfreiche Erklärung, was es mit Kurzschreibweisen in CSS auf sich hat.
Find ich toll!
Für sowas bin ich immer gerne zu haben… 😉
Vielen Dank, direkt 2x ausgedruckt 🙂
Vielen Dank, sehr hilfreich für die Arbeit!!!
@DerThomas und @Marcel Weber:
Selbstverständlich kann hier jeder seine Meinung sagen. Dazu ist diese Einrichtung ja auch da.
Und ich mische mich da grundsätzlich auch nicht ein, wenn andere miteinander diskutieren.
Aber mittlerweile sind wir glaube ich an einem Punkt angelangt, an dem Marcel meiner Meinung nach in die Defensive gedrängt wird oder sich zumindest so fühlen muss.
Nachdem, was er sich hier für eine Arbeit gemacht hat mit seinem Artikel, hat er das nicht verdient.
Sicher hat er nicht ALLE „Gesetze“ des css hier erläutert und auch nicht alle Möglichkeiten, gewisse Unstimmigkeiten umgehen zu können.
Aber der Anspruch seines Artikels bezieht sich eindeutig auf die Kurzschreibweisen. Und auch wenn da die eine oder andere kleine Frage offen bleibt, hat er meiner Meinung nach einen sehr guten Artikel hier abgeliefert.
Daran ändert es auch nichts, wenn man ihn dauernd immer wieder und wieder auf die Standardwerte des Browserrandes aufmerksam macht.
Jeder, der sich auch nur ein bisschen mit HTML und css auskennt weiß, dass die Browser ohne Eingriff mit css einen Rand lassen, oben und unten etwa 5 Pixel, links und rechts etwa 10 Pixel, je nach Browser.
Na und dass man diesen Rand mit der css-Formatierung margin:0 sehr leicht eliminieren kann, das sollte eines der ersten Dinge sein, die man im Umgang mit css lernt.
Mehr braucht es in diesem Falle wirklich nicht. Denn schließlich ist jede noch so feine css-Formatierung in den modernen Browsern vom Benutzer in großem Maße beeinflussbar, was ich persönlich sehr bedauere. Wozu machen wir uns dann eigentlich so viel Arbeit?!
Und jeder Webworker wird dem Hintergrund mit css eine bestimmte Farbe zuweisen, für weiß eben #fff. Das hat man ja schon selbstverständlich gemacht, bevor es css gab.
Aber darum geht es hier ja gar nicht.
Also hört bitte auf mit der Erbsenzählerei und damit, den Marcel derart zu bedrängen. Das bringt nichts und das hat er auch nicht verdient.
@Marcel Weber:
Vielleicht solltest Du auch nicht auf jeden einzelnen Kommentar eingehen.
Das was Du hier abgeliefert hast, ist größtenteils sehr gut. Stehe einfach dazu. Du hast keinen Grund, Dir alles schlecht reden zu lassen.
Mit css ist so einiges machbar, aber Dinge, die nicht zu diesem Thema passen, solltest Du einfach übergehen.
Standardwerte überschreiben doch nichts.
Ein Hinweis auf die Möglichkeit zur Veränderung der Standardwerte wäre aber m.E. durchaus sinnvoll gewesen. Ein Anfänger geht laut diesem Artikel davon aus, dass z.B. standardmäßig die Hintergrundfarbe immer weiß ist.
Praktisch sollten diese Werte gesetzt werden!
Oh, na wenn es bei css4you und bei SELFHTML so steht, dann muss es ja stimmen. Klasse…
@ DerThomas
Danke für deinen Kommentar und die Hinweise.
Dass sich Standardeinstellungen verändern lassen ist mir bekannt, ich kann im Browser auch z.B. die Schriftart und Größe einstellen und dies damit für alle Webseiten zu Überschreiben, oder gleich komplett CSS unterbinden, was jegliches CSS überflüssig machen würde.
Worauf sich die Standardwerte beziehen weiß ich leider auch nicht mehr so genau, ist zu lange her, als ich CSS gelernt habe, sie sind aber bei css4you beschrieben und auch bei SELFHTML wird der Ausgangswert mit „0“ beschrieben.
Mit green ist mir natürlich ein Fehler unterlaufen, den ich umgehen korrigieren werde. Danke nochmal dafür.
@Marcel Weber:
Da ist einiges falsch im Artikel.
Und zu deinem Kommentar 12:
Folge bitte der Anleitung die du hierüber selber verfasst hast. Wenn du den Rahmen siehst, stelle dir die Frage warum dieser nicht am Rand der Seite „klebt“ sondern Abstand dazu hat.
Und was sollen das für Standardwerte im Artikel sein?
Worauf beziehst du dich? Auf die Werte des W3C jedenfalls nicht.
In manchen Browsern kann man diese Standardwerte übrigens sogar verändern.
(Opera z.B.: Einstellungen -> Webseiten)
Hier mal ein paar Infos zu den Standardwerten laut W3C:
http://www.w3.org/TR/CSS2/sample.html
margin von body und p sind z.B. per default nicht gleich 0.
Übrigens sind diese Kurzschreibweisen auch bei SELFHTML recht gelungen zusammengefasst:
http://de.selfhtml.org/css/eigenschaften/
z.B. unter „Außenrand und Abstand“ => „margin (Außenrand/Abstand allgemein)“
Und noch was: green != #0f0
@Harry Schmieder
Danke für den Tipp, das wäre sicher nicht schlecht gewesen, aber andererseits lässt sich das sicher auch in einem neuen Artikel unterbringen 😉
@jannik
Das frage ich mich auch des öfteren 🙂
Erstelle doch mal ein leeres HTML file mit mit einem div und gib diesem einen Rahmen(am einfachsten noch einen kurzen text in das div)
und schau es dir im Browser an.
Danach setzt du margin auf 0.
Du wirst keine Veränderung sehen, erst wenn du margin auf min 1px setzt.
@jannik:
Gerade weil standardmäßig die Werte für margin und padding nicht vordefiniert sind, muss man sie mit css angeben, wenn man fensterfüllende Layouts ohne Rand erstellen will.
Das macht man am besten mit dem Universalselektor (*). Dort gibt man für margin und padding 0 ein, dann betrifft das grundsätzlich alle Elemente im Layout. Soll ein bestimmtes Element einen gewissen Außen- und / oder Innenabstand haben, dann muss man dieses Element mit einem margin- und / oder padding-wert >0 formatieren.
So spart man sich Mehrfach-Formatierungen vom margin:0, padding:0.
Ich frage mich, wo denn die „Standardwerte“ für margin und padding herkommen. Wenn ich ein neues HTML-Dokument ohne jegliche CSS-Deklarationen erstelle, sind die Standardwerte definitiv nicht 0.
Vor allem hängen die Standwerte auch von den Elementen ab, über die man spricht.
Sehr schön und verständlich verfasster Artikel. Lob für Deine Arbeit.
Vor allem nützlich für Newbees auf dem css-Gebiet.
Jemand, der viel Erfahrung mit css hat und verantwortungsbewusst damit umgeht – sorry – der braucht diesen Artikel nicht. Der sollte das wissen.
Als Konsequenz fehlt mir hier noch, dass man alle Elemente, die die gleiche Auszeichnung haben, zusammenfassen kann, durch Kommata getrennt.
So dass praktisch jede Auszeichnung nur einmal vorkommt.
Auch das spielt eine nicht zu unterschätzende Rolle bei der Kurzschreibweise und dadurch kann man nochmals einige Prozent an Gewicht einsparen.
Ich arbeite eigentlich seit Jahren mit der Kurzschreibweise, ganz einfach weil das Wort „Kurz“ weniger Zeit benötigt.;-)
Gute Liste für viele. Benutze die Shorttags selbst auch, nur für die Font Anweisungen meist nicht. Einmal kann ich’s mir da einfach nie merken (dafür gibt’s ja jetzt des Cheatsheet), zum andern halte ich es bei den Font Angaben übersichtlicher, wenn alles einzeln aufgelistet wird. Hier ändert man oft ja nur die Schriftgröße und Lineheight.
Bei den Kurzschreibweisen muss man allerdings aufpassen, dass man hier ebenfalls nichts ausversehen überschreibt. Geht vor allem beim background sehr schnell.
Schön eine solche Liste zur Verfügung zu haben.
Vielen Dank für die Arbeit.
Die Kurzschreibweisen bie den Farben führen übrigens bei HTML-Mails zu Problemen. Outlook mag sie nicht anzeigen.
Schöne und sehr nützliche Sache für jeden, der es nicht beruflich macht und somit immer im Kopf hat.
Danke für Deine Arbeit!
@ream88: Sorry – ist korrigiert in: „top, right, bottom und left“. Danke für den Hinweis :-)!
Cool, danke! Sowas hab ich schon immer gesucht! 🙂
Bei folgendem Absatz hat sich ein Fehler eingeschlichen:
margin
Für margin lassen sich alle vier Werte top, bottom, right und down nacheinander zuweisen.