Der dritte Teil meiner Serie zu CSS Shorthands. Diesmal geht es um Rahmen.

Heute kommt bereits der dritte Teil meiner Serie über CSS Shorthands. Im ersten Teil gab ich eine kurze Einführung, was das überhaupt ist und was sie bringen, im zweiten Teil wurden Innen- und Außenabstände ausführlich behandelt.

Nun im dritten Teil werde ich Rahmen beschreiben. Wie man sie normalerweise definiert und wie man es auch ganz kurz und knackig machen kann, wenn man weiß wie.

Hier also zum Einstieg eine vollständige Definition für einen normalen zehn Pixel dicken blauen Rahmen:

Das allein ist noch kein großes Schauspiel. Das Äquivalent sieht dazu so aus:

Auch hier hat sich der Code für die einzelnen Attribute auf mehr oder weniger ein Drittel des vorherigen verringert. Aber nun noch die Erklärung der Syntax:

• Der erste Wert bestimmt die Breite des Rahmens. Die Angabe dort kann in allen erdenklichen Größeneinheiten erfolgen, die in CSS zulässig sind.
• Der zweite Wert bestimmt die Art des Rahmens. Im obigen Beispiel nutze ich eine durchgezogene Linie. Alternativen hierzu wären eine gestrichelte (dashed) oder gepunktete (dotted) Linie. Mehr zu den verschiedenen Arten einer Rahmenlinie findet man bei SELFHTML.
• Der dritte Wert gibt schlussendlich die Farbe an. Dies kann ebenfalls in allen zulässigen Varianten erfolgen.

Bis jetzt kann man sich noch denken, warum man das verwenden sollte. Doch spätestens wenn man einen bunten Rahmen erstellen will mit vier verschiedenen Farben, Dicken und Linienarten wird es schnell übersichtlich:

OK, so ein Beispiel will niemand nachbauen und wer sowas auf seiner Website verwendet leidet sowieso an Geschmacksverirrung der übelsten Sorte, aber es zeigt recht eindeutig, wie schnell der Code für einen simplen Rahmen wachsen und unübersichtlich werden kann.

Und um dem geneigten Entwickler die Übersicht zu erleichtern und die Stellen, an denen was geändert werden kann, zu verringern hier nun das kurze Beispiel:

An diesem Beispiel sieht man deutlich, wie effektiv Shorthands sein können und wie stark sie den Code vereinfachen können. Und wie man sieht kann man die Kurzdefinitionen nicht nur für einen kompletten Rahmen verwenden, sondern auch nur für bestimmte Teile eines Rahmens.

Logischerweise kann man natürlich auch Mischungen verwenden, wie die folgende:

Hier wird zuerst für das gesamte Element ein solider Rahmen von einem Pixel Dicke und in der Farbe rot angegeben. Anschließend wird ein Teil des Rahmens überschrieben. Dadurch ist der komplette Rahmen rot und nur oben ist er fünf Pixel dick und blau.

Hier nun eine Liste der weiteren Artikel, die sich in dieser Serie befinden:

• CSS Shorthands effektiv nutzen – Einführung
• CSS Shorthands – Innen- und Außenabstand

—
Foto: Border-USA-Mexico

Der Innenabstand, besser bekannt als padding und der Außenabstand alias margin sind zwei sehr populäre Beispiele für effektive Shorthands. Hier nun auch direkt das Beispiel dazu:

Bei margin gilt genau die gleiche Syntax

Bei padding und margin werden die einzelnen Werte immer in einer bestimmten Reihenfolge angegeben, die ich nun zeigen will:

Das allein ist noch nicht sehr spannend, denn das wird es erst, wenn man die Kürzung noch weiter kürzt. So kann z.B. folgendes Konstrukt noch stärker gekürzt werden:

Hierbei wird für oben und unten jeweils der Wert 10px genutzt und für rechts und links auto. Man muss also nicht immer alle Werte für alle Positionen befüllen. Man kann von einem Wert aufwärts bis zu maximal vier Werten gehen. Die letzen beiden Möglichkeiten werde ich jetzt noch zeigen:

Hiermit bekommt man auf allen vier Seiten eines Elementes einen gleichmäßigen Abstand von jeweils 10 Pixel. Und damit komme ich auch schon zur wohl unbekanntesten und am wenigsten genutzten Variante. Der mit drei Werten.

Damit bekommt man oben einen Abstand von 10 Pixel, rechts von 20 Pixel und unten von 30 Pixel. Ein Abstand nach links existiert bei dieser Notation nicht.

Dies war auch schon der zweite Teil meiner Serie über CSS Shorthands. Fragen, Anregungen, Kritik ist immer gern gesehen. Vielleicht habe ich ja auch etwas vergessen.

Hier nun eine Liste der weiteren Artikel, die sich in dieser Serie befinden:

• CSS Shorthands effektiv nutzen – Einführung
• CSS Shorthands – Rahmen

Was sind CSS Shorthands?

Im Grunde genommen ist das schnell erklärt. Es sind schlichtweg Abkürzungen von Definitionen in CSS. Normalerweise muss man z.B. bei einem Rahmen jede Eigenschaft einzeln definieren. Genauer gesagt gibt es für jede dieser Eigenschaften eine eigene Möglichkeit zur Definition:

Hiermit wird ein Rahmen erstellt, der exakt ein Pixel breit, gepunktet und rot ist. Natürlich ist das umständlich zu schreiben, wenn man, wie ich, seinen Quelltext in einem normalen Texteditor schreibt und nicht in einem dieser speziellen Editoren für CSS. Darum gibt es für obiges Beispiel auch die Möglichkeit dies so zu definieren:

Der Code hat sich somit auf ca. ein Drittel des Vorherigen gekürzt und ist wesentlich besser zu lesen als zuvor. Die Reihenfolge der einzelnen Werte folgt bei jeder Möglichkeit Shorthands zu nutzen einem festgelegten Muster, damit niemand seine eigene Suppe kochen kann und Browser eine bestimmte Grundlage zum Rendering haben.

Im übrigen kann man auch Farbangaben kürzen, wie man oben sehr gut sieht. So kann z.B. aus #000000 einfach nur #000 werden. Dies funktioniert natürlich nur bei Farbangaben, bei denen jeweils zwei mal die gleiche Ziffer hintereinander erscheint. #12ff66 kann man deswegen nicht in Kurzschreibweise definieren.

So, ich denke das Grundprinzip hat nun jeder verstanden und deswegen fange ich gleich mal an den zweiten Teil zu schreiben.

Hier nun eine Liste der weiteren Artikel, die sich in dieser Serie befinden:

• CSS Shorthands – Innen- und Außenabstand
• CSS Shorthands – Rahmen

Du kennst noch weitere interessante Link zu Websites, die jeder ambitionierte Webdeveloper kennen sollte? Dann immer her damit!

Zuallererst sollte man sich schon beim Entwerfen des Designs, bspw. mit Photoshop, Gedanken darüber machen, wie man das fertige Design am besten in validen Quelltext umsetzen kann. Einfach drauflos zu designen und sich erst dann Gedanken über die Umsetzung zu machen bringt nur massive Probleme mit sich, durch die man schnell die Lust am frisch entworfenen Design verliert. Hat man sich jedoch Gedanken gemacht fällt die Umsetzung meist sehr leicht, da das fertige Grundgerüst schon im Kopf herumgeistert.

Die Umsetzung des Quelltextes

Viele setzen bei der HTML-Umsetzung auf Frameworks, wie z.B. YAML. Doch diese engen den Ideenfluss meist nur ein, wenn man ein komplett selbst erstelltes Template für eine Website gestalten will. Von daher empfiehlt es sich ein leeres Gerüst zu erstellen, dass bis auf die wichtigsten Metatags und die Basis-Elemente nichts enthält. Wenn dahinter noch eine ausgeklügelte Ordnerstruktur für die ausgelagerten Dateien und Bilder steckt ist dies umso besser, da man sich einige Arbeit sparen kann.

Anschließend sollte man darauf achten, dass man so wenig Tags wie möglich verwendet, um den Quelltext nicht unnötig aufzublähen. Ein gutes Beispiel hierfür sind kompliziert verschachtelte DIV-Blöcke, die man durch gut eingesetztes CSS auf einen, maximal zwei verringern kann. Zum einen sorgen weniger Tags natürlich für weniger anfallenden Traffic, zum anderen jedoch auch für eine erhöhte Barrierefreiheit, da z.B. Screenreader leichter auf die Inhalte zugreifen können. Hier könnte, wenn es ganz dumm läuft, etwas ähnliches herauskommen, wie zu Zeiten der Tabellenlayouts. Sieht gut aus, hat aber keinen wirklichen Nutzen für die User.

Eine weitere Möglichkeit Traffic zu sparen ist auf Kommentare zu verzichten. Ich will hier niemanden dazu auffordern unübersichtlichen, da nicht dokumentierten, Code zu produzieren. Ganz im Gegenteil. Eine gute Dokumentation ist für die spätere Weiterarbeit an Projekten unerlässlich. Jedoch werden Kommentare nicht für den Produktivbetrieb benötigt. Deswegen kann man sie getrost entfernen. Positiver Nebeneffekt: Leuten, die zu faul sind eigenen Quellcode zu schreiben und von diversen Sites klauen erschwert man die Arbeit, da die benötigten Stellen schwieriger zu finden sind

CSS und Javascript optimieren

In Sachen CSS und Javascript bin ich ebenfalls der Meinung, dass eine Dokumentation das A und O bedeutet. Allerdings sollte man auch hier auf eben diese im Produktiveinsatz verzichten. Was die Entwicklung mit diesen beiden Sprachen angeht sollte man keinesfalls darauf verzichten den Code so zu schreiben, wie er für einen selbst am besten zu lesen ist. Wenn man gerne viele Leerzeichen setzt, mit Tabs einrückt oder auf Kurzschreibweisen verzichtet, dann soll niemand daran gehindert werden.

Die Komprimierung und Optimierung von diesen beiden Arten Quelltext erfolgt im Nachhinein, nachdem man die Codes ausführlich getestet und für gut befunden hat. Hierfür gibt es einige sehr interessante Dienste im Netz, die diese Arbeit übernehmen. Und das sogar gut.

Zum einen gibt es für Javascript den Compressor von Sergej Müller, mit dem man den Code auf zwei verschiedene Arten komprimieren kann. Die erste führt dazu, dass sämtliche unnötigen Kommentare, Leerzeichen, -zeilen, Tabs, etc. entfernt werden. Die zweite, effektivere, bewirkt noch um einiges mehr, da alles in eine einzige Zeile geschrieben wird. Hier jedoch muss der Code noch einmal in aller Ausführlichkeit getestet werden, da einzeiliges Javascript schon des öfteren zu Problemen geführt hat.

Eben genannter Dienst ist sogar für CSS geeignet, wobei ich dafür den Code Beautifier bevorzuge, da er sehr viele nützliche Einstellungen bietet. Man kann damit bspw. die letzten “;” in einer Definition entfernen oder ausführlich geschriebene Styles durch Kurzschreibweisen (Shorthands) ersetzen. Auch Farbnamen und font-weight-Angaben können optimiert werden. Nebenbei kann er auch ungültige Angaben für die angegebene CSS-Version löschen, um validen Code zu erhalten. Das beste Feature ist jedoch, dass man auswählen kann, wie stark man komprimieren will. Vom Entfernen unnötiger Zeilenumbrüche und Kommentare bis hin zur einzeiligen Ausgabe ist vieles möglich. Auch hier empfiehlt sich ein ausführlicher Test in verschiedenen Browsern, da durch zu starke Komprimierung schon mal die eine oder andere Angabe durch ungklückliche Sortierung wieder überschrieben werden kann. Dies stellt jedoch die Ausnahme dar.

gZip-Komprimierung

Ist man soweit gekommen, könnte man annehmen, dass alle Möglichkeiten den Code zu optimieren schon erschöpft sind. Weit gefehlt. Es gibt noch eine letzte, extrem wirkungsvolle, Technik, den Code noch weiter zu komprimieren: gZip-Komprimierung. Einige werden jetzt denken, dass dies nur mit PHP-Dateien funktioniert. Prinzipiell stimmt das auch, jedoch gibt es diverse Lösungsansätze mit denen man auch andere Arten von Textdateien zippen kann.

Eine davon beschreibt Alinki.com. Hier wird mittels einer .htaccess-Datei und bereits gezippten Dateien ein möglicher Overhead durch die ständige Neugenerierung umgangen, da die komprimierten Dateien bereits auf dem Server liegen und nur noch ausgeliefert werden müssen.

Eine weitere Möglichkeit mittels eines PHP-Scripts wird auf PHP-Vision.de beschrieben. Dort werden die Dateien on-the-fly komprimiert, was jedoch, speziell bei günstigen Webspace-Angeboten und Freehostern, zu eventuellen Einbußen in der Performance führen kann.

Fazit

Allgemein kann man sagen, dass es nicht allzu schwer ist optimierten und schnellen Code zu produzieren, der sehr viele positive Nebeneffekte mit sich bringt. Logischerweise liegt es immer an einem selbst, ob man die gebotenen Möglichkeiten nutzt oder nicht. Es ist auf alle Fälle jedem zu empfehlen, der seine Website einer breiteren Masse zur Verfügung stellen will.